# Background color

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

## Background color

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

.bg-body-secondary

.bg-body-tertiary

.bg-body
.bg-black
.bg-white
.bg-transparent

    <!--background primary-->
    <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
    <div class="p-3 mb-2 bg-primary-subtle text-emphasis-primary">.bg-primary-subtle
    </div>
    <!--background secondary-->
    <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
    <div class="p-3 mb-2 bg-secondary-subtle text-emphasis-secondary">
        .bg-secondary-subtle</div>
    <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
    <div class="p-3 mb-2 bg-success-subtle text-emphasis-success">.bg-success-subtle
    </div>
    <!--background danger-->
    <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
    <div class="p-3 mb-2 bg-danger-subtle text-emphasis-danger">.bg-danger-subtle
    </div>
    <!--background warning-->
    <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
    <div class="p-3 mb-2 bg-warning-subtle text-emphasis-warning">.bg-warning-subtle
    </div>
    <!--background info-->
    <div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
    <div class="p-3 mb-2 bg-info-subtle text-emphasis-info">.bg-info-subtle</div>
    <!--background light-->
    <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
    <div class="p-3 mb-2 bg-light-subtle text-emphasis-light">.bg-light-subtle</div>
    <!--background dark-->
    <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
    <div class="p-3 mb-2 bg-dark-subtle text-emphasis-dark">.bg-dark-subtle</div>
    <!--background secondary-->
    <p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
    <p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p>

    <div class="p-3 mb-2 bg-body text-body">.bg-body</div>
    <div class="p-3 mb-2 bg-black text-white">.bg-black</div>
    <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
    <div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>

## Background gradient

.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
.bg-black.bg-gradient

    <!--primary gradient-->
    <div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary.bg-gradient</div>
    <!--secondary gradient-->
    <div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary.bg-gradient</div>
    <!--success gradient-->
    <div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success.bg-gradient</div>
    <!--danger gradient-->
    <div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger.bg-gradient</div>
    <!--warning gradient-->
    <div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning.bg-gradient</div>
    <!--info gradient-->
    <div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info.bg-gradient</div>
    <!--light gradient-->
    <div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light.bg-gradient</div>
    <!--dark gradient-->
    <div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark.bg-gradient</div>
    <!--black gradient-->
    <div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>

## Opacity

This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background

    <!--opacity-->
    <div class="bg-success p-2 text-white">This is default success background</div>
    <div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success
        background</div>
    <div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success
        background</div>
    <div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success
        background</div>
    <div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success
        background</div>