Bootstrap Jumbotron Examples 2024

Bootstrap 4 jumbotron with Image Tag Background vs CSS background image for SEO
Bootstrap 4
Image SEO is very important to generate organic search traffic. This code snippet shows you how to add an image as a background to retain the alt text.
Transparent Navbar Over Jumbotron that Turns Opaque on Scroll
Bootstrap 4
Jumbotron background image opacity
Bootstrap 4
This code snippet will help you add a background image and change its opacity by adding a color gradient on top of the image. This technique leverages the ability to have multiple background image properties creating a layering effect.
Promotional Jumbotron
Bootstrap 4
This code snippet recreates the layout used on the Hotjar homepage. I was curious how they did the text highlighting and see they used a pseudo element with a transparent image. A pretty cool technique.
Jumbotron with Blurry Background Image
Bootstrap 4
In this example I demonstrate how you can add an img tag and the absolutely position it to the background. In order to make the text more readable, I made the image more subtly by decreasing the opacity and making it blurry. Making the image darker creates more contrast which in turn makes the text easier to read.

In order for the .object-fit property to work in internet explorer you will need to add a polyfill to make it work.

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>
Jumbotron Background Video with Image Fallback
Bootstrap 4
Want to add a video or image background to a Bootstrap Jumbotron? This code snippet adds an mp4 video and positions it behind the text in the .container to appear as a background video. To increase readability of the text, I changed the opacity of the video to make it darker than the original.
Bootstrap 3 Jumbotron Auto Viewport Height
Bootstrap 3
Extends the height of the jumbotron to fill the height of the viewport. As you scroll the remaining content of the page is shown. Commonly used for landing pages and blog post pages.
Transparent Background Image Cover Jumbotron Bootstrap 3
Bootstrap 3
This example sets the background image in the HTML instead of using a CSS background image. This approach lets you add your image with 100% saturation and you can control the level opacity with code. The alternative would be to add the transparency to your image using Photoshop.