Bootstrap 5 jumbotron

In Bootstrap 3, a jumbotron was introduced as a large, padded box for highlighting special content or information. Now, jumbotrons do not support in Bootstrap 5 version. We can achieve the same result with an <div> element, special helper classes, and a color class.

Jumbotron is an essential function in the web page to understand content to the user. It helps to overview about page and get major content in a short space. Bootstrap 5 uses margin, padding, contextual, and other design classes to create a basic jumbotron.

Syntax

The following syntax makes a basic jumbotron on a web page. We can use other classes to make creative jumbotrons.

Description

• The "m-3" (margin) class uses to set margin of the <div> tag. We can use the element's top, bottom, left, and right sides.
• The "p-5" class uses to set padding of the <div> tag. We can use the element's top, bottom, left, and right sides.
• The contextual background class (bg-secondary) requires setting a jumbotron background. We can set images as a background in the <div> tag.

Basic jumbotron example

The following example shows a basic jumbotron with margin, padding, and contextual classes.

Output

The following image shows a custom jumbotron using bootstrap 5 classes.

Jumbotron with image example

Bootstrap 5 jumbotron contains information, images, and the web page heading. The following example shows a jumbotron with margin, padding, and contextual classes. Here, we can place images in the div tag. The jumbotron uses the "rounded" class in element with other classes.

Output

The following output shows the image and data placed on the jumbotron.

Jumbotron background image example

The background image set in bootstrap 5 custom jumbotron using css property. The following example shows jumbotron with margin, padding and contextual classes. Here, we can place images in the div tag. The jumbotron uses the "rounded" class in element with other classes.

Output

The following image shows the background image for the jumbotron.

Conclusion

Bootstrap 5 does not have a jumbotron class, but we have to customize it. We can make attractive, animated, and user-friendly jumbotrons for web pages. The bootstrap 5 version uses multiple classes to create an eye-catchy and easy jumbotron function.