i have problem with this code the problem is i can't center the last block
when it come down after resize the page
i tried also with margin:0 auto but it;s not working with me here
the code which i tried with :
<div class="container">
<div class="row">
<div style="background:blue"class=" col-sm-4 col-xs-6 col-md-4 col-lg-4 ">
3
</div>
<div style="background:black" class=" col-sm-4 col-xs-6 col-md-4 col-lg-4 ">
2
</div>
<div style="background:red;" class=" center-block col-sm-4 col-xs-6 col-md-4 col-lg-4 ">
1
</div>
</div>
</div>
and from jsfiddle
To center last column use xs-offset-3
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 alert-warning">3</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 alert-danger">2</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0 col-md-4 col-lg-4 alert-info">1</div>
</div>
</div>
And add col-xs-offset.css to support on Bootstrap 3 offsets on XS sizes
or see result on jsFIddle
Related
I am using bootstrap and i want to create space between row 1 and row 2. There are 6 images together and row 1 and 2 has 3 images in each row
This is my code for each image
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 ">
<img src="images/1thumb.png" alt="Main">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 ">
<img src="images/2thumb.jpg" alt="Elevator1">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 ">
<img src="images/3thumb.jpg" alt="Elevator2">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 ">
<img src="images/4thumb.jpg" alt="Elevator3">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 ">
<img src="images/5thumb.jpg" alt="Interior">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 ">
<img src="images/6thumb.jpg" alt="Reception">
</div>
</div>
</div>
You can just add margin bottom to the columns.
Something like
.row > div { margin-bottom: 15px}
Hello I have website called: http://mtisambebi.ge/
There is module where I have boostrap cols, but one col is aligned left and I do not understand whay.
this is screenshot
also module is called: ბოლო სიახლეები in main page.
Please add <div class="clearfix"></div> after every 3 column. where getting flot right
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>
<div class="clearfix"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>
I was using Bootstrap3 to make a 3 column grid. That looks like this:
However, see those rows with just two boxes, and one box. I was wanting to experiment to see how it would look centered if there are not 3 full boxes.
I accomplished this by adding display:flex; justify-content:center; to the .row class but it's not the true bootstrap way. I was wondering what would be the true bootstrap way.
Here is my code:
<div class="padd-80">
<div class="row">
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
</div>
</div>
<div class="padd-80">
<div class="row">
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
</div>
</div>
<div class="padd-80">
<div class="row">
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
</div>
</div>
Thanks
Try this:
<div class="padd-80">
<div class="row">
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
</div>
</div>
<div class="padd-80">
<div class="row">
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
</div>
</div>
<div class="padd-80">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
</div>
</div>
Logic is simple, grid system of bootstrap consists of 12 columns.
If you have two divs, which are .col-lg-4, you should give col-lg-offset-2 to first div to make them centralised.
[2] [.col-lg-4] [.col-lg-4] [2]
For second row, I gave col-lg-offset-2 and col-md-offset-2 classes to first div.
For third row, I gave col-lg-offset-4 and col-md-offset-4 class to div.
[4] [.col-lg-4] [4]
I have three divs as described in the image...i want to change the location of divs as they go responsive...
Is it possible to do so? and how?
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-1</h3></div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-2</h3></div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-3</h3></div>
</div>
</div>
By using the Bootstrap defaults you would like to push and pull columns by simply adding some additional classes to them.
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-xs-6 text-center"><h3 class="border">Div-1</h3></div>
<div class="col-sm-4 col-xs-6 col-sm-push-4 text-center"><h3 class="border">Div-3</h3></div>
<div class="col-sm-4 col-xs-12 col-sm-pull-4 text-center"><h3 class="border">Div-2</h3></div>
</div>
The point is to move the 3rd col to swap places with the 2nd col, since the 2nd will be at the bottom when it goes down to mobile. Using .col-sm-pull and .col-sm-push will grant you the ability to move columns around easily without breaking anything with unnecessary float styling or anything else.
Refer to Bootstrap's official guide to column ordering.
<div class="container-fluid">
<div class="row">
<div class="first col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-1</h3></div>
<div class="second col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-2</h3></div>
<div class="third col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-3</h3></div>
</div>
</div>
#media only screen and (max-width:990px) and (min-width:320px){
.first, .third{
float:left;
width:48%;
}
.second {
width:100%;
float:right;
display:block;
clear:both;
}
}
This works,
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-1</h3></div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-2</h3></div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 text-center "><h3 class="border">Div-3</h3></div>
</div>
</div>
You could use http://www.w3schools.com/cssref/sel_nth-child.asp if your element hasn´t any unique id or class.
and
float: right;
As long as
#media only screen and (max-width: 990px) and (min-width:320px)
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center">
<h3 class="border">Div-1</h3>
</div>
<div class="hidden-sm hidden-xs col-md-4 col-lg-4 text-center">
<h3 class="border">Div-2</h3>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center">
<h3 class="border">Div-3</h3>
</div>
<div class="hidden-lg hidden-md col-xs-12 col-sm-12 visible-sm-block visible-xs-block text-center">
<h3 class="border">Div-2</h3>
</div>
</div>
</div>
http://getbootstrap.com/css/#responsive-utilities
Is it even possible and how can I create a bootstrap grid that's 3x3 for md columns. 6x2 for sm columns and 9x1 for xs columns?
3x3 to 9x1 seems to be easy.
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-12 col-md-4'>1</div>
<div class='col-xs-12 col-md-4'>2</div>
<div class='col-xs-12 col-md-4'>3</div>
</div>
<div class='row'>
<div class='col-xs-12 col-md-4'>4</div>
<div class='col-xs-12 col-md-4'>5</div>
<div class='col-xs-12 col-md-4'>6</div>
</div>
<div class='row'>
<div class='col-xs-12 col-md-4'>7</div>
<div class='col-xs-12 col-md-4'>8</div>
<div class='col-xs-12 col-md-4'>9</div>
</div>
</div>
But I can't figure out how to create the 6x2 in between.
unska try this
HTML
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>1</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l'>2</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>3</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l'>4</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>5</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l'>6</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>7</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l'>8</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>9</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l visible-sm'>10</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray visible-sm'>11</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l visible-sm'>12</div>
</div>
</div>
css
.gray{background-color:#ccc}
.gray-l{background-color:#ececec}
Check this fiddle
You can place all these columns in one row.
Simply add col-sm-6 to each div and the third column will automatically shift to the next row.
You're basically already doing something similar for the xs-size.
Keeping the one row around all these columns, allows for the styling around them to stay intact.
Try this to see if it helps.
View this large view Fiddle and resize it to see how Bootstrap works.
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bg-orange block clear">6 x 6 <br> These will stay like this all the way down to xs size</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bg-primary block clear"></div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bg-orange block clear">3 x 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bg-primary block clear"></div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bg-orange block clear"> 6 x 2</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bg-primary block clear"></div>
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bg-orange block clear">9 x 9</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 bg-primary block clear"></div>
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-3 col-sm-6 col-xs-9 bg-orange block clear">6 x 6 lg then change to 3 x 3 at md, then change to 6 x 2 at sm and then change at xs to 9 x 1.</div>
<div class="col-lg-6 col-md-3 col-sm-2 col-xs-1 bg-primary block clear"></div>
</div>