Category: Bootstrap

Create Bootstrap Grid Layouts Quick and Easy

Posted on by Chris Cook

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.

How To Reorder Bootstrap Columns

Posted on by Chris Cook

Bootstrap is a powerful tool for developing responsive templates because of the easy to use grid system. But one feature of the grid that I have not seen explained very well is how to reorder columns based on the breakpoints. The doc’s only explain it in minimal form and don’t explain it in simple terms.

This is how they show it in the bootstrap documentation.


<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

So the most important thing to remember about Bootstrap is that it is built with Mobile First in mind. This is the key thing that many struggle with and have a hard time understanding some features.

So What Is Column Reordering?

Column reordering is changing the order of columns based on the size of the browser or viewport. I will be showing you how to reorder columns based on mobile view to desktop view.

The first thing we want to do is create our page markup for mobile first view like this:


<div class="row">
  <div class="col-md-9"></div>
  <div class="col-md-3"></div>
</div><!-- end row -->

On mobile view, it will show the 9 width column first (top) and the 3 width second (below). On desktop view, it will give us two columns side-by-side, one 9 width column that will be on the left and one 3 width column on the right that will look like this.

9-3-grid

Now we will added some classes so that the 9 and 3 column will swap places when viewed on a desktop or larger viewport.


<div class="row">
  <div class="col-md-9 col-md-push-3"></div>
  <div class="col-md-3 col-md-pull-9"></div>
</div><!-- end row -->

Now as you can see, in the class we are declaring the column size and then telling the column how many rows to push or pull. Since the grid is based in 12 columns we would only need to push-3 for the 9 and pull-9 for the 3. You can use this to reorder divs at different breakpoints and can be used with more than just two columns as well.

Happy Coding!