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
- 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:
Example 2: To create a full-width Jumbotron we use the jumbotron-fluid class along with the Jumbotron class.
Example 3: We can also style the Jumbotron and add background images to make it more attractive as shown below.
- Bootstrap (Part-6) | Progress Bar and Jumbotron
- Bootstrap 4 | Jumbotron
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- How to create Responsive Bottom Navigation Bar using Bootstrap ?
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- How to Create ToDo App using HTML, CSS, JS and Bootstrap ?
- How to create responsive website zoomed out to full width on mobile using Bootstrap?
- How to create a radio button similar to toggle button using Bootstrap ?
- Create a Homepage for Restaurant using HTML , CSS and Bootstrap
- How to create full width container using bootstrap?
- How to create five equal columns in Bootstrap ?
- How to use SASS to create new set of color styles in Bootstrap 4 ?
- How to Create a Bootstrap Spinner and Display on Screen till the data from the API loads ?
- How to create a two tone banner in bootstrap ?
- Displaying inline and multiline blocks of code using Bootstrap
- Image Replacement in Bootstrap using text-hide Class
- How to place button in top Right corner using bootstrap?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.