In this article, we are going to discuss about the .jumbotron class which is supported by Bootstrap 4. Jumbotron is a lightweight and flexible component, (Jumbo + tron) as the name suggests, this class when used, can increase the size of the entire viewport, add a lot of margin for the landing page content and showcase key marketing messages on your site.
We can use and implement this magnifying feature with the help of the .jumbotron class. Let’s understand it with the help of the following example.
Example 1:- Jumbotron with rounded corners, effect of Bootstrap 4.
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <!-- Bootstrap 4 alpha CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> <title>Jumbotron Example 1</title> </head> <body> <br> <br> <div class="container"> <div class="jumbotron"> <p>This is H1 Heading Example.</p> <h1>Welcome to the Jumbotron World!</h1> <p>This is H2 Heading Example.</p> <h2>Welcome to the Jumbotron World!</h2> <p>This is H3 Heading Example.</p> <h3>Welcome to the Jumbotron World!</h3> <p>This is H4 Heading Example.</p> <h4>Welcome to the Jumbotron World!</h4> <p>This is H5 Heading Example.</p> <h5>Welcome to the Jumbotron World!</h5> <p>This is H6 Heading Example.</p> <h6>Welcome to the Jumbotron World!</h6> </div> </div> <br> <br> <!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </body> </html>
Explanation of the code
In the above example, we have used the .jumbotron class and obeyed the following steps.
- Created a <div> with class as .container.
- Inside the above <div>Â we have created another <div> with the class of .jumbotron.
- Next, we have added HTML headings h1 to h6 in order to see the Jumbotron effect using the .jumbotron class.
- After, we execute this HTML code, we can clearly observe that in addition to a larger <h1> heading, the font-weight has been reduced to 200px. Same applies to other headings proportionally as shown below.
Example 2:- Full width Jumbotron with rounded corners, effect of Bootstrap 4.
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <!-- Bootstrap 4 alpha CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> <title>Jumbotron Example 2</title> </head> <body> <br> <br> <div class="jumbotron"> <div class="container"> <h1>Welcome to the Jumbotron World!</h1> <p>Bootstrap 4 presents - The Jumbotron</p> <p> <a class="btn btn-success btn-lg" role="button">Click here!</a> <a class="btn btn-danger btn-lg" role="button">Enter at your own risk!</a> </p> </div> </div> <br> <br> <!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </body> </html>
Explanation of the code
In the above example, we have used the .jumbotron class outside the .container class and obeyed the following steps.
- We have created a <div> with class as .jumbotron.
- Inside the above <div>, we have created another <div>Â with the class of .container.
- Next, we have added HTML h1 heading and button code which are embedded within the jumbotron with rounded corners effect on the web page.
- After, we execute this HTML code, we can clearly observe that in addition to a larger <h1> heading, we have got a larger button size as well as shown below.
Example 3:- Full width Jumbotron without rounded corners, effect of Bootstrap 4.
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <!-- Bootstrap 4 alpha CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> <title>Jumbotron Example 3</title> </head> <body> <br> <br> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1>Welcome to the Jumbotron World!</h1> <p>Bootstrap 4 presents - The Jumbotron</p> <p> <a class="btn btn-success btn-lg" role="button">Click here!</a> <a class="btn btn-danger btn-lg" role="button">Enter at your own risk!</a> </p> </div> </div> <br> <br> <!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </body> </html>
Explanation of the code
In the above example, we have used .jumbotron and .jumbotron-fluid modifier class outside the .container class and obeyed the following steps.
- We have created a <div> with class as .jumbotron and .jumbotron-fluid modifier class.
- Inside the above <div>, we have created another <div> with the class of .container. Alternatively, we can use .container-fluid class here.
- Next, we have added HTML h1 heading and button code which are embedded within the jumbotron without rounded corners effect on the web page.
- After, we execute this HTML code, we can clearly see that in addition to a larger <h1> heading, we have got larger button size as well as shown below.
Example 4:- Non-full width Jumbotron without rounded corners, effect of Bootstrap 4.
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <!-- Bootstrap 4 alpha CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> <title>Jumbotron Example 4</title> </head> <body> <br> <br> <div class="container-fluid"> <div class="jumbotron jumbotron-fluid"> <h1>Welcome to the Jumbotron World!</h1> <p>Bootstrap 4 presents - The Jumbotron</p> <p> <a class="btn btn-success btn-lg" role="button">Click here!</a> <a class="btn btn-danger btn-lg" role="button">Enter at your own risk!</a> </p> </div> </div> <br> <br> <!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </body> </html>
Explanation of the code
In the above example, we have used .jumbotron and .jumbotron-fluid modifier class inside the .container-fluid class and obeyed the following steps.
- We have created a <div> element with .container class.
- Inside the above <div>, we have created another <div>Â with the class of .jumbotron and .jumbotron-fluid. Alternatively, we can use .container-fluid class here.
- Next, we have added HTML h1 heading and button code which are embedded within the jumbotron with rounded corners effect on the web page. This jumbotron is not full width as shown below.
Conclusion:-
In this chapter, we discussed about the jumbotron class feature which is available in Bootstrap 4 along with various examples which cover full width, non-full width, rounded and non-rounded corners aspects of Jumbotron.
