Meaning of numbers in col-md-4 col-xs-1 col-lg-2 in Bootstrap

Question

I am confused with the grid system in the new Bootstrap  particularly these classes   col-lg-  col-md-  col-xs-     where   represents some number    Can anyone please explain the following    How that number is aligning the grids  How to use these numbers  What they actually represent

User · Answer

The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.

OK, the answer is easy, but read on:

col-lg- stands for column large = 1200px
col-md- stands for column medium = 992px
col-xs- stands for column extra small = 768px

The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...

I also created the image below to show how the grid system works, in this examples I use them with 3, like col-lg-6 to show you how the grid system work in the page, look at how lg, md and xs are responsive to the window size:

User · Answer

Here you go  col-lg-2       if the screen is large  lg  then this component will take space of 2  elements considering entire row can fit 12 elements   so you will see that on large screen this component takes 16  space of a row   col-lg-6       if the screen is large  lg  then this component will take space of 6  elements considering entire row can fit 12 elements -- when applied you will see that the component has taken half the available space in the row   Above rule is only applied when the screen is large  when the screen is small this rule is discarded and only one component per row is shown   Below image shows various screen size widths

User · Answer

Applies to Bootstrap 3 only   Ignoring the letters  xs  sm  md  lg  for now  I ll start with just the numbers      the numbers  1-12  represent a portion of the total width of any div all divs are divided into 12 columns so  col- -6 spans 6 of 12 columns  half the width   col- -12 spans 12 of 12 columns  the entire width   etc   So  if you want two equal columns to span a div  write   lt div class  col-xs-6  gt Column 1 lt  div gt   lt div class  col-xs-6  gt Column 2 lt  div gt    Or  if you want three unequal columns to span that same width  you could write    lt div class  col-xs-2  gt Column 1 lt  div gt   lt div class  col-xs-6  gt Column 2 lt  div gt   lt div class  col-xs-4  gt Column 3 lt  div gt    You ll notice the   of columns always add up to 12  It can be less than twelve  but beware if more than 12  as your offending divs will bump down to the next row  not  row  which is another story altogether    You can also nest columns within columns   best with a  row wrapper around them  such as    lt div class  col-xs-6  gt     lt div class  row  gt       lt div class  col-xs-4  gt Column 1-a lt  div gt       lt div class  col-xs-8  gt Column 1-b lt  div gt     lt  div gt   lt  div gt   lt div class  col-xs-6  gt     lt div class  row  gt       lt div class  col-xs-2  gt Column 2-a lt  div gt       lt div class  col-xs-10  gt Column 2-b lt  div gt     lt  div gt   lt  div gt    Each set of nested divs also span up to 12 columns of their parent div  NOTE  Since each  col class has 15px padding on either side  you should usually wrap nested columns in a  row  which has -15px margins  This avoids duplicating the padding and keeps the content lined up between nested and non-nested col classes   -- You didn t specifically ask about the xs  sm  md  lg usage  but they go hand-in-hand so I can t help but touch on it      In short  they are used to define at which screen size that class should apply    xs   extra small screens  mobile phones  sm   small screens  tablets  md   medium screens  some desktops  lg   large screens  remaining desktops       Read the  Grid   Options    chapter from the official Bootstrap documentation for more details    You should usually classify a div using multiple column classes so it behaves differently depending on the screen size  this is the heart of what makes bootstrap responsive   eg  a div with classes col-xs-6 and col-sm-4 will span half the screen on the mobile phone  xs  and 1 3 of the screen on tablets sm      lt div class  col-xs-6 col-sm-4  gt Column 1 lt  div gt   lt  -- 1 2 width on mobile  1 3 screen on tablet  -- gt   lt div class  col-xs-6 col-sm-8  gt Column 2 lt  div gt   lt  -- 1 2 width on mobile  2 3 width on tablet -- gt    NOTE  as per comment below  grid classes for a given screen size apply to that screen size and larger unless another declaration overrides it  i e  col-xs-6 col-md-4 spans 6 columns on xs and sm  and 4 columns on md and lg  even though sm and lg were never explicitly declared   NOTE  if you don t define xs  it will default to col-xs-12  i e  col-sm-6 is half the width on sm  md and lg screens  but full-width on xs screens    NOTE  it s actually totally fine if your  row includes more than 12 cols  as long as you are aware of how they will react  --This is a contentious issue  and not everyone agrees

User · Answer

From Twitter Bootstrap documentation    small grid    768px     col-sm-   medium grid    992px     col-md-   large grid    1200px     col-lg-     to Read More

User · Answer

The main point is this   col-lg-  col-md-  col-xs-  col-sm define how many columns will there be in these different screen sizes   Example  if you want there to be two columns in desktop screens and in phone screens you put two col-md-6 and two col-xs-6 classes in your columns   If you want there to be two columns in desktop screens and only one column in phone screens  ie two rows stacked on top of each other  you put two col-md-6 and two col-xs-12 in your columns and because sum will be 24 they will auto stack on top of each other  or just leave xs style out

[css] Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to grid