When considering the layout of a webpage, we have to think about how to position our elements. Conveniently, Bootstrap provides positioning utility classes.
We can apply CSS positioning styling by assigning an element a utility class found in Bootstrap’s positioning documentation. It would also be worth knowing how these position are rendered on a webpage.
For example, if we want an element that is fixed to the top, we can apply a "fixed-top"
class:
<div class="fixed-top"> This div will be fixed at the top of the screen. </div>
There are a few other positioning utility classes, so let’s explore how to use them!
Instructions
In index.html, there is an <h1>
element that we want to stick to the top. Look up what class to add to the <h1>
at Bootstrap’s positioning documentation.
Now the <h1>
element should stick to the top even after we’ve scrolled past it.
Let’s also fix the <footer>
to the bottom of the page using a Bootstrap utility class. You’ll have to scroll to the bottom of index.html to find the <footer>
element.
Check the hint for documentation help.