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.
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 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" 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 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" 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.
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.
Note that 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:
The complete code for the above custom jumbotron is given below:
<!DOCTYPE html>
<html>
<head>
<title>Custom Full width Bootstrap Jumbotron</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" 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>
Leave a Reply
Your email is safe with us.