Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Background Colors in Bootstrap 5
Background Colors: Control the background color of elements with contextual classes.
Basic Background Colors
Bootstrap provides a set of background utility classes that work with any element.
All Background Color Classes
.bg-primary
Background color for primary elements
.bg-secondary
Background color for secondary elements
.bg-success
Background color for success states
.bg-danger
Background color for danger states
.bg-warning
Background color for warning states
.bg-info
Background color for info states
.bg-light
Light background color
.bg-dark
Dark background color
.bg-white
White background color
.bg-transparent
Transparent background
<!-- Basic background colors -->
<div class="bg-primary text-white p-3">Primary background</div>
<div class="bg-success text-white p-3">Success background</div>
<div class="bg-warning text-dark p-3">Warning background</div>
<div class="bg-dark text-white p-3">Dark background</div>
<!-- With different elements -->
<p class="bg-info text-white p-3">Paragraph with background</p>
<span class="bg-danger text-white p-2 rounded">Inline element</span>Background on Different Elements
Cards with Backgrounds
Primary Card
Card with primary background
Success Card
Card with success background
Warning Card
Card with warning background
Buttons & Badges
Buttons with Backgrounds
Outline Buttons
Badges with Backgrounds
PrimarySuccessWarningInfoDarkBackground Gradient
Gradient Backgrounds
.bg-primary .bg-gradient
Primary with gradient
.bg-success .bg-gradient
Success with gradient
.bg-warning .bg-gradient
Warning with gradient
.bg-info .bg-gradient
Info with gradient
Code Examples
<!-- Gradient backgrounds -->
<div class="bg-primary bg-gradient text-white p-4">
Primary gradient background
</div>
<div class="bg-success bg-gradient text-white p-4">
Success gradient background
</div>
<div class="bg-warning bg-gradient text-dark p-4">
Warning gradient background
</div>
<!-- Gradient in buttons -->
<button class="btn btn-primary bg-gradient">
Gradient Button
</button>
<!-- Gradient in cards -->
<div class="card bg-danger bg-gradient text-white">
<div class="card-body">
Gradient Card
</div>
</div>Responsive Background Colors
Responsive Background Utilities
Change background colors at different breakpoints:
Responsive Background
Primary on mobile, Success on tablet, Danger on desktop
<!-- Responsive background colors -->
<div class="bg-primary bg-md-success bg-lg-danger p-3">
Background changes at different screen sizes
</div>
<!-- Different breakpoints -->
<div class="bg-warning bg-sm-info bg-md-success bg-lg-primary p-3">
<!--
bg-warning: default (mobile)
bg-sm-info: ≥576px
bg-md-success: ≥768px
bg-lg-primary: ≥992px
-->
</div>
<!-- Hide/show with background -->
<div class="bg-dark text-white d-none d-md-block p-3">
Only visible on medium screens and above
</div>| Class | Breakpoint | Description |
|---|---|---|
.bg-primary | All screens | Applies to all screen sizes |
.bg-sm-success | ≥576px | Applies on small screens and up |
.bg-md-warning | ≥768px | Applies on medium screens and up |
.bg-lg-info | ≥992px | Applies on large screens and up |
.bg-xl-danger | ≥1200px | Applies on extra large screens |
Background Color with Opacity
Background Opacity
Normal (100%)
75% opacity
50% opacity
25% opacity
10% opacity
Opacity with Images
Overlay Text
<!-- Background overlay -->
<div class="position-relative">
<img src="image.jpg" class="img-fluid">
<div class="position-absolute top-0 start-0 w-100 h-100
bg-dark bg-opacity-50">
<!-- Overlay content -->
</div>
</div>Custom Background Colors
Custom Background Classes
Create custom background colors with CSS or SCSS:
Custom Color 1
Using custom CSS class
Custom Color 2
Using custom CSS class
Custom Color 3
Using custom CSS class
/* Custom CSS classes */
.custom-bg-1 {
background-color: #6a11cb;
}
.custom-bg-2 {
background-color: #2575fc;
}
.custom-bg-3 {
background-color: #ff416c;
}
/* SCSS customization */
$custom-backgrounds: (
"custom-1": #6a11cb,
"custom-2": #2575fc,
"custom-3": #ff416c,
"custom-4": #ff4b2b,
"custom-5": #11998e
);
@each $name, $color in $custom-backgrounds {
.bg-#{$name} {
background-color: $color !important;
}
}Accessibility Considerations
Accessibility Best Practices
- Contrast ratio: Ensure sufficient contrast between text and background (minimum 4.5:1)
- Color blindness: Don't rely solely on color to convey information
- Readability: Light text on dark backgrounds or dark text on light backgrounds
- Focus states: Maintain visible focus indicators on interactive elements
- Testing: Use accessibility tools to test color combinations
