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;
      

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

        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/gradient1.jpg)` }}>
                      <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.


        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.


        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).jpg"
                      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

        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).jpg"
                    />
                    <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.



        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;
      

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