Bootstrap Wells

14 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Inset Content Boxes (Wells)

In this Bootstrap tutorial, you’ll learn how to create inset content boxes, similar to Bootstrap 3’s Wells, using modern Bootstrap classes. These boxes make text, images, or other content stand out with a subtle, sunken look.

What You’ll Learn

Creating a basic inset box
Adding sizes to boxes
Combining with images
Styling multiple content boxes

Prerequisites

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

Step 1: Understand Wells

In Bootstrap 3, Wells used the well class to create padded, bordered boxes with an inset appearance. In Bootstrap 5, you can achieve this with classes like border, bg-light, p-3, and rounded. These mimic the sunken, highlighted effect.

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

Step 2: Create a Basic Inset Box

Start with a simple box to display text. Use this code:

<div class="container">
    <div class="border bg-light p-3 rounded">
        <h3>Featured Content</h3>
        <p>This box has an inset look, perfect for highlighting text.</p>
    </div>
</div>

Explanation:

container: Centers and constrains content.
border: Adds a thin outline.
bg-light: Gives a light background for contrast.
p-3: Adds padding for the inset effect.
rounded: Softens corners.

This creates a clean, sunken box like a Well.

Step 3: Add Size Variations

You can adjust padding for larger or smaller boxes. Try this:

<div class="container">
    <div class="border bg-light p-4 rounded mb-3">
        <h3>Large Box</h3>
        <p>More padding makes this box feel spacious.</p>
    </div>
    <div class="border bg-light p-2 rounded">
        <h3>Small Box</h3>
        <p>Less padding for a compact look.</p>
    </div>
</div>

Explanation:

p-4: Larger padding for a bigger box.
p-2: Smaller padding for a tighter box.
mb-3: Adds margin-bottom to separate boxes.

These variations mimic Bootstrap 3’s well-lg and well-sm.

Step 4: Include a Dummy Image

Add an image to a box for visual appeal. Use this:

<div class="container">
    <div class="border bg-light p-3 rounded">
        <div class="row">
            <div class="col-8">
                <h3>Image Highlight</h3>
                <p>This box pairs text with an image for impact.</p>
            </div>
            <div class="col-4">
                <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
            </div>
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits the box into text (8 units) and image (4 units).
img-fluid: Ensures the 200×150 green image scales.
Uses a green dummy image for vibrancy.

The image enhances the box’s appeal.

Step 5: Style Multiple Boxes

Create a layout with multiple inset boxes. Try this:

<div class="container">
    <div class="border bg-light p-3 rounded mb-3">
        <h3>Box 1</h3>
        <p>First highlight with a subtle inset effect.</p>
    </div>
    <div class="border bg-light p-3 rounded">
        <div class="row">
            <div class="col-6">
                <h3>Box 2</h3>
                <p>Text and image together in a box.</p>
                <a href="#" class="btn btn-primary">View More</a>
            </div>
            <div class="col-6">
                <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
            </div>
        </div>
    </div>
</div>

Explanation:

mb-3: Separates the first box from the second.
Second box uses a 250×150 red image for contrast.
btn btn-primary: Adds a blue button for interaction.

This layout combines text and image boxes.

Final Code

Here’s a combined example with varied inset boxes:

<div class="container">
    <div class="border bg-light p-4 rounded mb-3">
        <h2>Welcome</h2>
        <p class="lead">A spacious box to introduce your content.</p>
    </div>
    <div class="border bg-light p-3 rounded mb-3">
        <div class="row">
            <div class="col-7">
                <h3>Feature</h3>
                <p>Highlight key info with text and an image.</p>
                <a href="#" class="btn btn-success">Explore</a>
            </div>
            <div class="col-5">
                <img src="https://placehold.co/200x150/17a2b8/ffffff" class="img-fluid rounded" alt="Teal placeholder">
            </div>
        </div>
    </div>
    <div class="border bg-light p-2 rounded">
        <h3>Quick Note</h3>
        <p>Compact box for short updates.</p>
    </div>
</div>

Output

Your webpage should show:

A large box with a heading and lead text.
A medium box with a teal image (200×150), text, and a green button.
A small, compact box for brief content.
All boxes have an inset look with borders and light backgrounds, responsive across devices.

Next Steps

Explore the Bootstrap Docs for layout classes.
Try shadow for a raised effect instead of inset.
Combine boxes with Bootstrap’s grid for complex designs.

Conclusion

You’ve learned how to create inset content boxes like Wells using Bootstrap! With classes like border, bg-light, and p-3, plus colorful images, you’ve built engaging, sunken sections. Keep experimenting to highlight your content.