Bootstrap 4 Jumbotron Tutorial

Bootstrap is a framework that includes CSS, JavaScript, customization and components. The components are used to add predefined items anywhere on the Bootstrap template. The styles required for the components are defined within the main CSS and some components also need the script from the precompiled JavaScript file. This helps to add multiple instances of the same component anywhere on the site with uniform look. In this article let us discuss how to add Bootstrap jumbotron component in your site.

What is Jumbotron?

Jumbotron is a Bootstrap component that occupies the whole view port width of the browser and used to create full width hero sections easily. It is like a call to action box to showcase important content and attract users. Though jumbotron spreads to the full width, you can disable the full width by placing it inside a container element.

Features of Jumbotron Component

  • By default occupies the full width of the layout, you can also restrict to the defined width
  • Fully responsive component on all devices
  • Has border radius (hidden when used with full width)
  • Default background color is #eee
  • Any Bootstrap components like alerts and badges can be added inside jumbotron
  • Used like a call to action section in Bootstrap templates
  • Can be inserted anywhere on Bootstrap templates using “.jumbotron” CSS class
  • Jumbotron uses default styles from the main “bootstrap.min.css” and can be customized using inline styles.

Full Width Jumbotron

Jumbotron is added by using “.jumbotron” CSS class and any components can be added inside jumbotron. Below example contains a H2 heading, a paragraph and a button using full width section.

Related:  How to Setup 301 Redirect in Weebly Site?
Full Width Bootstrap Jumbotron
Full Width Bootstrap Jumbotron

The complete code for the full width jumbotron is given below. As you can see the code, “.jumbotron-fluid” class is used for the full width along with the “.container”.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- Start of Jumbotron -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h2>WebNots Web Consulting Services</h2>
<p>WebNots Web Consulting Services company offers site building, migration and SEO services on WordPress and Weebly platforms. We also share our experience and knowledge through free articles, demos, eBooks, videos and glossary terms for the benefit of bloggers and webmasters community.</p>
<p><a href="https://www.webnots.com/free-ebooks-for-bloggers-and-webmasters/" target="_blank" class="btn
btn-primary btn-lg">Get Free eBooks for Bloggers</a></p>
</div>
</div>
<!-- End of Jumbotron -->
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

The above jumbotron code uses CDN links precompiled Bootstrap CSS and JS files. But if you want to host the files on your server then download and upload the required files from the official site. Refer the starter template for getting started with Bootstrap.

Offer: Get 92% discount of Mobirise Bootstrap site builder.

Bootstrap Jumbotron – No Full Width

If you don’t want full width then simply use the “.jumbotron” class without “.container” and “.jumbotron-fluid” classes. In this way you can disable the full width and the jumbotron width will be the width of the <div> container.

Bootstrap Jumbotron Inside Container
Bootstrap Jumbotron Inside Container

Note when jumbotron component does not occupy full width then the border radius will be visible.

Below is the complete code for the above jumbotron example with no full width:

<div class="jumbotron">
<h2 style="padding-bottom: 50px">This is an example of jumbotron component inside container.</h2>
<a href="https://www.webnots.com/" class="btn btn-warning btn-lg btn-block">Go to Home Page</a>
</div>

Customizing Jumbotron Component

You can use simple CSS to customize the font color and background color of the jumbotron like below:

Related:  How to Add WordPress Site to iOS Notification Screen?
Custom Bootstrap Jumbotron
Custom Bootstrap Jumbotron

The complete code for the above custom jumbotron is given below:

<!DOCTYPE html>
<html>
<head>
<title>Custom Full width Bootstrap Jumbotron</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style type="text/css">
.jumbotron{
margin-top: 15px;
padding: 17px;
color: #990000;
background-color: #FFFFCC;
}
</style>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Custom Jumbotron Component</h1>
<p>This is a custom jumbotron using H1, paragraph and full width button. You can add any other elements and customize the color, margins and paddings as you need.</p>
<p><a href="https://www.webnots.com/" class="btn btn-warning btn-lg btn-block">Go to Home Page</a></p>
</div>
</div>
</body>
</html>

Recommended Articles:

Leave a Comment