A bootstrap jumbotron is a big grey box used to indicate extra attention to some special text or information. This jumbotron displayed as a grey box with rounded corners. It can also enlarge the font sizes of the text inside it.
You can put any valid HTML code or other Bootstrap elements or classes inside a jumbotron. The class .jumbotron within the <div> element is used to create a jumbotron.
Jumbotron Inside Container:
The Bootstrap 4 jumbotron component provides an excellent way to showcase the key content or information on a web page. To create a jumbotron, apply the .jumbotron class to the <div> element that represents the jumbotron.
Example:
<div class="container">
<div class="jumbotron">
<h2>Bootstrap 4 Tutorial</h2>
<p>The jumbotron component provides an excellent way to showcase the key content or information on a web page. To create a jumbotron, apply the .jumbotron class to the element that represents the jumbotron.</p>
Normally, it is used when you want the jumbotron to extend to the screen edges. Add a jumbotron class outside the container.
Example:
<div class="jumbotron">
<h2>Bootstrap 4 Tutorial</h2>
<p>The jumbotron component provides an excellent way to showcase the key content or information on a web page. To create a jumbotron, apply the .jumbotron class to the element that represents the jumbotron.</p>
</div>
<div class="container">
<p>A bootstrap jumbotron is a big grey box used to indicate extra attention to some special text or information.</p>
To create a jumbotron that covers the full width of the viewport and without rounded corners, places it outside all the containers, add the .jumbotron-fluid modifier class on it, and add a .container or .container-fluid within it, as shown in the below example:
Example:
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h2>Bootstrap 4 Tutorial</h2>
<p>The jumbotron component provides an excellent way to showcase the key content or information on a web page. To create a jumbotron, apply the .jumbotron class to the element that represents the jumbotron.</p>
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok