Jumbotron

    A lightweight, flexible component that can optionally extend the entire viewport to showcase key content 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.

    <Jumbotron>
      <h1>Hello, world!</h1>
      <p>
        This is a simple hero unit, a simple jumbotron-style component for calling
        extra attention to featured content or information.
      </p>
      <p>
        <Button variant="primary">Learn more</Button>
      </p>
    </Jumbotron>;
    
    Press esc to disable tab trapping

    Fluid jumbotron

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

    <Jumbotron fluid>
      <Container>
        <h1>Fluid jumbotron</h1>
        <p>
          This is a modified jumbotron that occupies the entire horizontal space of
          its parent.
        </p>
      </Container>
    </Jumbotron>;
    
    Press esc to disable tab trapping

    API

    import Jumbotron from 'react-bootstrap/Jumbotron'
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    fluid
    boolean
    false

    Make the jumbotron full width, and without rounded corners

    bsPrefix
    string
    'jumbotron'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.