Book
Submodule 3.3: Responsive Design and Bootstrap Grid System
Submodule 3.3: Responsive Design and Bootstrap Grid System
Completion requirements
View
- Responsive WEB design
- Bootstrap grid system - container, row, column
- Mobile first - media queries - viewport meta tag
- Customize the CSS classes - external style sheet - inline CSS
- Flex order - position
Responsive Design and Bootstrap Grid System Part 2
... 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".