2

I have simple div with row class having child div with col-md-3 class.

<div class="row">
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
</div>

I am getting for divs in first row, but my second row has space and then the remaining divs.

DIV1        DIV2         DIV3        DIV4
            DIV5         DIV6        DIV7

I am guessing the issue to be with "DIV4", but not able to get the cause and fix for it.

blazehub
  • 1,609
  • 12
  • 24
  • 1
    I'm guessing the content in div 1 is longer/taller than the content in div 2? If that's the case, div 5 is just floating in the next available space. the solutions posted so far to add more rows to wrap your columns will only help if you always have the same amount of divs/rows. – ryantdecker Mar 12 '17 at 17:21
  • I suspect this is due to the varying height issue as mentioned by ryan. If it's not please post the code to recreate the issue you're seeing and I can re-open if the dup doesn't solve the problem. – Zim Mar 13 '17 at 04:31
  • Here's [another duplicate question that may help](http://stackoverflow.com/a/22311212/171456). – Zim Mar 13 '17 at 13:23

2 Answers2

0

Avinash !!

Every row in bootstrap can have columns of size "12" so in your case columns size is 18 thats why, so after three divs size (12) is filled and its making space.

create two rows and put 3-3 divs in them.

<div class="row">
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
 </div>

<div class="row">
  <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
    </div>
  </div>
</div>

It will work :)

Pang
  • 8,605
  • 144
  • 77
  • 113
nikhil kumar
  • 71
  • 2
  • 4
  • This is not correct. There is nothing wrong with using more than 12 units in a single `.row`. – Zim Mar 12 '17 at 20:35
  • @ZimSystem The Bootstrap documentation disagress with you: "Column classes indicate the number of columns you’d like to use out of the possible 12 per row" - https://v4-alpha.getbootstrap.com/layout/grid/#grid-options – ProfK Mar 25 '17 at 13:07
  • @ProfK that's a visual row across the viewport, *not* to be mistaken for allowed `.col-*-*` inside a `.row`. More than 12 in a `.row` is known as [column wrapping](http://getbootstrap.com/css/#grid-example-wrapping). If you want to understand more, [read this documentation on SO](http://stackoverflow.com/documentation/twitter-bootstrap/6124/using-clearfix-in-rows-and-cols/28651/why-would-bootstrap-columns-exceed-12-in-a-row#t=201703261901243357713). Also, your link is referencing the Bootstrap v4 docs which has a different flexbox based grid than Bootstrap v3 to which this question pertains. – Zim Mar 26 '17 at 19:04
  • 1
    Thanks, @ZimSystem, fairly newish to bootstrap and was battling with columns yesterday. I stand corrected. – ProfK Mar 27 '17 at 02:28
0

Note: Bootstrap 4 doesn't seem to have this issue, as it uses flexbox rather than floats for the grid columns. For Bootstrap 3 or earlier, this is a limitation of floats.

If all your items are identical height, this isn't an issue, but if you have dynamic content AND a dynamic number of items, you've got a fight on your hands.

As some of the other answers have already suggested, you could add more elements to your markup. However, if you are using bootstrap along with a template where there's an unknown number of items (col--) being added to the row, it will usually take some sort of scripting to wrap the right number of items in each row. Also, for example if you have items that are 4 across (col-md-3) on large screens, but 3 across (col-md-4) on small screens, you'll end up with every 4th item on it's own row on small screens.

Thanks to CSS3, there are some ways to fix this alignment problem without scripting when your items are consitently using the same set of grid classes. If you add the class multi-row-helper to your bootstrap row, the CSS below will clear the float on the first item of each new line of items, keeping them from being affected by the irregular size of the items above.

/** EDIT: Updated the breakpoint to bootstrap defaults - I inadvertently had put in some custom ones...Replace the px values with the values of your breakpoints!! **/

.multi-row-helper div[class~="col-xs-2"]:nth-child(6n+1),
.multi-row-helper div[class~="col-xs-3"]:nth-child(4n+1),
.multi-row-helper div[class~="col-xs-4"]:nth-child(3n+1),
.multi-row-helper div[class~="col-xs-6"]:nth-child(2n+1) {
  clear: left;
}

@media (min-width: 768px) {
  .multi-row-helper.row > div[class*="col-xs-"] {
    clear: none;
  }
  .multi-row-helper div[class~="col-sm-2"]:nth-child(6n+1),
  .multi-row-helper div[class~="col-sm-3"]:nth-child(4n+1),
  .multi-row-helper div[class~="col-sm-4"]:nth-child(3n+1),
  .multi-row-helper div[class~="col-sm-6"]:nth-child(2n+1) {
    clear: left;
  }
}
@media (min-width: 992px) {
  .multi-row-helper.row > div[class*="col-sm-"] {
    clear: none;
  }
  .multi-row-helper div[class~="col-md-2"]:nth-child(6n+1),
  .multi-row-helper div[class~="col-md-3"]:nth-child(4n+1),
  .multi-row-helper div[class~="col-md-4"]:nth-child(3n+1),
  .multi-row-helper div[class~="col-md-6"]:nth-child(2n+1) {
    clear: left;
  }
}

Not the simplest solution, but if you use a lot of repeating grids, such as for an e-commerce product grid, on your site, it's often well worth a few extra lines of CSS to solve this issue.

For what it's worth, it's a little prettier using SCSS:

.multi-row-helper {
  div[class~="col-xs-2"]:nth-child(6n+1),
  div[class~="col-xs-3"]:nth-child(4n+1),
  div[class~="col-xs-4"]:nth-child(3n+1),
  div[class~="col-xs-6"]:nth-child(2n+1)
    {clear:left;}


  @media (min-width:768px) {
    &.row > div[class*="col-xs-"]
      {clear:none;}
    div[class~="col-sm-2"]:nth-child(6n+1),
    div[class~="col-sm-3"]:nth-child(4n+1),
    div[class~="col-sm-4"]:nth-child(3n+1),
    div[class~="col-sm-6"]:nth-child(2n+1)
      {clear:left;}
  }

  @media (min-width:992px) {
    &.row > div[class*="col-sm-"]
      {clear:none;}
    div[class~="col-md-2"]:nth-child(6n+1),
    div[class~="col-md-3"]:nth-child(4n+1),
    div[class~="col-md-4"]:nth-child(3n+1),
    div[class~="col-md-6"]:nth-child(2n+1)
      {clear:left;}
  }
}
ryantdecker
  • 1,610
  • 10
  • 13