1. bootstrap-jumbotron

Bootstrap Jumbotron

  • A Jumbotron is a large, prominent section used to showcase featured content on a webpage.
  • In Bootstrap, a Jumbotron is a container with extra padding and margin to provide more focus on the content.


Here is the syntax for creating a simple Jumbotron:

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>This is a simple Jumbotron</p>


Here is an example of a Jumbotron with a button

<div class="jumbotron">
    <h1>Welcome to Additional sheet</h1>
    <p>A solution of all technology</p>
        <a class="btn btn-success btn-lg" href="#" role="button">Learn more</a>
Try Playground


In the code above, we used the following classes and attributes to create the Jumbotron:

  • jumbotron: this is a class that provides extra padding and margin to the content inside the container.
  • jumbotron-fluid: this is a class that makes the Jumbotron full-width and responsive to the screen size.
  • background-image: this is an inline style attribute that sets the background image of the Jumbotron container.
  • btn, btn-primary, btn-lg: these are classes applied to the button to make it styled according to Bootstrap.


A Jumbotron can be used to highlight or showcase important content on a webpage. It can be used to present a call-to-action, introduce a new feature, or announce an event.

Important Points

  • A Jumbotron is a prominent container used to showcase important content on a webpage.
  • A Jumbotron can be styled with a background image, title, description, and a call-to-action button.
  • A Jumbotron can be made full-width and responsive using the jumbotron-fluid class.


A Jumbotron is a useful component in Bootstrap to draw the user's attention to important content on a webpage. With extra padding and margin, a Jumbotron provides a visually appealing way to present featured content.

Published on: