React Bootstrap Jumbotron

React Jumbotron - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Show code

        
            
        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;

Jumbotron with a background image

Create your beautiful website with MDBootstrap

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

View project

Show code

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

        const JumbotronPage = () => {
          return (
            <MDBContainer>
              <MDBRow>
                <MDBCol>
                  <MDBJumbotron style={{ padding: 0 }}>
                    <MDBCol className="text-white text-center py-5 px-4 my-5" style={{ backgroundImage: `url(https://mdbootstrap.com/img/Photos/Others/gradient12.webp)` }}>
                      <MDBCol className="py-5">
                        <MDBCardTitle className="h1-responsive pt-3 m-5 font-bold">Create your beautiful website with MDBootstrap</MDBCardTitle>
                        <p className="mx-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                          optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!
                        </p>
                        <MDBBtn outline color="white" className="mb-5"><MDBIcon icon="clone" className="mr-2"></MDBIcon> View project</MDBBtn>
                      </MDBCol>
                    </MDBCol>
                  </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.

Show code

        
            
        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 with image

My adventure

Photography

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Show code

        
            
        import React from "react";
        import { 
          MDBJumbotron, 
          MDBContainer, 
          MDBRow, 
          MDBCol, 
          MDBIcon, 
          MDBCardTitle, 
          MDBCardImage, 
          MDBCardBody, 
          MDBCardText 
        } from "mdbreact";

        const JumbotronPage = () => {
          return (
            <MDBContainer className="mt-5 text-center">
              <MDBRow>
                <MDBCol>
                  <MDBJumbotron className="text-center">
                    <MDBCardTitle className="card-title h4 pb-2">
                      <strong>My adventure</strong>
                    </MDBCardTitle>

                    <MDBCardImage
                      src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).webp"
                      className="img-fluid"
                    />
                    <MDBCardBody>
                      <MDBCardTitle className="indigo-text h5 m-4">
                        Photography
                      </MDBCardTitle>
                      <MDBCardText>
                        Sed ut perspiciatis unde omnis iste natus sit voluptatem
                        accusantium doloremque laudantium, totam rem aperiam.
                      </MDBCardText>

                      <MDBCol className="d-flex justify-content-center mt-4" md="12">
                        <MDBCol md="3" className="d-flex justify-content-around">
                          <a href="#"><MDBIcon
                            fab
                            icon="linkedin-in"
                            className="grey-text"
                            size="lg"
                          /></a>
                          <a href="#"><MDBIcon
                            fab
                            icon="twitter"
                            className="grey-text"
                            size="lg"
                          /></a>
                          <a href="#"><MDBIcon
                            fab
                            icon="facebook-f"
                            className="grey-text"
                            size="lg"
                          /></a>
                        </MDBCol>
                      </MDBCol>

                    </MDBCardBody>
                  </MDBJumbotron>
                </MDBCol>
              </MDBRow>
            </MDBContainer>
          )
        }

        export default JumbotronPage;

Jumbotron without padding MDB Pro component

Card title

Some quick example text to build on the card title and make up the bulk of the card's

Button

Show code

        
            
        import React from "react";
        import { 
          MDBJumbotron, 
          MDBBtn, 
          MDBContainer, 
          MDBRow, 
          MDBCol,  
          MDBCardImage, 
          MDBCardBody, 
          MDBCardTitle, 
          MDBCardText 
        } from "mdbreact";

        const JumbotronPage = () => {
          return (
            <MDBContainer className="mt-5 text-center">
              <MDBRow>
                <MDBCol>
                  <MDBJumbotron className="p-0">
                    <MDBCardImage
                      className="img-fluid"
                      src="https://mdbootstrap.com/img/Photos/Slides/img%20(134).webp"
                    />
                    <MDBCardBody>
                      <MDBCardTitle className="h3">Card title</MDBCardTitle>
                      <MDBCardText>
                        Some quick example text to build on the card title and make up
                        the bulk of the card&apos;s content.
                      </MDBCardText>
                      <MDBBtn href="#" gradient="purple" rounded>
                        BUTTON
                      </MDBBtn>
                    </MDBCardBody>
                  </MDBJumbotron>
                </MDBCol>
              </MDBRow>
            </MDBContainer>
          )
        }

        export default JumbotronPage;

Jumbotron with buttons

Material Design for Bootstrap

Powerful and free Material Design UI KIT

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam.

Show code

        
            
        import React from "react";
        import { 
          MDBJumbotron, 
          MDBBtn, 
          MDBContainer, 
          MDBRow, 
          MDBCol, 
          MDBIcon, 
          MDBCardBody, 
          MDBCardText,  
          MDBCardTitle 
        } from "mdbreact";

        const JumbotronPage = () => {
          return (
            <MDBContainer className="mt-5 text-center">
              <MDBRow>
                <MDBCol>
                  <MDBJumbotron>
                    <MDBCardBody>
                      <MDBCardTitle className="h2">
                        Material Design for Bootstrap
                      </MDBCardTitle>
                      <p className="blue-text my-4 font-weight-bold">
                        Powerful and free Material Design UI KIT
                      </p>
                      <MDBCardText>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
                        aliquid dolorem ea distinctio exercitationem delectus qui, quas
                        eum architecto, amet quasi accusantium, fugit consequatur
                        ducimus obcaecati numquam molestias hic itaque accusantium
                        doloremque laudantium, totam rem aperiam.
                      </MDBCardText>
                      <hr className="my-4" />
                      <div className="pt-2">
                        <MDBBtn 
                          color="primary"
                          className="waves-effect"
                        >
                          Buy now <MDBIcon far icon="gem" />
                        </MDBBtn>
                        <MDBBtn
                          outline
                          color="primary"
                          className="waves-effect"
                        >
                          Download <MDBIcon icon="download" />
                        </MDBBtn>
                      </div>
                    </MDBCardBody>
                  </MDBJumbotron>
                </MDBCol>
              </MDBRow>
            </MDBContainer>
          )
        }

        export default JumbotronPage;

React 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

Show code

javascript

        
            
          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 />`