Submodule 3.3: Responsive Design and Bootstrap Grid System

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.