In class exercise to get familiar with Bootstrap's responsive grid. Use the official Bootstrap documentation as a reference while working through this lab. Take some time now to read through its introduction and How it works section.
Learning how to use Bootstrap's responsive grid will greatly ease the development of responsive layouts, allowing you to develop UIs that look great on devices ranging from mobile phones to desktop computers.
No CSS or custom styles even through HTML's style attribute are to be written to finish this exercise.
All three elements should have equal widths and appear on the same line regardless of viewport width.
- The first and last elements should be variable width like the last row.
- The second element should have a grid column width of 3.
- The third element should have a grid column width of 7.
All columns should span:
- 12 grid columns for the xs breakpoint.
- 6 grid columns for the sm breakpoint.
- 4 grid columns for the md breakpoint.
- 3 grid columns for the lg and xl breakpoints.
- All columns should be:
- Of equal width
- Vertically centered
- All columns should be of equal width.
- The first column should be vertically aligned to the bottom.
- The last column should be vertically centered.
- All columns should have equal spacing between themselves but span from both ends of the container.
- All columns should have the xs breakpoint sized to be 3 grid columns.
- All columns should have equal spacing between themselves and have equal spacing around each element, not between each element.
- The first and last column should have 4 grid columns in width for the md breakpoint (same as row #4).
If you're suck refer to this section of the documentation.
Create these elements in the order they're listed.
- Create a
<h1>element:- Must always span full width of row
- Create two
<div>:- Both must span full width of row for the xs breakpoint
- Both must span half the width of the row for all other breakpoints
- First
<div>:- Has the HTML class
fun-facts - Contains four equal sized columns that are vertically aligned
- In each column add a
<p>element with a fun fact about yourself.
- Has the HTML class
- Second
<div>:- Has the HTML class
fun-fibs - Contains four unequal sized columns that do not span the whole width of the row
- Vertically align each one differently
- Have equal spacing around them horizontally. The columns can be any width, but no two can be the same
- In each column add a
<p>element with lies about yourself.
- Has the HTML class
- Is valid HTML5 document (5 marks)
- All grids must:
- Container element is direct child of
<main>or<body>elements (2 marks) - Row has a direct parent of
<section class=”container”>(can be a div) (2 marks) - Row has a direct parent of
<section class=”container”>(can be a div) (2 marks)
- Container element is direct child of
- Row is a direct child of the container (2 marks)
- Grid #1:
- All cells are full column width for xs breakpoint (2 marks)
- Has two cells with class col-md-6 (2 marks)
- Each cell has an image with the class
img-fluid(2 marks)
- Grid #2:
- All cells are full column width for xs breakpoint (2 marks)
- Has four cells with
col-md-6andcol-md-3(4 marks) - Each cell has an image with the class
img-fluid(2 marks)