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:
HTML
<!DOCTYPE html><html> <head> <link rel="stylesheet" href= integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head> <body> <div class="jumbotron"> <h1>Text to catch user attention/greeting.</h1> <p class="lead">lorem ipsum.</p> <hr class="my-4"> <p>Some dummy text</p> </div></body></html> |
Output:
Example 2: To create a full-width Jumbotron we use the jumbotron-fluid class along with the Jumbotron class.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head> <body> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead"> This is a modified jumbotron that occupies the entire horizontal space of its parent. </p> </div> </div></body> </html> |
Output
Example 3: We can also style the Jumbotron and add background images to make it more attractive as shown below.
HTML
<!DOCTYPE html><html> <head> <link rel="stylesheet" href= integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> .jumbotron-image { background-position: center center; background-repeat: no-repeat; background-size: cover; } </style></head> <body> <div class="jumbotron text-white jumbotron-image shadow" style="background-image: url( );"> <h2 class="mb-4"> Jumbotron with background image </h2> <p class="mb-4"> Hey, check this out. </p> <a class="btn btn-primary"> Click! </a> </div></body> </html> |
Output
Please Login to comment...