Skip to Content
Learn
Learn Bootstrap 4: Utilities and Components
Element Positioning

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

1.

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.

2.

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.

Folder Icon

Sign up to start coding

Already have an account?