Jumbotron is a lightweight, flexible Bootstrap 4 component for displaying important marketing messages that require extra attention. Inside jumbotron, you can add almost all valid HTML elements and apply other Bootstrap classes.

Bootstrap 4 provides .jumbotron class that can be applied to any block element like <div> to create a jumbotron.

<div class="jumbotron">
  <h1>Welcome to Bootstrap</h1> 
  <p>Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.</p> 
	<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

The above code snippet renders as following:

Welcome to Bootstrap

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

Learn more
Note: The above output looks different than the default Bootstrap 4 colors. This is because we have modified the original Bootstrap 4 styles for our site.

Full-width Jumbotron

If you want make the jumbotron full width without rounded corners, add the .jumbotron-fluid class and add a .container or .container-fluid inside of it.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
		<h1>Welcome to Bootstrap</h1> 
		<p>Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.</p> 
		<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
	</div>
</div>

Bootstrap 4 jumbotron component provides an excellent to showcase the important marketing content on a web page.