Bootstrap 4 Components

Jumbotron

Jumbotron is the large callout in a website that gathers much attention. To create a jumbotron use the class .jumbotron inside the <div> element. Place this within a .container class. By default, BootStrap jumbotron is light gray in color which, of course, can be changed.

<div class="container"> <div class="jumbotron"> <h1 class="display-3">Jumbotron</h1> <p class="lead">This is an example for a jumbotron.</p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div> </div>

To add jumbotron that extends the entire viewport of the browser and without the round edges add .jumbotron-fluidutility class and place the container class within the jumbotron.

<div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-3">Jumbotron</h1> <p class="lead">This is an example for a fluid jumbotron.</p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div> </div>