---
extends: _layouts.master
title: "Backgrounds"
---
# Backgrounds
|
.bg-light |
|
.bg-light-soft |
|
.bg-light-softer |
|
.bg-dark |
|
.bg-dark-soft |
|
.bg-dark-softer |
|
.bg-red |
|
.bg-red-light |
|
.bg-orange |
|
.bg-orange-light |
|
.bg-yellow-light |
|
.bg-amber |
|
.bg-amber-light |
|
.bg-yellow |
|
.bg-green |
|
.bg-green-light |
|
.bg-teal |
|
.bg-teal-light |
|
.bg-blue |
|
.bg-blue-light |
|
.bg-indigo |
|
.bg-indigo-light |
|
.bg-purple |
|
.bg-purple-light |
|
.bg-pink |
|
.bg-pink-light |
Using the utilities in HTML:
```html
```
Using the utilities in Less:
```less
div {
.bg-light;
.bg-light-soft;
.bg-light-softer;
.bg-light-softest;
.bg-dark;
.bg-dark-soft;
.bg-dark-softer;
.bg-dark-softest;
}
```
## Responsive
The background utitlies can also be used with responsive prefixes:
```html
```
```less
// Using the utilities in Less:
div {
.screen(lg, {
.bg-light;
});
}
```
## Custom backgrounds
How to generate custom background utilities:
```less
.define-text-color('primary';
default #3498db,
'light' #a0cfee,
'dark' #2980b9
;);
```
How to use custom background utilities:
```html
```
```less
// Using custom utilities in Less:
div {
.bg-primary;
.bg-primary-light;
.bg-primary-dark;
// Responsive example
.screen(lg, {
.bg-primary;
});
}
```