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/profile-16.jpeg" 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>