Quickly Create a Mobile-Friendly Website Using Bootstrap Framework

Configure Bootstrap in 10 Minutes

So you’re looking to create a mobile-friendly, responsive website and have decided on Bootstrap as your framework? Good move. Bootstrap is one of the simplest ways to have built-in, responsive design right out of the box. We are going to run through the steps to get a barebones Bootstrap page up and running in about 10 minutes.

Create a blank directory to house your new project, I called mine “bootstrap-test”. In your new directory, use your favorite text editor to create an HTML page containing the minimum elements necessary and save this page as “index.html”. Let’s add a “Hello, World” message while we’re at it:

Let’s open our index page in a browser to see how it looks on its own:

Next we need to download the actual source code for the Bootstrap framework. This is available at http://getbootstrap.com/getting-started/#download. If you are in the mood to use the Less or Sass versions, feel free; but for our purposes we are going to download the minified versions of the source documents. A zip folder containing all the necessary files will be saved. Open it up, then copy and paste the entire contents into your project directory; it should now look like this:

Now we need to add a few lines to our HTML document to initiate the Bootstrap framework. The highlighted lines below will include the necessary CSS and JavaScript files into your page:

You can copy the full contents of the index.html file below:

<!DOCTYPE html>

<html lang="en">

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap Test</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<h1>Hello, world!</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

And that is pretty much it. Congratulations, you’re page is now equipped with Bootstrap and is fully responsive. To illustrate this, let’s reload our page in the browser and see how it looks now:

It’s not much, but you can see that the font has changed; that’s because we included, and are now using, the default Bootstrap CSS files.

Bootstrap’s responsive design is best harnessed by making use of the built in grid layout. There are a few points to consider when setting up your grid:

Rows (class .row) are used to create horizontal groups
All rows must be placed within an element of either .container (a fixed-width element) or .container-fluid (full-width)
A grid row consists of 12 columns, that can be grouped together/spanned, and are placed within a row
There are four different column classes that will be applied based on the screen width:
- .col-xs- (extra small, screen < 768px)
- .col-small- (small, screen >= 768px)
- .col-md- (medium, screen >= 992px)
- .col-lg- (large, screen >= 1200px)
Column classes flow upwards, and are applied to each screen width until another class is explicitly applied. So for example a class of .col-sm- will be applied to not only all small screen widths, but medium and large as well
After a column class, a number (from 1-12) is appended to dictate how many of the 12 available columns are spanned

So to recap, a grid layout is built as follows: container > row > columns. For a closer look at column classes let’s check out an example.

As we saw before, there are 12 available columns; but these can be divvied up and spanned in any combination that adds up to 12 (any combination over 12 will result in overflow kicking down to a new row). So if you want a single column that spans the whole screen on all devices, the code would be:

<div class="container-fluid">

<div class="row">

<div class="col-xs-12" style="background-color: red;" >column 1</div>

</div>

We only need to use the col-xs- class because it will flow upwards and be applied to all larger screen sizes. Let’s check it out in the browser, I’ve added a background color so that we can better see the column boundaries in a browser.

Now, if we wanted two equally sized columns on all devices we would add a second <div>, and tell each one to span 6 columns (.col-xs-6):

<div class="container-fluid">

<div class="row">

<div class="col-xs-6" style="background-color: red;">column 1</div>

<div class="col-xs-6" style="background-color: blue;">column 2</div>

</div>

Now what if we wanted two equally sized columns for all devices other than the smallest screen width, but we want the columns to use the full screen width when displayed on a phone? We can keep our current layout and just have to slightly tweak the classes to ensure this behavior. To take care of the full width columns we will use the col-xs-12 class on each <div>, then to ensure that the columns become equal width when the available screen size is > 768px we need to add a second class of col-sm-6. Remember, the column classes flow upwards, so that class declaration will take care of the small screen resolution AND everything above it.

<div class="container-fluid">

<div class="row">

<div class="col-xs-12 col-sm-6" style="background-color: red;">column 1</div>

<div class="col-xs-12 col-sm-6" style="background-color: blue;">column 2</div>

</div>

If you refresh your browser you’ll see that the grid layout at full width remains the same; however, if you shrink the browser down you’ll notice that the columns stack on top of each other once the resolution gets smaller than 768px.

For one more example of how to use the column classes, let’s see how we would implement the grid system if we wanted a different layout for every screen resolution/device size. For this example we’ll add two more <div> elements (to have four total) and we’ll need a different class for each screen size applied to every <div>. Our desired layouts will be as follows:

Extra Small: Four columns, each taking up the entire screen width

To accomplish this we tell each <div> to span all 12 columns, and we’re using the col-xs- class, so our desired class will be col-xs-12

Small: Four equal-width columns

If we have four <div> elements that should be of equal width, we’ll want them to span the 12 columns equally and so we simply append 3 to the class giving us col-sm-3

Medium: Two equal-width columns in the middle, with two smaller, equal width columns on each end

We’ll have the outer <div> elements span two columns each, with a class of col-md-2; meaning we have 8 (12-[2*2]) columns left to divide up amongst the inner columns, so each one gets a class of col-md-4. The <div> elements will flow left to right so the classes should be applied as:

col-md-2

col-md-4

col-md-2

Large: Three minimum-sized columns, with one large column spanning the rest of the screen

Finally we’ll have each of the first three <div> elements span one column each, and give the remaining nine columns to the last <div>; meaning our classes are:

col-lg-1

col-lg-9

The source code for our grid layout should now look like this:

<div class="container-fluid">

   <div class="row">

      <div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" style="background-color:red;">column 1</div>

      <div class="col-xs-12 col-sm-3 col-md-4 col-lg-1" style="background-color:blue;">column 2</div>

      <div class="col-xs-12 col-sm-3 col-md-4 col-lg-1" style="background-color:green;">column 3</div>

      <div class="col-xs-12 col-sm-3 col-md-2 col-lg-9" style="background-color:yellow;">column 4</div>

   </div>

</div>

And the browser (being resized from extra small to large) will display: