Submodule 3.3: Responsive Design and Bootstrap Grid System

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">