Skip to Content
Learn
Learn Bootstrap 4: Utilities and Components
The Jumbotron Component

In arenas and stadiums, there are giant screens called jumbotrons which display the main event for everyone in the crowd to see. Bootstrap also offers a jumbotron component that serves a similar function and makes content stand out.

Here’s an example of a basic jumbotron that only contains text:

<div class="jumbotron"> <h1>Wow this stands out!</h1> </div>

In the example above we included an <h1> element, but we could add images or a variety of Bootstrap components. Look over Bootstrap’s jumbotron documentation for more elaborate examples.

Instructions

1.

Use the comments to locate where you’ll put the jumbotron component.

Inside the column of that row, add a <div> and assign it a class of "jumbotron".

2.

Inside the jumbotron, add some content relevant to Gloria’s Gardening! It can be anything you want, just make sure it’s not blank!

Folder Icon

Sign up to start coding

Already have an account?