Submodule 3.3: Responsive Design and Bootstrap Grid System

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