I never have had a problem with the bootstrap grid until recently. The problem that I am having is with the medium breakpoint. On xs I have 2 columns, on small I have 3 columns, on medium I want 4 columns but this is broken and on large I have 6 columns. I am ending up with a row of 4 and then a row of 2, and so on and so forth.
xs: 6*6 = 36
sm: 4*6 = 24
md: 3*6 = 18 <- 18 is obviously why its causing the problem
lg: 2*6 = 12
For some reason I cannot think of a solution to this problem. The example can be seen at http://dev.charliegrove.com/kingdom
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
</div>
Any advice greatly appreciated as I always use bootstrap and figure there must be something I am missing here to accomplish this!!? Thank you
I show your demo code and you have code like this:
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
</div>
Now here the problem is, in each <div class="row"></div> you have 6 other divs, an you have repeated this format. So when the child divs set in the row, its break down to the new line for the next <div class="row"></div>. So in the col-md-3 class it will break down in the set of 4 and 2.
To avoid this problem you can set all your child divs in the single <div class="row"></div> like this :
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
</div>
I see two simple options... either skip the md-3 columns (i.e. go straight from sm-4 to lg-2), or as #tejashoni suggested, put all your squares in a single div class="row"
Related
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 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 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>
In my development environment I upgraded to rails 4.1.0 and removed some old bootstrap pieces. Now, the bootstrap Wells on my homepage are no longer working on mobile width screens.
Here is my last commit that is currently not applied to production yet. https://github.com/kacole2/JumpSquares/commit/afbcfbecdb3dc785dc6cb8469fadd2452464cef1
If you go to the production site at http://www.jumpsquares.net and shrink the width, it works as it should. However, when I'm running in development it looks messed up as seen here:
the only code that was changes in the github link was removing some leftover bootstrap stuff and changing the home screen banner.
Here is the code that should be applied
<div class="page-header">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<%=link_to image_tag("twitter-avatars/johnnie1.png"), "https://twitter.com/JohnnieITatDell" %>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
#JohnnieITatDell: "JumpSquares is freakishly brilliant."
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<%=link_to image_tag("twitter-avatars/herseyc.png"), "https://twitter.com/herseyc" %>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
#herseyc: "Fantastic home lab bookmark tool" (<font color="#18bc9c">blog post</font>)
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<%=link_to image_tag("twitter-avatars/vnelson.png"), "https://twitter.com/vNelsonTX" %>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
#vNelsonTX: "Really digging JumpSquares, great job!"
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<%=link_to image_tag("twitter-avatars/h0bbel.png"), "https://twitter.com/h0bbel" %>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
#h0bbel: "We discussed JumpSquares on <font color="#18bc9c">vSoup</font> today. I think you should listen to it" (31:30)
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<%=link_to image_tag("twitter-avatars/mdent.png"), "https://twitter.com/mikedent13" %>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
#mikedent13: "You’ve changed the way I manage my bookmarks with JumpSquares. Just flat out awesome!"
</div>
</div>
</div>
</div>
I was able to fix this by adding an additional row to each of the wells
<div class="page-header">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<%=link_to image_tag("twitter-avatars/johnnie1.png"), "https://twitter.com/JohnnieITatDell" %>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
#JohnnieITatDell: "JumpSquares is freakishly brilliant."
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<%=link_to image_tag("twitter-avatars/herseyc.png"), "https://twitter.com/herseyc" %>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
#herseyc: "Fantastic home lab bookmark tool" (<font color="#18bc9c">blog post</font>)
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<%=link_to image_tag("twitter-avatars/vnelson.png"), "https://twitter.com/vNelsonTX" %>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
#vNelsonTX: "Really digging JumpSquares, great job!"
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<%=link_to image_tag("twitter-avatars/h0bbel.png"), "https://twitter.com/h0bbel" %>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
#h0bbel: "We discussed JumpSquares on <font color="#18bc9c">vSoup</font> today. I think you should listen to it" (31:30)
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<%=link_to image_tag("twitter-avatars/mdent.png"), "https://twitter.com/mikedent13" %>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
#mikedent13: "You’ve changed the way I manage my bookmarks with JumpSquares. Just flat out awesome!"
</div>
</div>
</div>
</div>
</div>