I would like to align three div in one line with a little space between first div and second div and last div using bootstrap as you see in the picture :
I try with this code :
<div class="row">
<div class="col-md-2">
<img src="img/emo_positif.png')}}">
</div>
<div class="col-md-7">
<div class="square1"></div>
</div>
<div class="col-md-3">
<img src="img/emo_negative.png')}}">
</div>
</div>
but it shows me a big space between the div
Using Bootstrap 3:
.row {
height: 24px;
}
.row > div {
height: 100%;
}
.square {
background: pink;
}
.square1 {
background: #01a8ff;
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-xs-2 square">
</div>
<div class="col-xs-8">
<div class="square1"></div>
</div>
<div class="col-xs-2 square">
</div>
</div>
Check this Pen.
Read the docs.
For making the three division in same line . There are many ways. For better UX use display:flex in css for the parent division
Thanks
I want to create a page where there are 3 rectangles (in black). The code show this. Now I want to create inside the 2nd horizontal rectangle, 3 vertical rectangles with different sizes(in red). Every and each text should be centered in each rectangle (vertically and horizontally).
How do I insert 3 columns inside the 2nd rectangle and centering all text in this:
<div class="wrap">
<div class="row_wrap">
<div class="head x">
ONE
</div>
</div>
<div class="row_wrap">
<div class="middle x">
TWO
</div>
</div>
<div class="row_wrap">
<div class="bottom x">
THREE
</div>
</div>
</div>
body {font-size:36px; color:green;}
.wrap {display: table; width:100%;}
.row_wrap{display:table-row;}
.x{display:table-cell; vertical-align:middle; text-align:center;}
.head{height:200px; background:#fa4;}
.middle{height:400px; background:#4af;}
.bottom{height:100px; background:#a4f;}
I know this question is old, but it's interesting to know it's possible to solve this using flexbox.
.row, .column{
display: flex;
}
.row{
width: 100%;
height: 10rem;
border: 3px solid black;
flex-flow:
}
.column{
border:3px solid red;
height: 100%;
flex: 1;
}
.column--big{
flex: 2;
}
.center{
justify-content: center;
align-items: center
}
<div class="row center">
<span>Center</span>
</div>
<div class="row center">
<div class="column center">
<span>Center</span>
</div>
<div class="column column--big center">
<span>Center</span>
</div>
<div class="column center">
<span>Center</span>
</div>
</div>
<div class="row center">
<span>Center</span>
</div>
This code could obviously be optimized, but it's a start.
I have been trying to center vertically the content of my row (part of a bootstrap grid).
I tried to use the class centered
.centered{
float: none;
margin: 0 auto;
}
See the function part here:
https://dl.dropboxusercontent.com/u/164915/www/test.html#works
.centered{
text-align: center;
}
and in your html:
<div class="row">
<div class="span12 centered">
<h1>text</h1>
<p>more <br /> text.</p>
</div>
</div>
This is probably a pretty basic question, but I have a banner with an image on the left and text on the right. Under the banner is just a block of color. When the page gets smaller, my expectation is that the bits in the banner would stack (maintaining the background color for both) and the block of color (class="blue-line") would fall beneath them.
Here is the mark-up:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
</section>
and the css
.header {
background-color: #F2EBCC;
border: 10px solid #F2EBCC;
height: 120px;
}
.row > .title {
text-align: right;
top: 45%;
}
Thanks in advance!
JSFiddle: http://jsfiddle.net/3n6Kd/
try this:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
and:
.header {
background-color: #F2EBCC;
height: 120px;
}
.title {
text-align: right;
display: block;
padding: 10px;
}
.blue-line {
margin-top:10px;
height: 15px;
background-color: blue;
}
the text go under the first column not the blue-line, but it seems to appear above the blue-line so try it in your computer because some time jsfiddle.net don't show code correctly.
hope it will help you.
I'm using the bootstrap framework and trying to get an image centered horizontally without success..
I've tried various techniques such as splitting the the 12 grid system in 3 equal blocks e.g
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
What's the easiest method to get an image centered relative to the page?
Twitter Bootstrap v3.0.3 has a class: center-block
Center content blocks
Set an element to display: block and center via margin. Available as a mixin and class.
Just need to add a class .center-block in the img tag, looks like this
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
In Bootstrap already has css style call .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
You can see a sample from here
The correct way of doing this is
<div class="row text-center">
<img ...>
</div>
Update 2018
The center-block class no longer exists in Bootstrap 4. To center an image in Bootstrap 4, use mx-auto d-block...
<img src="..." class="mx-auto d-block"/>
Add 'center-block' to image as class - no additional css needed
<img src="images/default.jpg" class="center-block img-responsive"/>
Twitter bootstrap has a class that centers: .pagination-centered
It worked for me to do:
<div class="row-fluid">
<div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>
The css for the class is:
.pagination-centered {
text-align: center;
}
You could use the following. It supports Bootstrap 3.x above.
<img src="..." alt="..." class="img-responsive center-block" />
Assuming there is nothing else alongside the image, the best way is to use text-align: center in the img parent:
.row .span4 {
text-align: center;
}
Edit
As mentioned in the other answers, you can add the bootstrap CSS class .text-center to the parent element. This does exactly the same thing and is available in both v2.3.3 and v3
Works for me. try using center-block
<div class="container row text-center">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
I need the same and here I found the solution:
https://stackoverflow.com/a/15084576/1140407
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
and to CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
You can use margin property with the bootstrap img class.
.name-of-class .img-responsive { margin: 0 auto; }
I am using justify-content-center class to a row within a container. Works well with Bootstrap 4.
<div class="container-fluid">
<div class="row justify-content-center">
<img src="logo.png" />
</div>
</div>
Seems we could use a new HTML5 feature if the browser version is not a problem:
in HTML files :
<div class="centerBloc">
I will be in the center
</div>
And in CSS file, we write:
body .centerBloc {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
And so the div could be perfectly center in browser.
Just use following bootstrap class to fix it
<img class="mx-auto d-block" src="../path/to/.." alt="Image">
You should use
<div class="row fluid-img">
<img class="col-lg-12 col-xs-12" src="src.png">
</div>
.fluid-img {
margin: 60px auto;
}
#media( min-width: 768px ){
.fluid-img {
max-width: 768px;
}
}
#media screen and (min-width: 768px) {
.fluid-img {
padding-left: 0;
padding-right: 0;
}
}
I created this and added to Site.css.
.img-responsive-center {
display: block;
height: auto;
max-width: 100%;
margin-left:auto;
margin-right:auto;
}
A lot of the above options didn't work for me.
However, this worked!
<div class="container">
<div class="row">
<div class="col-sm-12" style="text-align: center;"><img class="center-block" src="img_path" /></div>
</div>
</div>
IN Bootstarp 5.0
Use
.mx-auto .d-block
You could change the CSS of the previous solution as below:
.container, .row { text-align: center; }
This should center all the elements in the parent div as well.