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
Using Flex Order
Using Flex ordering, we can alternate title and description that it gives an interesting look at the web page.
To do this, you can update the first and third row of content classes as:
<div class=" row flex-row-reverse "> ... </div>
List styles
You can use several list styles to display lists in different formats. We will use the unordered list style list-unstyled
to display the links at the bottom of the page without the bullets. To do this, go to the links in the footer and update the ul as follows
<ul class="list-unstyled"> ... </ul>