This tutorial explains all about Bootstrap 4 Jumbotron. Learn to program Jumbotron with background colors, full-width Jumbotron, etc:
In this tutorial, you will learn what a Bootstrap 4 Jumbotron is. We will also understand full-width Bootstrap jumbotrons, Bootstrap jumbotron colors, and frequently asked questions.
Please note that we have used Bootstrap version 4 in all examples.
=> Visit Here To Learn Bootstrap From Scratch
Let’s begin!
Table of Contents:
Introduction To Bootstrap Jumbotron
The following table summarizes the main classes that we have used in this tutorial.
| Class | Usage |
|---|---|
| The .jumbotron class | This class is used to create a basic jumbotron. |
| The .jumbotron-fluid class | This class is used to create a full-width jumbotron. |
| The .bg-primary class | This class is used to add a blue color to the component. |
| The .bg-secondary class | This class is used to add a grey color to the component. |
| The .bg-success class | This class is used to add a green color to the component. |
| The .bg-danger class | This class is used to add a red color to the component. |
| The .bg-warning class | This class is used to add an orange color to the component. |
| The .bg-info class | This class is used to add a light blue color to the component. |
| The .bg-white class | This class is used to add a white color to the component. |
| The .bg-light class | This class is used to add a light grey color to the component. |
| The .bg-dark class | This class is used to add a dark grey color to the component. |
A Bootstrap jumbotron is a big grey box for getting more attention to some special information. The main class used to create a jumbotron is the .jumbotron class.
The below programming code shows a basic example. You can try this example by running the below programming code:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="jumbotron"> <h1 class="display-4">Tutorial</h1> <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique porttitor sodales. Fusce elementum sapien a elit tempor rutrum. Fusce. </p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code:
Full-Width Jumbotron
Add the .jumbotron-fluid class to create a full-width jumbotron. Unlike a basic jumbotron, a full-width jumbotron does not have round corners.
The below programming code shows an example. You can try this example by running the below programming code:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="jumbotron jumbotron-fluid"> <h1 class="display-4">Tutorial</h1> <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique porttitor sodales. Fusce elementum sapien a elit tempor rutrum. Fusce. </p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code:
Bootstrap Jumbotrons With Background Colors
You can add one of the following classes for background colors to add color to the jumbotron, instead of having the default grey color:
- The .bg-primary class: This class is used to add a blue color to the component.
- The .bg-secondary class: This class is used to add a grey color to the component.
- The .bg-success class: This class is used to add a green color to the component.
- The .bg-danger class: This class is used to add red color to the component.
- The .bg-warning class: This class is used to add orange color to the component.
- The .bg-info class: This class is used to add a light blue color to the component.
- The .bg-white class: This class is used to add a white color to the component.
- The .bg-light class: This class is used to add a light grey color to the component.
- The .bg-dark class: This class is used to add a dark grey color to the component.
The below programming code shows an example. You can try this example by running the below programming code:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="jumbotron bg-primary mt-4"> <h1 class="display-4">Tutorial</h1> <p class="lead"> <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </b> </p> <p class="lead"> <a class="btn btn-info btn-lg" href="#" role="button">Learn more</a> </p> </div> <div class="jumbotron bg-secondary"> <h1 class="display-4">Tutorial</h1> <p class="lead"> <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </b> </p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> <div class="jumbotron bg-success"> <h1 class="display-4">Tutorial</h1> <p class="lead"> <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </b> </p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> <div class="jumbotron bg-danger"> <h1 class="display-4">Tutorial</h1> <p class="lead"> <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </b> </p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> <div class="jumbotron bg-warning"> <h1 class="display-4">Tutorial</h1> <p class="lead"> <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </b> </p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> <div class="jumbotron bg-info"> <h1 class="display-4">Tutorial</h1> <p class="lead"> <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </b> </p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> <div class="jumbotron bg-white"> <h1 class="display-4">Tutorial</h1> <p class="lead"> <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </b> </p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> <div class="jumbotron bg-light"> <h1 class="display-4">Tutorial</h1> <p class="lead"> <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </b> </p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> <div class="jumbotron bg-dark"> <h1 class="display-4 text-white">Tutorial</h1> <p class="lead text-white"> <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </b> </p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code:
Frequently Asked Questions
In this section, we will discuss some of the FAQs related to this topic. These questions will help you to prepare for your examinations and interviews confidently.
Q #1) What is a Bootstrap Jumbotron?
Answer: It is a big grey box for getting more attention to some special information.
Q #2) What is the main class used to create a basic jumbotron?
Answer: The main class used is the .jumbotron class.
Q #3) How do I make my jumbotron full width?
Answer: Add the .jumbotron-fluid class to the container div element to make it full width.
Q #4) What is the default Bootstrap jumbotron color?
Answer: The default color is grey.
Q #5) How do I change the background color of a jumbotron in Bootstrap?
Answer: You can use one of the classes for background colors such as the .bg-primary class, the .bg-secondary class, the .bg-success class, the .bg-danger class, the .bg-warning class, the .bg-info class, the .bg-white class, the .bg-light class and the .bg-dark class to add the color you want.
Q #6) Can I use custom styles to override the jumbotron background color?
Answer: Yes, you can use custom styles to override the background color.
Conclusion
A jumbotron is used to display information in an attractive way. You can create a full-width jumbotron by adding the .jumbotron-fluid class. You can also use the background colors to change the default color.
Hope you have enjoyed this tutorial. Hope to see you soon with our next tutorial. Happy learning!
=> Read Through The Easy Bootstrap Training Series