Rate these docs

React Bootstrap Jumbotron

React Jumbotron - Bootstrap 4 & Material Design

React Jumbotron is a responsive component which the main goal is to focus visitor's attention or highlight the special piece of information.

Inside a Jumbotron, you can make use of almost any other Bootstrap code to additionally increase its engagement value.

Its flexibility lets you operate with images, enlarged fonts, different background styles, and CTA's.

Jumbotron use examples:

  • Project presentation
  • Article introduction
  • Image showcase

See a number of Bootstrap Jumbotron examples to familiarize yourself with its design.


Basic example

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

        import React from "react";
        import { MDBJumbotron, MDBBtn, MDBContainer, MDBRow, MDBCol } from "mdbreact";

        const JumbotronPage = () => {
          return (
            <MDBContainer className="mt-5 text-center">
              <MDBRow>
                <MDBCol>
                  <MDBJumbotron>
                    <h2 className="h1 display-3">Hello, world!</h2>
                    <p className="lead">
                      This is a simple hero unit, a simple Jumbotron-style component for
                      calling extra attention to featured content or information.
                    </p>
                    <hr className="my-2" />
                    <p>
                      It uses utility classes for typgraphy and spacing to space content out
                      within the larger container.
                    </p>
                    <p className="lead">
                      <MDBBtn color="primary">Learn More</MDBBtn>
                    </p>
                  </MDBJumbotron>
                </MDBCol>
              </MDBRow>
            </MDBContainer>
          )
        }

        export default JumbotronPage;
      

Fluid jumbotron

To make the jumbotron full width, and without rounded corners, add the fluid prop <MDBContainer> or <MDBContainer fluid> within.

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.


        import React from "react";
        import { MDBJumbotron, MDBContainer } from "mdbreact";

        const JumbotronPage = () => {
          return (
            <MDBJumbotron fluid>
              <MDBContainer>
                <h2 className="display-4">Fluid jumbotron</h2>
                <p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
              </MDBContainer>
            </MDBJumbotron>
          )
        }

        export default JumbotronPage;
      

Jumbotron - API

In this section you will find advanced information about the Jumbotron component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


          import { MDBJumbotron } from "mdbreact";
      

API Reference: Jumbotron Properties

The table below shows the configuration options of the Jumbotron component.

Name Type Default Description Example
className String Adds custom classes <MDBJumbotron className="customClass" />
fluid Boolean false Makes the Jumbotron full width, and without rounded corners. <MDBJumbotron fluid />