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.

Disclaimer About Us