Submodule 3.3: Responsive Design and Bootstrap Grid System

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>