Bootstrap Grid System implicit behavior

Question

I am a bootstrap grid system newbie and so far, figured out that you can define a row to have columns that span a width such that their sum is 12 for that category (lg, sm or md). In the following division, the second does not specify width for 'lg' category. However, in the browser it shows up as spanning 3 columns out of 12.

What's the rule here?

<div class="row">

    <div class="col-sm-9 col-lg-6 text-danger">

        I am the main content.

    </div>

    <div class="col-sm-3 text-warning">

        I am the main sidebar.

    </div>

    <div class="col-lg-3 visible-lg text-success">

        I am the secondary sidebar that only shows up on LARGE devices.

    </div>

</div>

This is not correct. There's lots of tutorials out there on the Bootstrap grid system. I would learn basic css first before starting with a framework. — Christina
Hi Christina, my question is about grid class tags which bootstrap defines. css knowledge won't help here. I got confused with this while reading a tutorial on grid system. — Malik
tutorialrepublic.com/twitter-bootstrap-tutorial/… the widths of all the columns are the same, every column is 100/12 but col-sm-X covers 768px min-width until the next min-width:992px until the next one 1200px. SO if you have col-sm-6, on that size viewport and up it will be 50%, unless you put both col-sm-6 and col-md-4, then you will get 50% and then 33.3333%. — Christina
So essentially you have 15 columns. You can only have 12 total per column class. — Christina
jsbin.com/cicux/1 - large viewport then size down. Look at code. And CSS will help you a lot because this is all done with CSS and just basic knowledge will save tons of time and frustration. I see many questions per day that would never be asked if the person had not started with a framework and just learned CSS first (fluid and responsive mobile first css). — Christina

Zim Zim · Accepted Answer · 2016-05-23T15:06:25

Reviving an old question here.. but, it's ok to exceed 12 units in a single row. It simply causes the columns to wrap, and it's in the Bootstrap docs.

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

When to use Bootstrap's row class

Bootstrap Grid System implicit behavior

1 Answers