Colors
Loading...
Customizer
Judia Builder
Choose your themes & layouts etc.
Select Layouts
Choose your layout.
Vertical
Horizontal
Color Scheme
Choose Light or Dark Scheme.
Light
Dark
Brand
Card Layout
Choose borderless or border layout.
Borderless
Border
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light, Dark or Brand Topbar Color.
Light
Dark
Brand
Topbar Images
Choose Topbar Images.
Background Colors Options
Use different 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
|