Understanding the grid classes col-sm- and col-lg- in Bootstrap 3

Question

I m getting started on Bootstrap 3 and I m having some trouble understanding how the grid classes are meant to be used   Here s what I ve figured out so far    It appears that the classes col-sm-  and col-lg-  differ from plain old col-  in that they will only apply when screens are above a certain size  768px and 992px respectively   If you omit the -sm- or -lg- the divs will never collapse into one column   However  when I create two divs inside a row that are both col-sm-6 it seems they are only side by side when the window is between 768px and 992px wide  In other words  if I shrink the window all the way down and then slowly widen it  the layout is single column  then two columns  then back to single column again    Is this the intended behavior  If I want two columns for anything over 768px  should I apply both classes    lt div class  col-sm-6 col-lg-6  gt   Should col-6 also be included   lt div class  col-6 col-sm-6 col-lg-6  gt

User · Answer

The best way to understand is to simply think from top to bottom ( Large Desktops to Mobile Phones)

Firstly, as B3 is mobile first so if you use xs then the columns will be same from Large desktops to xs ( i recommend using xs or sm as this will keep everything the way you want on every screen size )

Secondly if you want to give different width to columns on different devices or resolutions, than you can add multiple classes e.g

the above will change the width according to the screen resolutions, REMEMBER i am keeping the total columns in each class = 12

I hope my answer would help!

User · Answer

Here you have a very good tutorial  that explains  how to use the new grid classes in Bootstrap 3   It also covers mixins etc

User · Answer

This might be late as I think most of us are using BS4  This article explained all the questions you asked in a detailed and simple manner also includes what to do when  The detailed guide to use bs4 or bootstrap   https   uxplanet org how-the-bootstrap-4-grid-works-a1b04703a3b7

User · Answer

If I want two columns for anything over 768px  should I apply both classes     This should be as simple as     lt div class  row  gt         lt div class  col-sm-6  gt  lt  div gt         lt div class  col-sm-6  gt  lt  div gt       lt  div gt    No need to add the col-lg-6 too   Demo  http   www bootply com 73119

User · Answer

To amend SDP s answer above  you do NOT need to declarecol-xs-12 in  lt div class  col-xs-12 col-sm-6  gt   Bootstrap 3 is mobile-first  so every div column is assumed to be a 100  width div by default - which means at the  xs  size it is 100  width  it will always default to that behavior regardless of what you set at sm  md  lg  If you want your xs columns to be not 100   then you normally do a col-xs- 1-11

User · Answer

UPDATE BELOW   I took another look at the docs and it appears I overlooked a section which talks specifically about this   The answers to my questions    Yes  they are meant to apply only to specific ranges  rather than everything above a certain width  Yes  the classes are meant to be combined  It appears that this is appropriate in certain cases but not others because the col-  classes are basically equivalent to col-xsm-  or  widths above 0px  all widths      Other than reading the docs too quickly  I think I was confused because I came into Bootstrap 3 with a  Bootstrap 2 mentality   Specifically  I was using the  optional  responsive styles  bootstrap-responsive css  in v2 and v3 is quite different  for the better IMO    UPDATE for stable release   This question was originally written when RC1 was out  They made some major changes in RC2 so for anyone reading this now  not everything mentioned above still applies   As of when I m currently writing this  the col- -  classes DO seem to apply upwards  So for example  if you want an element to be 12 columns  full width  for phones  but two 6 columns  half page  for tablets and up  you would do something like this    lt div class  col-xs-12 col-sm-6  gt        NO NEED FOR col-md-6 or col-lg-6    They also added an additional xs break point after this question was written

[html] Understanding the grid classes ( col-sm-# and col-lg-# ) in Bootstrap 3

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3