Bootstrap Jumbotron

Here we will discuss the uses and controlling of Jumbotron in Bootstrap.

Often used as page headers, Jumbotron is as its name suggests, the attention-magnet for you web-pages.

It can be used to attract the users notice towards some special content.

Creating a Bootstrap Jumbotron

In simplest words, jumbotron is just a big box with that can be used to highlight some content (text) on the web page.

Here’s what all you need to know about creating a shows for your webpages.

  • A basic jumbotron box is grey in color and has rounded corners.
  • The font size of the text content is considerably enlarged to attract the users attention
  • You can create a jumbotron for your page by using simple <div> element along with the Bootstrap class .jumbotron
  • You can put any valid HTML inside the Jumbotron. In fact, other Bootstrap elements can also be nested in it.

Let us now see, how we can put a Jumbotron inside a container.

  • In order to do this, you need to first create a <div> with class attribute set as “container”.
  • Next you’ll have to place your jumbotron component inside this <div>

The code below illustrates the same:

The advantage of putting a jumbotron inside a container is that the container avoids its extension to the edge of the screen.

If you want your jumbotron to take the width of the screen, you need to put it outside the <div class= “container”> element.

Check out the code below to understand more about this:

Bootstrap Jumbotron Page Header

Sometimes. The jumbotron might not go well with the rest of your webpage.

Sometimes you might need a more simple version of s page header to highlight your content.

For such cases, Bootstrap has a separate element known as a ‘Page Header’

Unlike, Jumbotron, page header is more like a section divider.

It is not a box that sticks at the top of your page to show text in the enlarged font.

It rather creates a neat section at the top of the page and shows the enlarged text there.

The neat section that we just told is displayed using s horizontal line.

This is different from a regular text underline in the sense that it provides some space to the header text making it look box with just a bottom border.

Here’s how you can create a page header for your web page:

  • First you need to create a <div> element. This will be the component to hold the header text
  • The class provided by Bootstrap for creating the page header is .page-header. Use this with your <div> and the page header is ready to be displayed.

See the code below for illustration: