What is the Bootstrap 4 jumbotron?

Overview

Bootstrap 4 comes with a big grey box that calls extra attention to some special content or information. This box is called the jumbotron.

This box can be used for many purposes, as it can contain nearly any valid HTML, including other Bootstrap elements/classes.

Any content that requires special attention, i.e., the navbar, is usually put inside the jumbotron.

How to use

Bootstrap 4’s jumbotron is very easy to use. To create a jumbotron, use a div element with the class jumbotron, and you can put nearly any valid content inside it.

Using the "jumbotron" class inside a "div" element

The jumbotron can be made to have a full width and be without rounded corners by simply using the jumbotron-fluid modifier class and adding a container or container-fluid within.

Using the "jumbotron-fluid" modifier

Bootstrap 4’s jumbotron makes it easy for us to wrap lots of important content in one container at a time.

You can practice using it for a better understanding of how it works.