Jumbotrons

The Jumbotron is a Bootstrap component for showcasing key content — perfect for hero sections, welcome messages, and call-to-action areas.

Basic Jumbotron

<div class="jumbotron">
    <h1>Welcome to My Site</h1>
    <p>This is a simple hero unit for calling extra attention to featured content.</p>
    <a class="btn btn-primary btn-lg" href="#">Learn More</a>
</div>

Full-Width Jumbotron

Place the jumbotron outside a container for full width:

<div class="jumbotron">
    <div class="container">
        <h1>Full-Width Hero</h1>
        <p>This jumbotron stretches to the full viewport width.</p>
        <a class="btn btn-success btn-lg" href="#">Get Started</a>
    </div>
</div>

Contained Jumbotron

Place it inside a container for rounded corners and padding:

<div class="container">
    <div class="jumbotron">
        <h1>Contained Hero</h1>
        <p>This jumbotron has rounded corners.</p>
    </div>
</div>

Custom Styled Jumbotron

<style>
    .custom-jumbotron {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-align: center;
        padding: 80px 20px;
    }
    .custom-jumbotron .btn {
        margin-top: 20px;
    }
</style>

<div class="jumbotron custom-jumbotron">
    <h1>Build Amazing Websites</h1>
    <p class="lead">Learn Bootstrap and create beautiful responsive designs.</p>
    <a class="btn btn-default btn-lg" href="#">Start Learning</a>
</div>