COLORS
Background Colors Options
Use diffrent color style to color your
element with a given table.
Background Color
.bg-primary
|
|
.bg-secondary
|
|
.bg-success
|
|
.bg-info
|
|
.bg-warning
|
|
.bg-danger
|
|
.bg-dark
|
|
.bg-light
|
|
.bg-body
|
Background Gradient
.bg-gradient
|
|
.bg-gradient
|
|
.bg-gradient
|
|
.bg-gradient
|
|
.bg-gradient
|
|
.bg-gradient
|
|
bg-gradient
|
|
.bg-gradient
|
Background Subtle
.bg-primary-subtle
|
|
.bg-secondary-subtle
|
|
.bg-success-subtle
|
|
.bg-info-subtle
|
|
.bg-warning-subtle
|
|
.bg-danger-subtle
|
|
.bg-dark-subtle
|
|
.bg-light-subtle
|
Background Opacity
.bg-opacity-10
|
|
.bg-opacity-25
|
|
.bg-opacity-50
|
|
.bg-opacity-75
|
|
.bg-opacity-100
|
Text Colors Options
Use diffrent color style to color your
element with a given table.
Text Color
.text-primary
|
text-primary
|
.text-primary-emphasis
|
text-primary-emphasis
|
.text-secondary
|
text-secondary
|
.text-secondary-emphasis
|
text-secondary-emphasis
|
.text-success
|
text-success
|
.text-success-emphasis
|
text-success-emphasis
|
.text-info
|
text-info
|
.text-info-emphasis
|
text-info-emphasis
|
.text-warning
|
text-warning
|
.text-warning-emphasis
|
text-warning-emphasis
|
.text-danger
|
text-danger
|
.text-danger-emphasis
|
text-danger-emphasis
|
.text-dark
|
text-dark
|
.text-dark-emphasis
|
text-dark-emphasis
|
.text-light
|
text-light
|
.text-light-emphasis
|
text-light-emphasis
|
.text-body
|
text-body
|
.text-body-emphasis
|
text-body-emphasis
|
.text-muted
|
text-muted
|
.text-body-secondary
|
text-body-secondary
|
.text-body-tertiary
|
text-body-tertiary
|
.text-black
|
text-black
|
.text-black-50
|
text-black-50
|
.text-white
|
text-white
|
.text-white-75
|
text-white-75
|
.text-white-50
|
text-white-50
|
Opacity & Text Opacity
.opacity-25
|
|
.opacity-50
|
|
.opacity-75
|
|
.opacity-100
|
|
.text-opacity-25
|
text-primary
|
.text-opacity-50
|
text-primary
|
.text-opacity-75
|
text-primary
|
.text-opacity-100
|
text-primary
|
Border Colors Options
Use diffrent color style to color your
element with a given table.
Border Color
.border-primary
|
|
.border-secondary
|
|
.border-success
|
|
.border-info
|
|
.border-warning
|
|
.border-danger
|
|
.border-dark
|
|
.border-light
|
|
.border-body
|
Background Subtle
.border-primary-subtle
|
|
.border-secondary-subtle
|
|
.border-success-subtle
|
|
.border-info-subtle
|
|
.border-warning-subtle
|
|
.border-danger-subtle
|
|
.border-dark-subtle
|
|
.border-light-subtle
|
|
.border-body-subtle
|
Background Opacity
.border-opacity-10
|
|
.border-opacity-25
|
|
.border-opacity-50
|
|
.border-opacity-75
|
|
.border-opacity-100
|
Steex Builder
Choose your themes & layouts etc.
Layout
Choose your layout
Vertical
Horizontal
Two Column
Theme
Choose your suitable Theme.
Default
Material
Creative
Minimal
Modern
Interaction
Color Scheme
Choose Light or Dark Scheme.
Light
Dark
Coming Soon
Brand
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light or Dark Topbar Color.