Bootstrap 3 for the win in responsive design

Screenshot 2014-05-19 07.51.57Have you ever downloaded a WordPress or other CMS template and hit your head against the wall trying to figure out how the styles are setup so that you can format your content? Have you ever built a template from scratch or a website and thought that there has to be some standard by which web formatting and styles should adhere. Bootstrap is about to be your best friend.

Bootstrap┬áis a rapid responsive design development library consisting of mostly standard stylesheet elements. Bootstrap consists of a 12 column grid with standard css names that you can apply to divs. Have you ever tried to make a HTML table work just the way you want it to and nest them? It’s really painful. Bootstrap solves that with these styles.

Bootstrap Grid

The code to produce the above grid is as follows:

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

As you can see, this is not complex if you follow the row and column nomenclature.

Bootstrap elements are designed to stack as you resize your browser or as the resolution of the device changes. You can see how beneficial this is if you want the elements above to be viewable on a mobile device.

My Cardinal Rules

Like they used to say about American Express… don’t leave home without it. Well, here are my rules with responsive design.

  • Always looks for Bootstrap templates or structures before you start from scratch. Preferably look for BootStrap3.
  • If you are using a CMS, picking a Bootstrap-based template can not only save you time, but save you vast amounts of hair pulling when working with your post content.
  • Look for existing styles that do what you want in BootStrap. If you need to override them, do so in your CSS after Bootstrap’s is imported.
  • Don’t reinvent the wheel… see rule #1
  • Think mobile first before you look at supporting the desktop versions
  • When in doubt about an element… wrap it in a div. You’ll be able to deal with it better later.

Using Bootstrap is probably the biggest time saving move you can make in preparing your web application or mobile website for the real world. I’ve barely scratched the surface of what the framework can do as well. You can even import the files for Bootstrap via a CDN or import them into your project using Bower.