Bootstrap Jumbotron and Page Header

14 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create a Bold Jumbotron Heade

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Jumbotron and header classes to create eye-catching, full-width banners. A Jumbotron highlights key content, like a hero section, with text and images for a stunning webpage.

What You’ll Learn

Building a basic Jumbotron
Styling headers and text
Adding images to a Jumbotron
Creating a compact header

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Jumbotron and Headers

Bootstrap’s Jumbotron is a large, padded section for showcasing content. Though Bootstrap 5 removed the jumbotron class, you can recreate it using classes like bg-light, p-5, and rounded. Header classes enhance text for titles.

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

Step 2: Create a Basic Jumbotron

Start with a simple Jumbotron to highlight a welcome message. Use this code:

<div class="container">
    <div class="bg-primary text-white p-5 rounded">
        <h1>Welcome to Our Site</h1>
        <p>This is a bold, full-width section to grab attention.</p>
        <a href="#" class="btn btn-light">Learn More</a>
    </div>
</div>

Explanation:

container: Centers and constrains content.
bg-primary text-white: Sets a blue background with white text.
p-5: Adds large padding for a spacious look.
rounded: Softens corners.
btn btn-light: Adds a white button for contrast.

This creates a vibrant, padded banner with a call-to-action.

Step 3: Add an Image to the Jumbotron

Enhance the Jumbotron with a dummy image for visual appeal. Try this:

<div class="container">
    <div class="bg-light p-4 rounded shadow">
        <div class="row">
            <div class="col-8">
                <h1>Explore Now</h1>
                <p class="lead">Discover amazing features with our platform.</p>
                <a href="#" class="btn btn-primary">Get Started</a>
            </div>
            <div class="col-4">
                <img src="https://placehold.co/300x200/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
            </div>
        </div>
    </div>
</div>

Explanation:

bg-light shadow: Uses a light background with a subtle shadow.
row and col-8, col-4: Splits content into text (8 units) and image (4 units).
lead: Makes the paragraph stand out.
img-fluid rounded: Ensures the 300×200 green image scales and has soft corners.

The image adds a colorful touch to the Jumbotron.

Step 4: Style a Compact Header

Create a smaller header for secondary sections. Use this:

<div class="container">
    <div class="bg-secondary text-white p-3 rounded">
        <h2>Quick Info</h2>
        <p>Stay updated with our latest news.</p>
    </div>
</div>

Explanation:

bg-secondary: Applies a gray background.
p-3: Uses moderate padding for a compact feel.
h2: A smaller heading for hierarchy.

This header is sleek and less prominent than the Jumbotron.

Step 5: Combine with a Full-Width Jumbotron

For a dramatic effect, make a full-width Jumbotron with an image and text. Try this:

<div class="bg-dark text-white p-5">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <h1 class="display-4">Big Impact</h1>
                <p class="lead">Join our community today!</p>
                <a href="#" class="btn btn-success">Sign Up</a>
            </div>
            <div class="col-6">
                <img src="https://placehold.co/500x300/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
            </div>
        </div>
    </div>
</div>

Explanation:

bg-dark: Sets a dark background for drama.
container inside: Keeps content centered.
display-4: Makes the heading extra large.
Uses a 500×300 red dummy image for vibrancy.

This Jumbotron spans the full width with a bold layout.

Final Code

Here’s a combined example with varied Jumbotron styles:

<div class="container">
    <div class="bg-primary text-white p-5 rounded mb-4">
        <h1>Start Here</h1>
        <p class="lead">A bold introduction to your webpage.</p>
        <a href="#" class="btn btn-light">Discover</a>
    </div>
    <div class="bg-light p-4 rounded shadow mb-4">
        <div class="row">
            <div class="col-7">
                <h2>Our Mission</h2>
                <p>Empowering creativity with technology.</p>
                <a href="#" class="btn btn-primary">Join Us</a>
            </div>
            <div class="col-5">
                <img src="https://placehold.co/350x200/17a2b8/ffffff" class="img-fluid rounded" alt="Teal placeholder">
            </div>
        </div>
    </div>
</div>
<div class="bg-dark text-white p-5">
    <div class="container">
        <h2>Showcase</h2>
        <div class="row">
            <div class="col-6">
                <h1 class="display-5">Make It Happen</h1>
                <p>Transform ideas into reality.</p>
            </div>
            <div class="col-6">
                <img src="https://placehold.co/400x250/ffc107/000000" class="img-fluid rounded" alt="Yellow placeholder">
            </div>
        </div>
    </div>
</div>

Output

Your webpage should show:

A blue Jumbotron with white text and a button.
A light Jumbotron with a teal image (350×200) and text in a two-column layout.
A full-width dark Jumbotron with a yellow image (400×250) and a large heading.
All sections are responsive, with images scaling and text adjusting for mobile.

Next Steps

Check the Bootstrap Docs for layout ideas.
Try bg-gradient for gradient backgrounds.
Add Bootstrap cards below a Jumbotron for more content.

Conclusion

You’ve learned how to create bold Jumbotrons and headers with Bootstrap! Using classes like p-5, rounded, and bg-primary, plus colorful images, you’ve built striking sections. Keep experimenting for amazing hero areas.