Create Bootstrap Grid Layouts Quick and Easy

large buildings

There are many framework’s out there to choose from, but my favorite by far is Bootstrap grid. Bootstrap provides a quick and easy way to create responsive website layouts. Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Bootstrap 3 includes predefined classes used for the grid for quickly making layouts for different types of devices like mobile phones, tablets, notebooks and desktops views.

Here are a few examples of what classes are used in different situations.

  • .col-xs-* ( extra small devices like cell phones )
  • .col-sm-* ( small screen devices like tablets )
  • .col-md-* ( class for medium size devices like desktops )
  • .col-lg-* ( for large desktop screens )

View the examples below in Codepen on different browser widths and see how they respond to the sizing. How the div’s stack and align on different size devices will depend on what classes you add to the div’s.

To view a lightweight Bootstrap grid only, click here.

See the Pen Responsive Bootstrap Columns and Rows by Christopher Cook (@cccamuseme) on CodePen.