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:
See online demo and code
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="container"> <h3>A demo of Jumbotron</h3> <div class="jumbotron"> <h1 class="display-4">Bootstrap 4 is here!</h1> <p class="lead">Use the Jumbotron component for Hero Unit style, display marketing message for an important service</p> <hr class="my-4"> <p>Convey and get attention.</p> <p class="lead"> <a class="btn btn-success btn-lg" href="#" role="button">Download Now</a> </p> </div> </div> |
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:
See online demo and code
The style of this demo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<style> .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; background-color: #e9ecef; border-radius: 0.3rem; background: #f0b7a1; /* Old browsers */ background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 14%, #bf6e4e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f0b7a1 0%,#8c3310 14%,#bf6e4e 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f0b7a1 0%,#8c3310 14%,#bf6e4e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-9 */ } .hd1{ color:#fff; } </style> |
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="container"> <div class="jumbotron"> <h1 class="hd1">Custom Jumbotron!</h1> <p class="lead hd1">Using the gradient background for Jumbotron component</p> <hr class="my-4"> <p class="hd1">Convey and get attention.</p> <p class="lead"> <a class="btn btn-dark btn-lg" href="#" role="button">Download Now</a> </p> </div> </div> |
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.
See online demo and code
The CSS style:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style> .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; background-color: #e9ecef; border-radius: 0.3rem; background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(30,87,153,0.54) 46%, rgba(125,185,232,0.18) 82%, rgba(125,185,232,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(30,87,153,0.54) 46%,rgba(125,185,232,0.18) 82%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(30,87,153,0.54) 46%,rgba(125,185,232,0.18) 82%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */ } .hd1{ color:#fff; } </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:
See online demo and code
The CSS code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; border-radius: 0.3rem; background: #1a2a6c; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .hd1{ color:#fff; } |
Custom Jumbotron style No 4
This style uses the bluish theme with the linear gradient:
See online demo and code
The CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style> .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; border-radius: 0.3rem; background: #000064; /* old browsers fallback color*/ background: -webkit-linear-gradient(to right, #1BADD8, #00003E); background: linear-gradient(to right, #1BADD8, #00003E); } .hd1{ color:#fff; } </style> |
Steel gray style Jumbotron
The last style is steel gray gradient style – pure CSS:
See online demo and code
The CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; border-radius: 0.3rem; background: #242134; background: -webkit-linear-gradient(to right, #9E9AB4, #242134); background: linear-gradient(to right, #9E9AB4, #242134); } .hd1{ color:#fff; } |
Please share it if you like it!