How to create Jumbotron using Bootstrap 5 ?

Bootstrap Jumbotron is a responsive component whose main goal is to draw the visitor's attention or highlight a special piece of information. Inside a Jumbotron, you can make use of almost any other Bootstrap code to further increase its engagement value.

Uses of Jumbotron:

• Image showcase
• Highlighting content
• Introduction for a Certain Topic

Approach:

• To create a Jumbotron bootstrap provides a class named “jumbotron”. 
• Bootstrap uses some default properties applied to Jumbotron, making it a very good 'eye-catcher'.

Example 1: Creating a simple Jumbotron:

Output:

👁 Image

Example 2: To create a full-width Jumbotron we use the jumbotron-fluid class along with the Jumbotron class.

Output

👁 Image

Example 3: We can also style the Jumbotron and add background images to make it more attractive as shown below.

Output

👁 Image