Jumbotron in bootstrap

 <div class="container">
        <div class="row">
            <div class="col-sm-1 col-md-12 col-xs-3">
                <div class="jumbotron">
                    <h1>Jumbotron</h1>
                    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                    <p><a class="btn btn-primary btn-lg">Learn more</a></p>
                </div>
            </div>
            <div class="col-sm-1 col-md-12 col-xs-3">
                One of 4 columns
            </div>
            <div class="col-sm-1 col-md-12 col-xs-3">
                One of 4 columns
            </div>
            <div class="col-sm-9 col-md-12 col-xs-3">
                One of 4 columns
            </div>
        </div>
    </div>

 jumbotron indicates a big box for calling extra attention to some special content or information.

A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.

Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.

Use a <div> element with class .jumbotron to create a jumbotron:

Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.

---

Jumbotron Inside Container

Place the jumbotron inside the <div class="container"> if you want the jumbotron to NOT extend to the edge of the screen: