CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
ch4rlie
ch4rlie

Reputation: 102

Bootstrap Grid with 6 Columns breaks at 4 columns

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.

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

Upvotes: 1

Views: 3627

Answers (2)

Shawn Taylor
Shawn Taylor

Reputation: 15740

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"

Upvotes: 1

tejashsoni111
tejashsoni111

Reputation: 1405

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>

Upvotes: 4

Related Questions