Bootstrap Backgrounds

Bootstrap background utilities are predefined classes that allow you to apply background styles quickly.

<div class="bg-primary p-3">
    Bootstrap Background
</div>

The bg-primary class applies Bootstrap's primary theme background color.

Bootstrap provides several contextual background colors.

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark

These classes can be applied to many HTML elements.

The bg-primary class applies the primary theme background.

<div class="bg-primary text-white p-3">
    Primary Background
</div>

The text-white class can be used when white text provides suitable contrast.

The bg-secondary class applies the secondary theme background.

<div class="bg-secondary text-white p-3">
    Secondary Background
</div>

The bg-success class is commonly used for positive states and successful operations.

<div class="bg-success text-white p-3">
    Payment Successful
</div>

The bg-danger class is useful for errors and destructive actions.

<div class="bg-danger text-white p-3">
    Error Occurred
</div>

The bg-warning class is commonly used for cautionary messages.

<div class="bg-warning text-dark p-3">
    Please Check Your Information
</div>

Dark text is often more suitable on the Bootstrap warning background.

The bg-info class can be used for informational sections.

<div class="bg-info text-white p-3">
    Important Information
</div>

The bg-light class creates a light background.

<div class="bg-light p-3">
    Light Background
</div>

It is useful for subtle sections and content areas.

The bg-dark class creates a dark background.

<div class="bg-dark text-white p-3">
    Dark Background
</div>

The text-white class can be combined with dark backgrounds for readable text.

Background colors can be combined with Bootstrap spacing utilities.

<div class="bg-primary p-4 text-white">
    Content with Padding
</div>

The p-4 class adds padding around the content.

Background sections can also be combined with margin utilities.

<div class="bg-success text-white p-3 mt-4">
    Success Section
</div>

The mt-4 class adds margin to the top.

Background and text color utilities can be combined.

<div class="bg-primary text-white p-3">
    White Text
</div>

<div class="bg-warning text-dark p-3 mt-3">
    Dark Text
</div>

Always choose a text color that provides suitable contrast.

Bootstrap provides background opacity utilities that can change the opacity of a background color.

<div class="bg-primary bg-opacity-25 p-3">
    25% Background Opacity
</div>

<div class="bg-primary bg-opacity-50 p-3 mt-3">
    50% Background Opacity
</div>

Bootstrap provides several background opacity utility values.

bg-opacity-10
bg-opacity-25
bg-opacity-50
bg-opacity-75
bg-opacity-100

For example:

<div class="bg-success bg-opacity-50 p-3">
    Semi-transparent background
</div>

Bootstrap provides the bg-gradient utility. It adds a gradient effect to a background color.

<div class="bg-primary bg-gradient
text-white p-4">

    Bootstrap Gradient

</div>

The gradient utility works together with a background color utility.

You can combine bg-primary with bg-gradient.

<div class="bg-primary bg-gradient
text-white p-4">

    Primary Gradient

</div>

A dark gradient can be created by combining bg-dark and bg-gradient.

<div class="bg-dark bg-gradient
text-white p-4">

    Dark Gradient

</div>

Background utilities can be applied to card headers and other card sections.

<div class="card">

    <div class="card-header
    bg-primary text-white">

        HTML Course

    </div>

    <div class="card-body">

        Learn HTML fundamentals.

    </div>

</div>

Background utilities can be used with navigation bars.

<nav class="navbar bg-dark">

    <div class="container">

        <a
        class="navbar-brand text-white"
        href="#">

            My Website

        </a>

    </div>

</nav>

This creates a dark navigation background with white branding text.

Bootstrap alert components already use contextual background and text styling.

<div class="alert alert-success">
    Registration successful!
</div>

<div class="alert alert-danger">
    Registration failed.
</div>

Use the alert component when you need a complete contextual message rather than only a background utility.

Buttons have their own contextual color classes, but background utilities can also be useful for surrounding sections.

<div class="bg-light p-4">

    <button class="btn btn-primary">
        Start Course
    </button>

</div>

Background utilities can be combined with border utilities.

<div
class="bg-light border border-primary
rounded p-4">

    Course Information

</div>

This combination is useful for creating information boxes.

Use Bootstrap's border-radius utilities with background classes.

<div
class="bg-primary text-white
rounded p-4">

    Rounded Background

</div>

Other radius utilities include rounded-0, rounded-1, rounded-2, rounded-3, and rounded-pill.

Background utilities work well with Bootstrap's responsive grid.

<div class="row g-3">

    <div class="col-12 col-md-6">

        <div
        class="bg-primary
        text-white p-4">

            Box 1

        </div>

    </div>

    <div class="col-12 col-md-6">

        <div
        class="bg-success
        text-white p-4">

            Box 2

        </div>

    </div>

</div>

Background color should always be considered together with text contrast and readability.

<div class="bg-dark text-white p-4">

    Important Information

</div>

Do not select text and background colors only because they look good. Make sure the content remains readable.

• Using too many background colors on one page.
• Using a background color without enough text contrast.
• Using text-white on a very light background.
• Using opacity that makes text difficult to read.
• Using gradients everywhere without a clear design purpose.
• Forgetting spacing around content.
• Using background colors as the only way to communicate meaning.

• Use contextual colors consistently.
• Choose readable text colors for each background.
• Use p-* utilities to provide comfortable spacing.
• Use bg-opacity-* when partial transparency is useful.
• Use bg-gradient for meaningful visual emphasis.
• Combine background utilities with responsive grid classes.
• Use background colors consistently throughout your website.
• Always consider accessibility and contrast.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
    name="viewport"
    content="width=device-width,
    initial-scale=1.0">

    <title>
        Bootstrap Backgrounds
    </title>

    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet">

</head>

<body>

<div class="container py-5">

    <div
    class="bg-primary
    bg-gradient
    text-white
    rounded
    p-5
    text-center">

        <h1>
            Learn Bootstrap
        </h1>

        <p class="lead">
            Build responsive websites easily.
        </p>

        <button class="btn btn-light">
            Start Learning
        </button>

    </div>

    <div class="row g-4 mt-4">

        <div class="col-12 col-md-4">

            <div
            class="bg-success
            text-white
            rounded
            p-4
            h-100">

                <h3>
                    HTML
                </h3>

                <p>
                    Learn webpage structure.
                </p>

            </div>

        </div>

        <div class="col-12 col-md-4">

            <div
            class="bg-info
            text-white
            rounded
            p-4
            h-100">

                <h3>
                    CSS
                </h3>

                <p>
                    Learn webpage styling.
                </p>

            </div>

        </div>

        <div class="col-12 col-md-4">

            <div
            class="bg-dark
            text-white
            rounded
            p-4
            h-100">

                <h3>
                    Bootstrap
                </h3>

                <p>
                    Learn responsive web design.
                </p>

            </div>

        </div>

    </div>

    <div
    class="bg-warning
    bg-opacity-50
    rounded
    p-4
    mt-4">

        <strong>
            Note:
        </strong>

        Practice Bootstrap utilities regularly.

    </div>

</div>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>

</body>

</html>

This example combines background colors, gradients, opacity, spacing, rounded corners, text colors, and responsive grid classes.