Submodule 3.3: Responsive Design and Bootstrap Grid System

Introduction

In this submodule, you will be given an overview of responsive web design and an introduction to the Bootstrap grid system.

• Part 1 introduces you to responsive design and Bootstrap support for mobile first responsive design through the use of the grid system. 
• We also learn, in Part 2,  how to customize some of the Bootstrap classes by defining our own modifications in a separate CSS file.

Responsive Design and Bootstrap Grid System Part 1

Note: In this Part, we will continue to update the index.html file in the leChocolat folder that we created and edited in the previous submodule.

Bootstrap Grid System and Responsive Design

Bootstrap is designed to be mobile first, meaning that the classes are designed such that we can begin by targeting mobile device screens first and then work upwards to larger screen sizes. The starting point for this is first through media queries. We have already added the support for media queries in the last lesson, where we added this line to the head: 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

• • The viewport meta tag ensures that the screen width is set to the device width and the content is rendered with this width in mind.
  • This brings us to the second issue, designing the websites to be responsive to the size of the viewport.

This is where the Bootstrap grid system comes to our aid. Bootstrap makes available four sizes,

• • xs for extra small,
  • sm for small,
  • md for medium and
  • lg for large screen sizes.

We have already seen the basics of responsive design. In this part, we will employ the Bootstrap grid classes to design the websites.

We would like our website to have the content stacked on extra small devices, but become horizontal within each row for smaller devices and beyond.

Towards this goal, we will make use of the classes

• • .col-*,
  • .col-sm-*,
  • .col-md-*, and
  • .col-lg-*

for defining the layouts for the various device sizes.

We can specify how many columns each piece of content will occupy within a row, all adding up to 12 or a multiple thereof.

... Part 1...

Using a Container class

We use the container class to keep content within a fixed width on the screen, determined by the size of the screen.

Add the container class to the first div right after the </header> in the file as follows:

<div class="container"> 

Dividing the content into rows

Let us now add the class row to the first-level inner div elements inside the container. This organizes the page into rows of content. 

<div class="row"> ...

Creating a Jumbotron in the header

Let us add the class jumbotron to the header tag. This turns the header element into a Bootstrap component named Jumbotron.

A jumbotron is used to showcase key content on a website. In this case we are using it to highlight the name of the site.

In the header add a container class to the first inner div and a row class to the second inner div.

<header class="jumbotron">
   <div class="container">
      <div class="row">

Creating a footer

Finally, in the footer add a container class to the first inner div and a row class to the second inner div.

<footer>
  <div class="container">
    <div class="row">

... Part 1 ...

Applying column classes within each row

In the header row, we will display the restaurant name and the description to occupy 8 columns, while we will leave 4 columns for displaying the restaurant logo in the future.

Let us go into the jumbotron and define the classes for the first  inner div as :

<div class="col-12 col-sm-8"> ... </div>

and for the second inner div as : 

<div class="col col-sm"> ... </div> <!-- This particular content will occupy whatever is left out, 0 or 4 cols -->

For the remaining three div rows that contain content, let us define the classes for the inner divs as follows:

<div class="col-sm-4 col-md-3"> ... </div>
<div class="col-sm col-md"> ... </div>

For the footer, let us define the classes for the inner divs as follows:

<div class="col-5 col-sm-2"> ... </div>
<div class="col-6 col-sm-5"> ... </div>
<div class="col col-sm-4"> ... </div>
<div class="col-auto"> ... </div><!--auto, the column numbers that is going to be occupied will be dependent upon the actual content--> 

Now you can see how the web page has been turned into a mobile-first responsive design layout.

Using Offset

For the div containing the <ul> with the site links, update the class as follows:  

<div class="col-5 offset-1 col-sm-2">

To move columns to the right we use .offset-* classes. These classes increase the left margin of a column by * columns. For example, .offset-1 moves .col-1 over one column.

... Part 1

After saving all the changes, you can do a Git commit with the message "Bootstrap Grid Part 1".

View file history and compare this version of the file against the previous version.

Responsive Design and Bootstrap Grid System Part 2

Using Flex Order

Using Flex ordering, we can alternate title and description that it gives an interesting look at the web page.
To do this, you can update the first and third row of content classes as:

<div class=" row flex-row-reverse "> ... </div>

List styles

You can use several list styles to display lists in different formats. We will use the unordered list style list-unstyled to display the links at the bottom of the page without the bullets. To do this, go to the links in the footer and update the ul as follows

<ul class="list-unstyled"> ... </ul>

... Part 2 ...

Using Custom CSS classes

We can define our own custom CSS classes in a separate CSS file, and also customize some of the built-in CSS classes. 

• In sub-folder with the name leChocolat , create a folder named css.
• Then create a file named styles.css in the css folder.
• Open this file to edit the contents.

Add the following CSS code to the file:

• Include the styles.css file into the head of the index.html file as follows:

<link href="css/styles.css" rel="stylesheet">

• Then add these classes to the corresponding rows in the index.html file as follows. See the difference in the index.html file in the browser. The first one is for the row in the <header>, the next three for the rows in the content, and the last one directly to the <footer> tag.

<div class="row row-header"> ... </div>
<div class="row row-content"> ... </div>
<div class="row row-content"> ... </div>
<div class="row row-content"> ... </div>
<footer class="footer"> ... </footer>

... Part 2 ...

Our next set of customization is to the jumbotron and the address.

Add the following to

the styles.css file. 

... Part 2

Vertically Centering the Content

In the content section, update all the rows as follows:

<div class="row row-content align-items-center">

In the footer, update the third column div that contains the social media links as follows:

<div class="col col-sm-4 align-self-center">

Horizontally Centering the Content

Update the copyright paragraph as follows:

<div class="row justify-content-center">  
<div class="col-auto">

Applying Inline CSS

Update the inner div containing the social media links as follows:

<div style="text-align:center">

After saving all the changes, you can do a Git commit with the message "Bootstrap Grid Part 2".