I have two divs that must be centered using the Bootstrap class text-center (for mobile reasons). After applying this class, the image and text center perfectly. However, I'd like the text to be centered AND left-aligned so that it is precisely in line with the left side of the image.
I've tried a couple of things: first centering the div and then creating a div around the text, and left-aligning the text with text-left. However, the text does not stay centered and moves all the way left of the column. I'd like it to only go as left as the image. If I set a margin with pixels so that the text is left-aligned with the image, then it does not stay responsive and jumps all over the page when it is resized.
Here is an example of the content centered, and an example of what happens when I center it and then left-align the text:
https://jsfiddle.net/wgr165tL/3/
I'd like to find out how to get the text centered but left-aligned only as far as the left of the image. It is necessary to keep the text-center class. Any input would be greatly appreciated.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<h1>Example 1 (Original)</h1>
(want text to align with the left edge of the box)
<div class="row text-center">
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
Test Test
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
Test Test
</div>
</div>
<h1>Example 2</h1>
(Tried centering and then left-aligning text, but it goes too far left. Ideally it will line up with the left edge of the box)
<div class="row text-center">
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
<div class="text-left">Test Test</div>
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
<div class="text-left">Test Test</div>
</div>
</div>
</body>
</html>
Another solution is to set some CSS-properties to your "Test Test" div:
In this case add this div-centered class to that div.
A working example :)
.div-centered {
text-align: left;
margin: auto;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<h1>Example 2</h1>
You rock div-centered class!
<div class="row text-center">
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div><img src="http://via.placeholder.com/200x100"></div>
<div class="div-centered" >Test Test</div>
</div>
<div class="col-sm-3">
<div><img src="http://via.placeholder.com/200x100"></div>
<div class="div-centered">Test Test</div>
</div>
</div>
Hope it helped :)
Add style="display:inline-block" to line 31, to
<div class="col-sm-3" style="display:inline-block">
You can center the div's by giving equal margins on both sides. Like this:
<div class="row">
<div class="col-xs-offset-4 col-xs-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
<div class="col-xs-offset-4 col-xs-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
</div>
See Updated Fiddle. Hope it helps!
Edit:
Just use relevant bootstrap .col-**-** classes.
<div class="row">
<div class="col-xs-offset-4 col-xs-4 col-md-offset-0 col-md-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
<div class="col-xs-offset-4 col-xs-4 col-md-offset-0 col-md-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
</div>
See Fiddle.
Use .col-sm-** if you want it to appear inline in tablets too.
try to delete the "text-center" in <div class="row text-center">
hope it help you..
Related
What have I done wrong? I can't get the text to the right. I am sorry, Real beginner.
<div class="top-bar">
<div class="container">
<div class="col-12 text-end">
<p> Bel ons </p>
</div>
</div>
</div>
Your code is working but the problem may be from the library or from the browser you are using, so I prefer to use the official Bootstrap CDN.
Official Bootstrap Documentation
This is an example of your code with Boostrap CDN:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<div class="top-bar">
<div class="container">
<div class="col-12 text-end">
<p> Bel ons </p>
</div>
</div>
</div>
The text-end class is working, but it's not as far right as it should be.
From the Bootstrap 5 docs...
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This padding
is then counteracted on the rows with negative margins to ensure the
content in your columns is visually aligned.."
Therefore the col-12 should be inside a row..
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-12 text-end">
<p> Bel ons </p>
</div>
</div>
</div>
</div>
Demo
I want a full width column that should not stack on small devices but stay with the same width. I am using bootstrap 4. This is my code,
<div class="container-fluid">
<div class=""row">
<div class="col-sm-12">
<h1>Welcome back User!</h1>
</div>
</div>
</div>
But when I inspect there is a slight oveflow in small devices. How to fix this?
You can use bootstrap col-12 class or just use a simple div to make it full width everywhere.
Here is the working example using bootstrap col-12 class:
.col-12 {
background-color: #dedede;
}
.content {
background-color: #abaaba;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1>Welcome back User!</h1>
</div>
</div>
</div>
<!-- without using bootstrap -->
<div class="content">
<h1>Welcome back User!</h1>
</div>
I have two div columns. I want to display a line between them on the screen.
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
</div>
Try this, I hope it'll help you out. Thanks
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-3">
<label>Left Column</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-sm-9 col-md-9 border-left">
<label>Right Column</label>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
You can use the following solution using the border-right from utility classes of Bootstrap 4. But there are no breakpoint classes available on the border utilities. So the border is always visible:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 border-right">Column A</div>
<div class="col-md-9">Column B</div>
</div>
</div>
In case you only want to show the border on a specific breakpoint you can use something like the following (border is only visible on breakpoint md and higher):
.border-right.border-md {
border-right-width:0!important;
}
#media (min-width: 768px) {
.border-right.border-md {
border-right-width:1px!important;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 border-right border-md">Column A</div>
<div class="col-md-9">Column B</div>
</div>
</div>
You can also add some custom SCSS code to the Bootstrap SCSS to add the breakpoints to the borders too: https://github.com/twbs/bootstrap/issues/23892
Sorry for tell this in Stackoverflow. I have sinned. Sorry but I cannot get an element centered and the tag makes everything work like a charm. As you can guess I am not very fluent in CSS. Can anyone see a better way to do it?
<div class="container-fluid">
<div class="row">
<div class="col-lg-2"><img alt="Logo" src="./images/logo.png">
</div>
<div class="col-lg-8">
<center><span> text to center</span></center>
</div>
<div class="col-lg-1">
<span element></span>
</div>
</div>
</div>
Thanks
Bootstrap has its own "text-center" class. If you apply it to your .col-lg-8 tag, it would allow you to remove that center tag.
It would look like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2"><img alt="Logo" src="./images/logo.png">
</div>
<div class="col-lg-8 text-center">
<span> text to center</span>
</div>
<div class="col-lg-1">
<span element></span>
</div>
</div>
</div>
I'm using the page-header class to centre the main content of my page. This creates some empty column space on either sides of page-header, and I'd like to utilize that space (possibly to add AdSense banners).
Here is what I tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Click Me!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 pull-left">
<span>Left Ding</span>
</div>
<div class="col-md-8">
<div class="page-header">
<h2>I'm a big centered page header!</h2>
</div>
</div>
<div class="col-md-2 pull-right">
<span>Right Dong</span>
</div>
</div>
</div>
</body>
</html>
I do not see Left Ding or Right Dong anywhere on the page. Here is the rendered html: https://jsfiddle.net/bgmjs3qf/
What is the correct way to utilize the left and right column spaces?
You have to add padding to the top of your page since you have a fixed navbar.
See example and Docs.
body {
padding-top: 70px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"> Click Me!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 pull-left"> <span>Left Ding</span>
</div>
<div class="col-md-8">
<div class="page-header">
<h2>I'm a big centered page header!</h2>
</div>
</div>
<div class="col-md-2 pull-right"> <span>Right Dong</span>
</div>
</div>
</div>