Using Bootstrap for Responsive Sites

Why Bootstrap?

As web developers and designers, we’re always thinking about the next thing. Will it be in the form of glasses? Something wearable on the wrist? We don’t know what’s coming, and that’s why I’ve come to the conclusion that there’s no better way than responsive design, which is a design method for fitting all types of screens.

Before each project, I have to think a few steps ahead.
To create a responsive site we have to use, among others, CSS3 media queries. In the CSS file we have to write again and again to the same elements, with different sizes and locations for each resolution.

This means that I have to do a lot of work on one file, about a days’ worth, including checking it at least 12 different resolutions.

A lot of work, yes, but worth it to achieve a responsive site.

What Bootstrap offers is the ability to quickly design and build responsive web pages, using ready-made templates designed for different elements like sliders and menus. This can save a lot of time and ensure that our project works perfectly.

The Mobile First approach

In recent years we’ve seen the rise of web design in the Mobile First approach. In this Mobile First, we first design and develop the web page for a mobile screen, and then we design the page for a bigger screens.

Bootstrap 3 adopted the Mobile First approach, so we have to take that into consideration when we start the wireframes of the web page.

The grid system

Bootstrap contains fluid grid system architecture. The HTML file contains rows and columns. Each row can scale up to 12 columns. The rows must be placed within a .container div. The content should be placed within columns, and only columns may be children of rows.

Each row in the container will be a div that includes the predefined .row class. Within each row we’ll be able to predefine column div classes like:

col-xs-6, col-sm-7, col-md-3, and col-lg-6

The Media Queries

We’ll use 4 media queries to create breakpoints on the screen width. The names of the breakpoints are simple and associative:

  • Extra small: display width less than 768px (for example, phones).
  • Small: display width more than 768px (for example, tablets).
  • Medium: display width more than 992px (for example, laptops and desktops).
  • Large: wide display width, more than 1200px (for example, PC widescreens).

This can also help us understand the associative naming of the column classes below:

col-xs , col-sm , col-md , and col-lg

When the browser loads an HTML page, the screen size is identified by the viewport (actually, the width size is identified). According to this width, Bootstrap decides which of the 4 units we will use.

For example, if I’m browsing with a widescreen with a higher resolution, the classes that are chosen to load on the CSS will be col-lg (abbreviation of “large”). And if the same page will be loaded from a tablet, the classes that Bootstrap uses will be col-sm.

Practice with a few more examples

  • First, download Bootstrap. We recommend the official Bootstrap page: http://getbootstrap.com/getting-started/

  • Extract the zip file that you just downloaded into a new root directory (let’s name the directory bs3). Now you have a root folder of the project and three Bootstrap subfolders: CSS, js, and fonts.

  • In the bs3 folder, create an empty index.html file. Open the html file with a text editor or any IDE. In the file, write this HTML5 basic template code:

    <!DOCTYPE html> <html lang="he" > <head> <title>My Bootsrap Site</title> <meta charset="UTF-8"> </head> <body> </body> </html>

Just after the <title> tag, add the following <meta> tag, which is responsible for supporting mobile screens:

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

Below the <title> tag, we need to link our HTML to the Bootstrap CSS file. In this example, I chose the minified version of the CSS, for better loading performance.

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

If I want to be sure that my project will also support HTML5 elements and media queries on older browsers like IE8, I’ll add the following lines just below the last line that we added (link to the CSS file):

!--[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> <![endif]-->

Jquery library is necessary for Bootstrap's JavaScript plugins, so before the closing of the </body> tag, we’ll add the script tag that will call the Jquery plugin:

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

If we want to be sure that our project will work amazingly, the last major thing that we need to do is call the Bootstrap plugin file that we just downloaded:

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

This is the basic Bootstrap template that we created:

<!DOCTYPE html> <html lang="he" > <head> <title>My Bootsrap Site</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]--> </head> <body> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

================

Let’s practice on this page



Now that we have an HTML page that includes Bootstrap, I want to target our screen to be medium size (laptops and up), and create one row that is divided by two columns.

The left column will have an 8-unit width, and the right column will have a 4-unit width. It should look something like this:

We need to add a container.
Inside the container we’ll add a row-div, and inside the row we’ll add a 2-column div. The left div will take the class “col-md-8”, and the right div will take the class “col-md-4”. (Together we’ll get the maximum width size of the screen:12).

<div class="container"> <div class="row"> <div class="col-md-8" style="background-color: #535da2; height: 100px;">8 units</div> <div class="col-md-4" style="background-color: #7e83a5; height: 100px;">4 units</div> </div> </div>

See the live result here

You should see now on the browser what’s shown on the figure above.

Great! Now reduce the size of the browser window slowly until you reach the breakpoint of the “small” (under 992px). When you get there, you’ll notice that the right column is placed under the left column, and we have 2 columns with 100% width.

Why did this happen? It happened because we chose our classes (col-md-8, col-md-4) by the “medium” units. And when we crossed the breakpoint of the medium size (992px), by default, one line breaks into two lines with 100% width.

Adjusting this HTML in mobile view

We need to replace the col-md classes with 'col-xs' classes that are adapted to mobile screens.

<div class="col-xs-8" style="background-color: #535da2; height: 100px;">8 units</div> <div class="col-xs-4" style="background-color: #7e83a5; height: 100px;">4 units</div>

See the live result here

Now play with the browser size… You should get something like this when viewing at minimal resolution:

The big question is …

Why don’t we use col-xs classes on all sizes of screens? The answer is that we might prefer to change the design of the page for different screen resolutions.

For example, we might like to get one row with 2 columns in widescreen, as we have seen, 8 units + 4 units. But when moving to mobile resolution, we would like the right div to change to 2 units, and the left to 10 units. How do you think we do it?

Very simple. We just need to add more col-xs classes to the divs that have the col-md class. The HTML should look like this:

See the live result here

Did you notice a change on the screen? If not, try changing the size of the browser. You can also try changing the classes to sm and lg… just play around with it and you’ll see the magic.

Offset classes

What if we want to change the right column unit to 3 instead of 4? And leave the left on 8 units, aligned left, with spacing between the divs? Something that looks like this:

For this scenario, we have the Bootstrap offset classes. The offset class should be defined with the number of units that you want to move to right side. In our example: 1 unit.
So we come back to our right div with the 3 units and add the following class: “col-md-offset-1” .

<div class="row"> <div class="col-md-8 " style="background-color: #535da2; height: 100px;">8 units</div><div class="col-md-3 col-md-offset-1 " style="background-color: #f1c240; height: 100px;">3 units</div></div>

See the live result here

We should get something like this on the browser:

========================

Full width

I’m sure you noticed the issue we’re having with full width. This occurs because of the default padding and margin values of the Bootstrap .container class.

The solution here is also very simple. Just replace the .container class on the HTML with another class that’s called .container-fluid.

To try it, refresh your browser and see the difference. Awesome!

=======================

That's it for today, folks. I hope you enjoyed it.

Yaky Refael