Jumbotron

Vue Bootstrap Jumbotron - free examples, templates & tutorial

Responsive Vue Jumbotron built with Bootstrap 5. Classic hero component, jumbotron with background image, with navbar, full height, slider & more combinations.

To learn more read Card Docs.

With navbar

Since jumbotron is usually the first element of the page, it may be a good idea to combine your jumbotron with a navbar.

Background image with navbar

Header with background image might help to outstand your call to action elements by catching the eyes to some beautiful image in the background.

To provide a proper contrast it's highly recommended to use a mask. You can change the color and the opacity of the mask by manipulating RGBA code.

You also must set the height of the background image, otherwise, the component will collapse. In the example below, we set the height to 400px.

We use flexbox utilities to center the content vertically and horizontally.

Animated navbar

You can achieve a very impressive effect by using our animated navbar, which is transparent on start, and change the color after the scroll.

Click the button below to see the full-screen demo.

Related resources