The Absolute Beginners Guide to Bootstrap 3

Tuesday July 15, 2014 Tagged with: , ,

There are a plethora of quality, front-end frameworks out in the wild. One name that remains associated with quality and community support is Bootstrap by Mark Otto and Jacob Thornton.

First appearing in August 2011, Bootstrap has since exploded in popularity, gaining particular ground with the third release which offers a responsive, mobile-first framework out of the box.

Let’s jump in and see how Bootstrap works and how you can use it in your next project.

The Grid System

Bootstrap provides designers and developers with tools that can construct a responsive, “mobile first” website. These tools come in the form of special, predefined CSS classes. When these classes are applied to the structural elements on your web page your content will obey and react to the varying screen sizes of today’s many devices.

Effectively, these classes break your website down into a grid, a grid comprising of rows and columns. When you correctly apply the grid system, Bootstrap can recognise these elements and reshuffle them accordingly. Let’s break it down and look at an example.

Have a glance at the screenshot below and the code below it. The code is what lies within the <body> element of a simple Bootstrap enabled document, when viewed in a web browser it displays the web page pictured. The webpage is responsive, you will notice that the individual sections of text stack into a single column when the browser window width is reduced. A more accurate description is that those individual sections of text are branching out into multiple columns in the event that suitable screen space is detected. Bootstrap is a mobile-first framework so the single-column/mobile view is the initial, primary view.

bootstrap-demo-page

A simple, Bootstrap enabled webpage


<div class="container">
   <div class="row">
      <div class="col-md-7">
         <h2>H2 Title</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
      </div>
      <div class="col-md-5">
         <h2>H2 Title</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
      </div>
   </div>
   <div class="row">
      <div class="col-md-4">
         <h2>H2 Title</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
      </div>
      <div class="col-md-4">
         <h2>H2 Title</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
      </div>
      <div class="col-md-4">
         <h2>H2 Title</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
      </div>
   </div>
</div>

Looking down the code we begin with a div that wraps around the entire responsive content, the div is given the appropriate class name of container. Your rows must be placed with a container div to function correctly.

Next we come to the first of two rows, rows consist of ordinary div elements with a class name of row, they contain groups of columns (col).

Our first row contains two columns. (Here is where the class names get a little interesting and the real power of Bootstrap shines through) The first column has a class of col-md-7, the second column has a class of col-md-5, what does this mean?

Bootstrap is what they call a 12 column grid system, this means that columns which populate your rows should add up to 12 in a single horizontal group (a row can contain more than one horizontal group but we’ll get to that later!). A div element with a class of col-md-7 is 7 columns wide, a div element with a class of col-md-5 is 5 columns wide, together they create a complete row of 12 columns comprising of a 7 column element and a 5 column element.

Let’s look at the second row, here we see three equal columns and each has a class of col-md-4, again that adds up to 12 so our columns will appear cleanly in one row.

So what does the md mean in our column class names? md stands for medium device, what we are communicating to our column div elements is that when the available screen space is equal to or greater than a “medium device” (992px and up) amend the widths of these elements to match the column number in the md class name.
Let’s see how this works in our example document, our first row of the example contains columns with classes col-md-7 and col-md-5 respectively. At the default state of the document, these two columns will stretch the full 12 column width, stacking one on top the other (because Bootstrap is a mobile-first framework). As the available screen space increases the columns will stretch their widths but remain the full 12 columns, again keeping stacked one on top the other. When the available screen width is wide enough to qualify as a medium device i.e. has a screen space of 992px or greater, the column’s md class names kick in and apply their column numbers to the elements they’re attached to, the columns jump from two 12 column elements to a 7 and a 5 column element appearing in a single row.
A lot of power is bestowed upon these tiny class names.

The image below visually represents the relationship between the columns, rows and container.

Our demo documented with class names and boundaries highlighted

Our demo documented with class names and boundaries highlighted

A Class of Their Own

So currently we have a page that by default displays the content in a mobile-esque single column, because Bootstrap is a mobile first framework and logically prioritises the smallest screen first.
When we increase the available screen size to a desktop friendly 992px or more, our md classes activate and apply their magic to the layout, this is often referred to as a breakpoint.

