🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

How to Create and Use Bootstrap Jumbotron in Your Website

Reading time 2 min
Published Jan 6, 2016
Updated Oct 2, 2019

Web design has to serve everything: aesthetics and functionality, user-friendliness and interactivity. Of course, graphic designers take care of a lot of those things. Still, knowing the basics comes in handy for every coder.

Bootstrap jumbotrons help your users get the vital information in the first glance. It is a huge field meant for displaying text. In this tutorial, we will learn to create jumbotrons and easily catch the visitor's eye so they don't miss any crucial information.

Bootstrap Jumbotron: Main Tips

  • The Bootstrap 4 provides the CSS class called jumbotron, which is designed to capture the user's attention upon entering the website, making it perfect for displaying important information.
  • The concept of jumbotron is widely used in web design nowadays.
DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Creating a Bootstrap Jumbotron

A jumbotron is simply created by giving a <div> element the .jumbotron CSS class.

To create one, the HTML you need to use would look something like this:

Example
<div class="jumbotron">
    <h1 style="text-transform: none;">Jumbotron</h1>
    <p>Important information here!</p>
</div>

Now, if you'd like your jumbotron to be full-width, you will also need to add the .jumbotron-fluid class to it and wrap the content inside the jumbotron with a <div> element with the .container class like this:

Example
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 style="text-transform: none;">Jumbotron</h1>
    <p>Important information here!</p>
  </div>
</div>

Bootstrap Jumbotron: Summary

  • When you need to attract your user's attention as they enter the website, you can use a jumbotron CSS class.
  • It comes in handy when you need to display some crucial information.
  • Bootstrap jumbotrons are considered a staple of web design.