Course lesson

Create a Hero Image Landing Page Section with Bootstrap container-fluid

Many websites have a large, eye-catching splash image at the top of a landing page called a 'hero section'. As this is one of the first things your users will see, it's important that it looks perfect and catchy.

Duration
3 min
Access
Included
Transcript
Retained from source evidence

Many websites have a large, eye-catching splash image at the top of a landing page called a 'hero section'. As this is one of the first things your users will see, it's important that it looks perfect and catchy.

A hero section will usually also have a CTA paired with the image which is what we'll build.

We'll use container-fluid to see how it styles a little differently than container. We'll also see how to integrate custom CSS that we write with Bootstrap to make our image a background image as there isn't a way to do it using purely Bootstrap.