Let’s welcome the other breakpoints which bootstrap supports out the box:

.col-xs– applied by default, when screen space is less than 768px (mobile phones).
.col-sm- applied when available screen space equals 768px or more (think tablets).
.col-md- applied when available screen space equals 992px or more (general desktops).
.col-lg- applied when available screen space equals 1200px or more (large desktops).

If we want a div element to be 6 columns wide at the medium device breakpoint, we would give it a class of col-md-6. If we also wanted that same div element to be 10 columns wide at the large device breakpoint we would add a class of col-lg-10. The div would look like this:

<div class="col-md-6 col-lg-10">

Using this method you can instruct your div elements to behave differently across all four major breakpoints:

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-6">

The real beauty is seen in how Bootstrap handles content that spills over 12 columns. Take a look at the code snippet below:

<div class="container">
   <div class="row">
      <div class="col-xs-6 col-md-4 col-lg-2">
         <h1>Header</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
      </div>
      <div class="col-xs-6 col-md-4 col-lg-2">
         <h1>Header</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
      </div>
      <div class="col-xs-6 col-md-4 col-lg-2">
         <h1>Header</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
      </div>
      <div class="col-xs-6 col-md-4 col-lg-2">
         <h1>Header</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
      </div>
      <div class="col-xs-6 col-md-4 col-lg-2">
         <h1>Header</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
      </div>
      <div class="col-xs-6 col-md-4 col-lg-2">
         <h1>Header</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
      </div>
   </div>
</div>

Earlier in this article we mentioned that Bootstrap is a 12 column grid system, which means it likes to arrange columns into groups which add up to 12 columns. The code above employs 6 div elements each with the same class of col-xs-6 col-md-4 col-lg-2. We know that the xs (mobile phone) breakpoint is the default (screens with less than 768px width) but together all these xs columns have a total width of 36 columns. Have we made a mistake?

Nope, this is all part of the Bootstrap magic. Bootstrap will simply arrange our div elements in a logical fashion, stacking our columns into horizontal groups which together equal a combined width of 12 columns. In the case of our example, bootstrap will arrange the six div elements into three groups of two columns stacked on top of each other. Look at the image below to see how the code looks on varying screen sizes.

Our demo code works perfectly on multiple screen sizes because Bootstrap can cleanly stack the columns into multiples of 12

Our demo code works perfectly on multiple screen sizes because Bootstrap can cleanly stack the columns into multiples of 12

There can be some confusion when discussing rows in code class name terms and rows in visual terms. What may appear to be a series of rows in mobile view may actually fall under a single element with a row class in the code. When the document above is viewed on a mobile phone, the div element with the class of row appears to contain 3 rows of 2 columns but technically it is all contained within a single row in code terms. You will get the hang of it when you get your feet wet, speaking of which…

Getting Your Feet Wet

Let’s get Bootstrap setup so you can start developing your own responsive layouts

Head over to getbootstrap.com and download Bootstrap. You may find there are three flavours of Bootstrap, in this tutorial we are only focusing on the plain “Bootstrap” version, not the Sass or source code editions.

Extract the contents of the archive file into a folder, the archive contains three folders labelled css, fonts and js. Next, add an empty index.html file into your root folder then finish your basic setup by adding an empty images folder.
Your Bootstrap setup should look something like the image below:

A minimal Bootstrap setup

A minimal Bootstrap setup

The Bootstrap creators have provided us with a head start in the form of a Basic Template, the template includes all the correct links to mandatory JavaScript and CSS files, it also provides links to the popular html5shiv.min.js and Respond.js which provide ie8 support to your design.

Copy the Basic Template code from getbootstrap.com/getting-started/#template and paste it into your empty index.html file

Save the file and view it in your favourite browser. You should be greeted with a rather plain “Hello, world!” however, behind the scenes the stage is set and your Bootstrap framework is ready to direct, have fun!

Your Bootstrap adventure has begun. There are too many amazing features and extras to discuss in this initial article, I’m sure you’ll quickly find your feet with this framework and take your web designs to new responsive horizons.

Copyright © 2014 Cirtinion | About