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>
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}
I have a form that contains several rows, but one of them is disappearing.
The source code looks like this:
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
</div>
</div>
<div class="row"><!--this row dissapears-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone-->
<h1>thing2</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
...
</div>
</div>
As far as I can tell this code looks fine, but this is what it turns into when it gets displayed.
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
<h1>thing2</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
...
</div>
</div>
This makes thing1 and thing2 appear together and not on their own row, and I have no idea why.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
</div>
</div>
<div class="row"><!--this row dissapears-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone-->
<h1>Row that disappears.</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
Last Row
</div>
</div>
The code doesn't seem to have any problem #Trevor. I just implemented it and it works well according to me. Let me know if i have misinterpreted your problem.
This code works fine. please check your css file or bootstrap library.
please use bootstrap cdn link.
Turns out my issue was not bootstrap at all. Thanks everyone for mentioning you can't reproduce it, made me dig deeper. The issue turns out to be what was in the div. It was an angular select element with a self closing tag. Changing it to a normal closing tag fixed everything. I excluded it because I thought it was not important and didn't verify before posting.
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 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
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>