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}
Related
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
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
My webpage in desktop view is divided into a 2x3 layout i.e two rows with 3 grid-columns each (bootstrap rows and columns), as given in below:
**image1 image2 image3
image4 image5 image6**
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image1.png"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image2.png"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image3.png"/>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image4.png"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image5.png"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="image6.png"/>
</div>
</div>
When I reduce to a mobile size(col-xs), I want the page two be in a 2x3 layout, as given below:
**image1 image2
image3 image4
image5 image6**
Can this be achieved using the bootstrap framework?
Just add the declaration for the xs viewport in your column classes and make it a single row, like you see below. As long as the columns (and column offsets if you're using them) equal to 12, you can use a single row wrapper to make several rows worth of columns. I'm glad I could help.
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image1.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image2.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image3.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image4.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image5.png"/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="image6.png"/>
</div>
</div>
Example:
http://www.bootply.com/8JlDo3kXKH
I wanted to make my list-group full container width with multiple columns (Bootstrap 3.2.0). I've created the following code:
<div class="container" style="background: red;">
<div class="row">
<div class="list-group">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item1
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item2
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item3
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item4
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item5
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item6
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item7
</div>
</div>
</div>
</div>
<p class="row alert alert-warning text-center">
message here
</p>
</div>
Demo on Bootply
The only problem here is that when you resize your browser window, for smaller resolution (probably sm) the horizontal scrollbar appears probably because of right margin or right padding. It seems it's probably connected to using row here.
When I remove the outer .row div there is no problem (no horizontal scrollbar appears - Bootply demo) but in this case list-group won't take full container width.
Question - is it possible to solve it in simple way? Why does it happen? I know it's maybe not very standard solution (I put many extra divs inside list-group) but if possible I would like to make it work.
The problem you have is that you are missing a col-* class. Bootstrap requires that nested rows need columns inside them as the immediate child but your hierarchy goes container -> row -> row -> col-*. So you just need to insert a col-xs-12 in the middle, or more simply, add that class to your list-group div.
<div class="container" style="background: red;">
<div class="row">
<div class="col-xs-12 list-group">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item1
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item2
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item3
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item4
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item5
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item6
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
item7
</div>
</div>
</div>
</div>
<p class="row alert alert-warning text-center">
message here
</p>
</div>
And the Bootply is here: http://www.bootply.com/jIW90o3ZCA
If you don't want any spacing between the list-group-items, then you'd need to add the list-group-item class to the columns:
<div class="container" style="background: red;">
<div class="row list-group">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
item1
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
item1
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
item1
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
item1
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
item1
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
item1
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item">
item1
</div>
</div>
</div>