Learn What is the Jumbotron Class in Bootstrap 4

0
3200
Jumbotron Class

Jumbotron Class

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.

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.
    Example1

 

Example 2:- Full width Jumbotron with rounded corners, effect of Bootstrap 4.

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.
    Example2

 

Example 3:- Full width Jumbotron without rounded corners, effect of Bootstrap 4.

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.
    Example3

 

Example 4:- Non-full width Jumbotron without rounded corners, effect of Bootstrap 4.

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.
    Example4

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here