bootstrap
  1. bootstrap-jumbotron
PreviousNext

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.

Syntax

Here is the syntax for creating a simple Jumbotron:

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

Example

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>
    <p>
        <a class="btn btn-success btn-lg" href="#" role="button">Learn more</a>
    </p>
</div>
Try Playground

Explanation

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.

Use

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.

Summary

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.

Background ColorsBadges
Published on: