Bootstrap Jumbotron Examples< View Code Snippets Library
Promotional JumbotronBootstrap 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 ImageBootstrap 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-fitproperty to work in internet explorer you will need to add a polyfill to make it work.
Jumbotron Background Video with Image FallbackBootstrap 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 HeightBootstrap 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 3Bootstrap 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.
Looking for something else?
Suggest or contribute a code snippet to be added to the library.
Other Code Snippet Categories