Default

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

<div class="row">
    <div class="col-lg-12">
        <div class="jumbotron">
          <h2 class="display-4 mb-5  mt-4">Hello, world!</h2>
          <p class="lead mt-3 mb-4">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
          <hr class="my-4">
          <p class="mb-5">It uses utility classes for typography and spacing to space content out within the larger container.</p>
          <p class="lead">
            <a class="btn btn-warning" href="javscript:void(0);" role="button">Learn more</a>
          </p>
        </div>
    </div>
</div>

Jumbotron Fluid

Fluid Jumbotron

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


avatar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title
<div class="row">
    <div class="col-lg-12">
        <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <h2 class="display-4 mb-5  mt-4">Fluid Jumbotron</h2>
            <p class="lead mt-3 mb-4">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
            <br/>
            <blockquote class="blockquote media-object">
                <div class="media">
                    <div class="usr-img mr-2">
                        <img alt="avatar" src="assets/img/90x90.jpg" class="br-30">
                    </div>
                    <div class="media-body align-self-center">
                       <p class="d-inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    </div>
                </div>
                <small class="text-right">Someone famous <cite title="Source Title">Source Title</cite></small>
            </blockquote>
          </div>
        </div>
    </div>
</div>