Thursday, April 23, 2015

BootStrap 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


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>

No comments: