BootStrap Grid Size Classes

GRID SIZE CLASSES

Structure of Bootstrap classes for sizing grid content

• col
• Short for column
• Required prefix
• size abbreviation
• xs for Extra small
• sm for Small
• md for Medium
• lg for Large
• Number of columns
• Integer to represent the number of columns

EXAMPLES

Let's take a look at a couple of sample Bootstrap content sizing classes:

• col-md-4 would indicate 4 columns for medium and large screens
• col-sm-6 would indicate 6 columns for small, medium and large screens
• col-xs-2 would indicate 2 columns for extra small, medium and large screens

Remember that screen size rules apply for the specified screen size as well as those larger than that size, unless overriden. So the following combination would indicate 2 columns for extra small screens, 6 columns for small screens, and 4 for medium and large screens.

<div class='col-xs-2 col-sm-6 col-md-4'>Content</div>