Primary Color
Back to top

Primary Palette Documetation

  1. Home
  2. Color Palette
  3. Primary

Primary

Primary Color Palette with color code and other elements.

Primary Background Color
Background Color Options Class Description
Background Color .bg-primary Primary Class for background color.
Lighten Color .bg-primary.bg-lighten-* For lighten primary background color, this two classes needed. Here *: 1,2,3,4 lighten primary color options.
Darken Color .bg-primary.bg-darken-* For darken primary background color, this two classes needed. Here *: 1,2,3,4 darken primary color options.
Accent Color .bg-primary.bg-accent-* For accent primary background color, this two classes needed. Here *: 1,2,3,4 accent primary color options.

Primary Border Color

Border Color Options Class Description
Border Color .border-primary Primary Class for background color.
Lighten Border .border-primary
.border-lighten-*		 For lighten primary background color, this two classes needed. Here *: 1,2,3,4 lighten primary color options.
Lighten Top Border .border-top-primary
.border-top-lighten-*		 For lighten primary top border. Use this classes if you need to highlight only top border.
Lighten Bottom Border .
.border-bottom-lighten-*		 For lighten primary bottom border. Use this classes if you need to highlight only bottom border.
Lighten Right Border .border-right-primary
.border-right-lighten-*		 For lighten primary right border. Use this classes if you need to highlight only right border.
Lighten Left Border .border-left-primary
.border-left-lighten-*		 For lighten primary left border. Use this classes if you need to highlight only left border.
Darken Border .border-primary
.border-darken-*		 For darken primary background color, this two classes needed. Here *: 1,2,3,4 darken primary color options.
Darken Top Border .border-top-primary
.border-top-darken-*		 For darken primary top border. Use this classes if you need to highlight only top border.
Darken Bottom Border .
.border-bottom-darken-*		 For darken primary bottom border. Use this classes if you need to highlight only bottom border.
Darken Right Border .border-right-primary
.border-right-darken-*		 For darken primary right border. Use this classes if you need to highlight only right border.
Darken Left Border .border-left-primary
.border-left-darken-*		 For darken primary left border. Use this classes if you need to highlight only left border.
Accent Border .border-primary
.border-accent-*		 For accent primary background color, this two classes needed. Here *: 1,2,3,4 accent primary color options.
Accent Top Border .border-top-primary
.border-top-accent-*		 For accent primary top border. Use this classes if you need to highlight only top border.
Accent Bottom Border .
.border-bottom-accent-*		 For accent primary bottom border. Use this classes if you need to highlight only bottom border.
Accent Right Border .border-right-primary
.border-right-accent-*		 For accent primary right border. Use this classes if you need to highlight only right border.
Accent Left Border .border-left-primary
.border-left-accent-*		 For accent primary left border. Use this classes if you need to highlight only left border.

Primary Text Color

Border Color Options Class Description
Text Color .primary Class for Primary Text color.
Lighten Color .primary.lighten-* For lighten primary text color, this two classes needed. Here *: 1,2,3,4 for lighten primary color options.
Darken Color .primary.darken-* For darken primary text color, this two classes needed. Here *: 1,2,3,4 for darken primary color options.
Accent Color .primary.accent-* For accent primary text color, this two classes needed. Here *: 1,2,3,4 for accent primary color options.

Reference :

Type URL
Classic Primary https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/vertical-menu-template/color-palette-primary.html
Material Primary https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/material-vertical-menu-template/color-palette-primary.html