Background color
| Standard | On hover | Render |
|---|---|---|
.bg-body |
.bg-body-hover |
|
.bg-primary |
.bg-primary-hover |
|
.bg-secondary |
.bg-secondary-hover |
|
.bg-success |
.bg-success-hover |
|
.bg-info |
.bg-info-hover |
|
.bg-warning |
.bg-warning-hover |
|
.bg-danger |
.bg-danger-hover |
|
.bg-dark |
.bg-dark-hover |
|
.bg-light |
.bg-light-hover |
|
.bg-black |
.bg-black-hover |
|
.bg-white |
.bg-white-hover |
Background opacity
| Shortcuts | Primary color | Secondary color | Success color | Info color | Warning color | Danger color | Dark color | Light color | Black color |
|---|---|---|---|---|---|---|---|---|---|
.bg-10 |
|||||||||
.bg-20 |
|||||||||
.bg-30 |
|||||||||
.bg-40 |
|||||||||
.bg-50 |
|||||||||
.bg-60 |
|||||||||
.bg-70 |
|||||||||
.bg-80 |
|||||||||
.bg-90 |
White mask
To change the white opacity you can combine with .bg- from 10 to 90 (default 25%)
| Shortcuts | Render |
|---|---|
.bg-gw-top |
|
.bg-gw-bottom |
|
.bg-gw-start |
|
.bg-gw-end |
|
.bg-gw-radial |
Black mask
To change the mask opacity, combine with .bg- from 10 to 90 (default 25%)
| Shortcuts | Render |
|---|---|
.bg-gb-top |
|
.bg-gb-bottom |
|
.bg-gb-start |
|
.bg-gb-end |
|
.bg-gb-radial |
Gradients
| Shortcuts | Render |
|---|---|
.bg-tropical-sunset |
|
.bg-blue-lagoon |
|
.bg-strawberry-daiquiri |
|
.bg-mango-sorbet |
|
.bg-mint-mojito |
|
.bg-raspberry-ripple |
|
.bg-peach-bellini |
|
.bg-lavender-lemonade |
|
.bg-morning-dew |
|
.bg-coconut-dream |
Background angle
Combine this classes with opacity, white mask, black mask or gradient
| Shortcuts | Angle |
|---|---|
.bg-top |
0° |
.bg-top-left |
45° |
.bg-top-right |
225° |
.bg-bottom |
180° |
.bg-bottom-left |
135° |
.bg-bottom-right |
315° |
.bg-left |
90° |
.bg-right |
270° |