tutorialstonight logo
A Platform To Learn To Code

BOOTSTRAP 4 JUMBOTRON



The Jumbotron component of bootstrap is a flexible component that is used to showcase some special content on your website.

You can use .jumbotron class with <div> tag to create a jumbotron. You can wrap any valid HTML element with jumbotron.

The Bootstrap's jumbotron CSS property are :

  • padding: 2rem 1rem;
  • margin-bottom: 2rem;
  • background-color: #e9ecef;
  • border-radius: 0.3rem;

Below is an example of jumbotron. See how it stands out from other elements.

Learn To Code

Using Coding You can build anything you can imagine digitally, the only limit is your imagination.

Start Today

Full-width Jumbotron

You can see in the above example the jumbotron box as a round border. To remove the round border and get full-width jumbotron, add the .jumbotron-fluid class and add a .container or .container-fluid within.

Here is an example below, look at its border-radius and width. (Play the code to see better)

Learn Javascript

Javascript is one of the most popular programming language in the world. Javascript covers both front-end and back-end and comes with a bunch of libraries.

Start Javascript Today

points to remember Points to remember:
  1. Jumbotron is used for a showcase of special elements.
  2. Use .jumbotron class on the div element to create bootstrap's jumbotron.
  3. For full width and no border-radius in jumbotron use additional modifier .jumbotron-fluid and add a container or container-fluid inside.
Bootstrap 4 Images