Jumbotron: Creating a jumbotron

A jumbotron in Bootstrap 4 is a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. It is often used to grab the user's attention by featuring important content like a hero unit.

Here's a step-by-step guide on how to create a jumbotron in Bootstrap 4 with examples, using proper 4-space indentation.

Basic Jumbotron

To create a basic jumbotron, you can use the .jumbotron class. Here’s an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap 4 Jumbotron Example</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="jumbotron">
                <h1 class="display-4">Hello, world!</h1>
                <p class="lead">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>It uses utility classes for typography and spacing to space content out within the larger container.</p>
                <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
            </div>
        </div>
    </body>
</html>

Full-Width Jumbotron

If you want the jumbotron to extend the full width of the viewport, place it outside of any .container:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Full-Width Jumbotron</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
                <h1 class="display-4">Fluid jumbotron</h1>
                <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
            </div>
        </div>
    </body>
</html>

Jumbotron with Background Image

To add a background image to your jumbotron, you can use custom CSS. Here’s an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jumbotron with Background Image</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
        <style>
            .jumbotron {
                background: url('your-image-url.jpg') no-repeat center center;
                background-size: cover;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="jumbotron">
                <h1 class="display-4">Stunning Background</h1>
                <p class="lead">This jumbotron has a beautiful background image.</p>
                <hr class="my-4">
                <p>It looks great with a background image.</p>
                <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
            </div>
        </div>
    </body>
</html>

In these examples, the indentation is kept at 4 spaces to maintain consistency and readability.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us