Column Classes & Spanning in Bootstrap 3 with Example

Column Classes & Spanning in Bootstrap 3 with Example
Rating: 5 - 1 Votes

Column Classes & Spanning in Bootstrap 3 with Example

bootstrapTo create a container, we make use of container class for fix-width and container-fluid for fluid-width or fluid layout.  To create a row, we make use of row class.  But in terms of column, we have 4 column classes in Bootstrap for different screen sizes.

  • col-xs:  XS stands for extra small displays where screen width is less than 768px.
  • col-sm:  SM stands for smaller displays where screen width is greater than or equal to 768px.
  • col-md:  MD stands for medium displays where screen width is greater than or equal to 992px.
  • col-lg:  LG stands for larger displays where screen width is greater than or equal to 1200px.

To span a column in Grid system, you only need to add a number at the end of the column class and that number will specify how many columns you want to span.  As you know, we have max 12 columns in a Grid, so that number should be between 1 and 12.  An example is given below where we are spanning col-xs up to 6 columns in container class and container-fluid class.