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'.
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.
[00:00] The next section will have an ID of Jumbotron and create a div with the class of container dash fluid. This lesson will also have one of the few pieces of CSS that I'll be writing. Bootstrap currently does not have an option to create a background image, so that has to be done with custom CSS. [00:21] In styles dot CSS, create a class called header dash cta. We'll set the URL of the background image to the Mount Saint Helens image, set the position to center, and the repeat to no repeat. I'll also set the height to 400 pixels and the background [00:40] size to cover so our image doesn't stretch. Back in index.html, add the custom class to the div and take a peek at the site. Our image is loading, and it's looking beautiful. To add the call to action, create a div with a class of row and add another div with a [01:00] class of column, column dash MD dash 5. The div will span 12 columns, but once we hit medium screen sizes, it'll only span 5 out of the 12 columns. I'll add in an h one with the title of hiking the Pacific Northwest and an h two of [01:20] join us on our adventures. It's near impossible to see, so I'm going to add in a light background to be able to read it. Add in a background of light to make it white and then add in some padding and margin, [01:40] p dash 4, m dash 5, and I'll also round the corners with rounded. This is much better. The CTA should have a button to take you to where the CTA wants you to go, so, for example, a store or to save an event in your calendar. Below these 2, we'll add in [02:00] a button and give it a class of btn. This gives us some fun things to play with. We can add a background color to it. As this is a site about hiking, I'll choose the color green using the class bgdashsuccess. We'll also add a dark outline and change the button size to [02:20] large. I'll also add in a little bit of sample text. If you exit out of the dev tools and hover over our button, you can see that Bootstrap automatically gave it hover effects without us needing to add any on hover classes ourselves. One last thing I wanna do is move the CTA down to be [02:40] centered vertically so it's not covering the mountain as much. And the div with the class of row, set the height to 100 to make the height of the row the whole jumbotron and set align items to center. Save and take a peek at the site, and there we go. We now have a finished jumbotron with the [03:00] CTA, and it's fully responsive.