What is the purpose of Jumbotron?

If you have important marketing message regarding your products or services related to your website then you may present this in a light-weight and flexible component in Bootstrap 4 called as Jumbotron.

The Jumbotron generally appears as the header, just below the top navigation that takes the good width of the user’s device and optionally may expand to full user’s screen.

In the coming sections, I will show you basic examples of creating Jumbotron by Bootstrap 4 classes along with custom templates that you may copy or further customize as per the need of your project.

A simple Bootstrap 4 Jumbotron example

A Jumbotron is created by using the .jumbotron class in the main <div> element. The Jumbotron may contain any HTML elements and Bootstrap classes. Have a look at the simple Jumbotron demo:

Bootstrap 4 Jumbotron

See online demo and code

The markup:

Create full-width Jumbotron example

By using .jumbotron-fluid class along with .jumbotron, you may create a full width Jumbotron according to the parent element width. For example:

<div class=”jumbotron jumbotron-fluid”>

See online demo and code

The Jumbotron custom template example

For this demo, a custom Jumbotron is created by using the custom CSS. Basically, it overrides the default class, jumbotron and adds a linear gradient. Have a look at the live demo and code:

Bootstrap 4 Jumbotron custom

See online demo and code

The style of this demo:

The markup:

Note: You must place this style after the reference of Bootstrap 4 CSS file either in the style section or your external CSS file.

Bootstrap 4 Jumbotron custom style number 2

Check out another style of the Jumbotron component with the lighter linear gradient.

Bootstrap 4 Jumbotron custom 2

See online demo and code

The CSS style:

The same markup is used as for the above example.

Jumbotron custom style 3

Again, a pure CSS styled Jumbotron component for Bootstrap 4:

Bootstrap 4 Jumbotron- custom-3

See online demo and code

The CSS code:

Custom Jumbotron style No 4

This style uses the bluish theme with the linear gradient:

Bootstrap 4 Jumbotron custom-4

See online demo and code

The CSS:

Steel gray style Jumbotron

The last style is steel gray gradient style – pure CSS:

Bootstrap 4 Jumbotron custom-5

See online demo and code

The CSS:

Please share it if you like it!