Bootstrap's grid columns number per row

Question

Bootstrap comes with a 12 columns grid system that must be placed within rows.

My question is, does the column number / row must be 12 (or less), or can I have a layout like the following

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

My understanding was that columns number within a row mustn't exceed 12, so based on my previous snippet, I would have made something like this

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

Is there anything I missed ?

Answer 1

If you are using Bootstrap 4, you create a custom 10 columns grid easily, using their SASS mixins for the grid.

$grid-columns: 10;   // This is where you define the number of columns you need/want

@if $enable-grid-classes {
  .row-odd-col {
    @include make-row();
    > {
        @if $enable-grid-classes {
            @include make-grid-columns();
        }
    }
  }
}

You can then use them like this-

<div class="row-odd-col">
    <div class="col-md-5 col-lg-2">1</div>
    <div class="col-md-5 col-lg-2">2</div>
    <div class="col-md-5 col-lg-2">3</div>
    <div class="col-md-5 col-lg-2">4</div>
    <div class="col-md-5 col-lg-2">5</div>
</div>

For more details, check here - https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins

Answer 2

For making a responsive design of a website, first learn bootstrap or css grid layouts. It is also a good approach for making a responsive design. With bootstrap firstly learn grid system and learn the. Max an min widths for different devices and then set no. Of columns for each device and also set @media (min-widtth: px) and (max-width: px) {}

And set individuals property for each device like phones, tablets, laptop and desktops for perfect fit.

Answer 3

However.... if you decide to use their (Bootstrap's ) less fies, then you can set the @grid-columns to any value, not just 12. http://getbootstrap.com/customize/#grid-system

Answer 4

Bootstrap allows you to "stack columns", the following is taken from their docs:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Also from their docs:

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Here, the col-xs values add up to 24, with a clearfix adding the required break

Answer 5

Patrick answer is correct but wanted to go into more detail since I was confused after reading documentation.

Depending on what you're going for having more than 12 columns without doing specific divs for multiple rows can make sense.

• 12 columns is as much as you can fit on 1 row.
• More than 12 columns will cause multiple rows.
• By default when you go down to the XS size it acts like col-xs-12. This is where you see it stacking the columns. You can change this behavior if you add a col-xs-n

More detailed jsfiddle Example

<div class="container-fluid">
    <div class="row">
       <div class="col-sm-12 col-md-2">
           Navigation
       </div>
       <div class="col-sm-6 col-md-5">
           Editor
       </div>
       <div class="col-sm-6 col-md-5">
           Display
       </div>
    </div>
</div>

In this example when viewing at medium size you see first column take up 2 columns and then the other two divs split the remaining columns. When you shrink it down to small the first div will then be a whole new row and the remaining divs will split 50/50. Then when you shrink down further to xs it will still do default behavior and stack columns evenly.

It makes sense to use this approach when you want all columns on one row in one resolution but want multiple rows in a different resolution. If you always want two rows then it would make more sense to make separate divs for each row.

Answer 6

Yes and no...

See example fiddle

You can have a layout like the one you specify, however it wont necessarily work per Bootstraps intended functionality, and as such its usually a good idea to follow their recommended row structure.

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Instead of

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

You should do, e.g:

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

Within a row, the sum of the numbers following the hyphen in each column definition should add up to 12.