Grid options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
Colors |
Background Gradient |
Background Color |
Background Soft |
Border Colors |
Text Colors |
|||||
---|---|---|---|---|---|---|---|---|---|---|
Primary |
.bg-gradient
|
.bg-primary
|
.bg-soft-primary
|
.border-primary
|
.text-primary
|
text-primary
|
||||
Secondary |
.bg-gradient
|
.bg-secondary
|
.bg-soft-secondary
|
.border-secondary
|
.text-secondary
|
text-secondary
|
||||
Success |
.bg-gradient
|
.bg-success
|
.bg-soft-success
|
.border-success
|
.text-success
|
text-success
|
||||
Info |
.bg-gradient
|
.bg-info
|
.bg-soft-info
|
.border-info
|
.text-info
|
text-info
|
||||
Warning |
.bg-gradient
|
.bg-warning
|
.bg-soft-warning
|
.border-warning
|
.text-warning
|
text-warning
|
||||
Danger |
.bg-gradient
|
.bg-danger
|
.bg-soft-danger
|
.border-danger
|
.text-danger
|
text-danger
|
||||
Dark |
.bg-gradient
|
.bg-dark
|
.bg-soft-dark
|
.border-dark
|
.text-dark
|
text-dark
|
||||
Light |
.bg-gradient
|
.bg-light
|
.bg-soft-light
|
.border-light
|
.text-light
|
text-light
|
||||
Body |
-
|
-
|
-
|
-
|
-
|
-
|
-
|
-
|
.text-body
|
text-body
|
Muted |
-
|
-
|
-
|
-
|
-
|
-
|
-
|
-
|
.text-muted
|
text-muted
|
White |
-
|
-
|
-
|
-
|
-
|
-
|
-
|
-
|
.text-white
|
text-white
|
White-50 |
-
|
-
|
-
|
-
|
-
|
-
|
-
|
-
|
.text-white-50
|
text-white-50
|
Black-50 |
-
|
-
|
-
|
-
|
-
|
-
|
-
|
-
|
.text-black-50
|
text-black-50
|
Opacity-25 |
-
|
-
|
.opacity-25 |
|
-
|
-
|
-
|
-
|
.text-opacity-25
|
text-opacity-25
|
Opacity-50 |
-
|
-
|
.opacity-50 |
|
-
|
-
|
-
|
-
|
.text-opacity-50
|
text-opacity-50
|
Opacity-75 |
-
|
-
|
.opacity-75 |
|
-
|
-
|
-
|
-
|
.text-opacity-75
|
text-opacity-75
|
Opacity-100 |
-
|
-
|
.opacity-100 |
|
-
|
-
|
-
|
-
|
.text-opacity-100
|
text-opacity-100
|