Bootstrap - Backgrounds
Background Colors
Bootstrap has classes for setting background colors on elements. These classes use the naming pattern bg-*, where * is the color name.
Example: Background color classes
<div class="bg-primary p-3">
This element has a primary background color.
</div>
<div class="bg-success p-3">
This element has a success background color.
</div>
<div class="bg-warning p-3">
This element has a warning background color.
</div>
<div class="bg-danger p-3">
This element has a danger background color.
</div>
<div class="bg-info p-3">
This element has an info background color.
</div>
<div class="bg-dark p-3">
This element has a dark background color.
</div>To set a custom background color, you can use the style attribute or make a custom CSS class.
Example: Custom background color
<div class="bg-warning p-3" style="background-color: #ff8c00;">
This element has a custom background color.
</div>Bootstrap also has classes for controlling the opacity of background colors. By adding -opacity-* to the bg-* classes, you can set the opacity level of the background color. The * in the opacity class is a value between 10 and 100, in increments of 10.
Example: Background color with opacity
<div class="bg-success bg-opacity-75 p-3">
This element has a success background color with 75% opacity.
</div>By using Bootstrap's background color classes and opacity classes, you can quickly apply nice and consistent background styles to elements in your web pages.
Background Gradients
Bootstrap has classes for making linear gradients as backgrounds for elements. To make a linear gradient, use the bg-gradient class with the style attribute to set the gradient colors and direction.
Example: Linear gradient from red to blue
<div class="bg-gradient p-3" style="background-color: #ff0000; background-image: linear-gradient(to right, #ff0000, #0000ff);">
This element has a linear gradient background from red to blue.
</div>You can change the gradient direction by using keywords like to right, to bottom, to left, to top, or by using angles like 45deg, 90deg, etc.
Example: Linear gradient at a 45-degree angle
<div class="bg-gradient p-3" style="background-color: #ff0000; background-image: linear-gradient(45deg, #ff0000, #0000ff);">
This element has a linear gradient background at a 45-degree angle.
</div>To make a gradient with many colors, you can add color stops in the linear-gradient() function. Color stops are points along the gradient line where a color is set.
Example: Linear gradient with multiple color stops
<div class="bg-gradient p-3" style="background-color: #ff0000; background-image: linear-gradient(to right, #ff0000, #00ff00 25%, #0000ff 50%, #ff00ff 75%, #ffff00);">
This element has a linear gradient background with multiple color stops.
</div>By combining the bg-gradient class with custom styles, you can make visually appealing and unique background gradients for your Bootstrap elements.
Background Images
Bootstrap has classes for setting background images on elements. To set a background image, use the bg-* class, where * is a keyword describing the image, and set the background-image property using the style attribute.
Example: Setting a background image
<div class="bg-image p-3" style="background-image: url('path/to/image.jpg');">
This element has a background image.
</div>You can control the size and position of the background image using additional CSS properties. The background-size property sets the size of the image, while the background-position property sets the starting position.
Example: Controlling size and position of background image
<div class="bg-image p-3" style="background-image: url('path/to/image.jpg'); background-size: cover; background-position: center;">
This element has a background image that covers the entire element and is centered.
</div>To make background images responsive, you can use the background-size property with the cover value. This scales the image to cover the entire element while maintaining its aspect ratio.
Example: Responsive background image
<div class="bg-image p-3" style="background-image: url('path/to/image.jpg'); background-size: cover;">
This element has a responsive background image that covers the entire element.
</div>You can also use media queries to change the background image based on the screen size. This lets you serve smaller images on mobile devices to improve page load times.
Example: Changing background image based on screen size
<div class="bg-image p-3" style="background-image: url('path/to/image-small.jpg');">
<style>
@media (min-width: 768px) {
.bg-image {
background-image: url('path/to/image-large.jpg');
}
}
</style>
This element has a responsive background image that changes based on screen size.
</div>By using Bootstrap's bg-* classes and CSS properties like background-size and background-position, you can easily set and change background images on elements. Adding responsiveness with the cover value and media queries makes your background images adapt to different screen sizes.
Utility Classes
Bootstrap has utility classes for controlling aspects of background images and colors. These classes can fine-tune the look of backgrounds on elements.
Background Clip
The bg-clip-* classes set how an element's background extends within its border box. The * can be:
| Value | Description |
|---|---|
border |
The background extends to the outside edge of the border. |
padding |
The background extends to the outside edge of the padding. |
content |
The background extends to the edge of the content box. |
Example: Background Clip
<div class="bg-info bg-clip-border p-3">
This element has a background clipped to the border box.
</div>
<div class="bg-info bg-clip-padding p-3">
This element has a background clipped to the padding box.
</div>
<div class="bg-info bg-clip-content p-3">
This element has a background clipped to the content box.
</div>Background Origin
The bg-origin-* classes set the background's origin position. The * can be:
| Value | Description |
|---|---|
border |
The background is positioned relative to the border box. |
padding |
The background is positioned relative to the padding box. |
content |
The background is positioned relative to the content box. |
Example: Background Origin
<div class="bg-warning bg-origin-border p-3">
This element has a background originating from the border box.
</div>
<div class="bg-warning bg-origin-padding p-3">
This element has a background originating from the padding box.
</div>
<div class="bg-warning bg-origin-content p-3">
This element has a background originating from the content box.
</div>Background Size
The bg-size-* classes set the size of the background image. The * can be:
| Value | Description |
|---|---|
auto |
The background image keeps its original size. |
cover |
The background image is sized to cover the entire element. |
contain |
The background image is sized to fit within the element. |
Example: Background Size
<div class="bg-image bg-size-auto" style="background-image: url('path/to/image.jpg');">
This element has a background image with its original size.
</div>
<div class="bg-image bg-size-cover" style="background-image: url('path/to/image.jpg');">
This element has a background image sized to cover the entire element.
</div>
<div class="bg-image bg-size-contain" style="background-image: url('path/to/image.jpg');">
This element has a background image sized to fit within the element.
</div>Background Repeat
The bg-repeat-* classes set how a background image is repeated. The * can be:
| Value | Description |
|---|---|
repeat |
The background image is repeated both vertically and horizontally. |
repeat-x |
The background image is repeated only horizontally. |
repeat-y |
The background image is repeated only vertically. |
no-repeat |
The background image is not repeated. |
Example: Background Repeat
<div class="bg-image bg-repeat" style="background-image: url('path/to/image.jpg');">
This element has a repeating background image.
</div>
<div class="bg-image bg-repeat-x" style="background-image: url('path/to/image.jpg');">
This element has a horizontally repeating background image.
</div>
<div class="bg-image bg-repeat-y" style="background-image: url('path/to/image.jpg');">
This element has a vertically repeating background image.
</div>
<div class="bg-image bg-no-repeat" style="background-image: url('path/to/image.jpg');">
This element has a non-repeating background image.
</div>These Bootstrap utility classes give you control over how backgrounds are shown on elements. By combining them with other background classes and custom styles, you can create various interesting and appealing background effects.
Responsive Backgrounds
Bootstrap makes it easy to change backgrounds based on the screen size using responsive utility classes. These classes let you apply different background styles at specific breakpoints, giving you control over how backgrounds appear on various devices.
To change a background based on the screen size, you can use breakpoint-specific background classes. These classes follow the format bg-{breakpoint}-{value}, where {breakpoint} is one of Bootstrap's breakpoints (e.g., sm, md, lg, xl) and {value} is the background style (e.g., primary, success, info).
Example
<div class="bg-primary bg-md-success bg-xl-info p-3">
This element has a primary background on small screens, a success background on medium screens, and an info background on extra-large screens.
</div>You can also combine responsive background classes with other background utility classes to create more complex responsive background styles.
Example
<div class="bg-light bg-md-dark bg-image bg-md-no-repeat p-3" style="background-image: url('path/to/image.jpg');">
This element has a light background color and a repeating background image on small screens, and a dark background color with a non-repeating background image on medium and larger screens.
</div>Tip
When using responsive background classes, keep in mind that the styles will apply to the specified breakpoint and up. This means that if you set a background style for the md breakpoint, it will apply to medium, large, and extra-large screens unless overridden by a higher breakpoint class.
By using Bootstrap's responsive background classes and combining them with other background utilities, you can create dynamic and adaptable backgrounds that change based on the screen size. This lets you optimize the look of your backgrounds for different devices and provide a better user experience across various screen sizes.
Accessibility Considerations
When using backgrounds in Bootstrap, keep accessibility in mind. This means making sure your background styles don't negatively impact the usability of your website for people with disabilities or impairments.
One key consideration is ensuring sufficient contrast between the background and foreground elements. If the contrast is too low, it can make the content hard to read, especially for users with visual impairments. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
Example
<div class="bg-light text-dark p-3">
This element has sufficient contrast between the light background and dark text.
</div>
<div class="bg-dark text-light p-3">
This element also has sufficient contrast with a dark background and light text.
</div>Another accessibility consideration is avoiding background-only indicators. This means not relying solely on background colors or images to convey important information or actions. Instead, use additional visual cues, like an icon or text label, and make sure the message is also communicated to assistive technologies.
Example
<div class="bg-danger p-3">
<i class="bi bi-exclamation-circle"></i>
<span class="visually-hidden">Error:</span>
This is an error message with a danger background color and an icon to indicate the error.
</div>When using background images, provide alternative text for users who can't see the images. This can be done using the alt attribute on the <img> tag if the image is an HTML element, or by using the aria-label attribute if the image is set using CSS.
Example
<div class="bg-image p-3" style="background-image: url('path/to/image.jpg');" aria-label="Description of the background image">
This element has a background image with alternative text provided using the aria-label attribute.
</div>By considering these accessibility factors when using backgrounds in Bootstrap, you can create more inclusive and usable designs that work well for all users, regardless of their abilities or the way they access your website.