Colors | INSPINIA - Responsive Bootstrap 5 Admin Dashboard

Colors

Examples

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Colors on Bootstrap

Primary

Secondary

Success

Info

Warning

Danger

Purple

Dark

Light

Background Colors

Name	Background Color		Background Subtle		Background Gradient		Background Opacity
Primary	`.bg-primary`		`.bg-primary-subtle`		`.bg-primary .bg-gradient`		`.bg-primary .bg-opacity-25`
Secondary	`.bg-secondary`		`.bg-secondary-subtle`		`.bg-secondary .bg-gradient`		`.bg-secondary .bg-opacity-50`
Success	`.bg-success`		`.bg-success-subtle`		`.bg-success .bg-gradient`		`.bg-success .bg-opacity-75`
Info	`.bg-info`		`.bg-info-subtle`		`.bg-info .bg-gradient`		`.bg-info .bg-opacity-10`
Warning	`.bg-warning`		`.bg-warning-subtle`		`.bg-warning .bg-gradient`		`.bg-warning .bg-opacity-25`
Danger	`.bg-danger`		`.bg-danger-subtle`		`.bg-danger .bg-gradient`		`.bg-danger .bg-opacity-50`
Purple	`.bg-purple`		`.bg-purple-subtle`		`.bg-purple .bg-gradient`		`.bg-purple .bg-opacity-10`
Light	`.bg-light`		`.bg-light-subtle`		`.bg-light .bg-gradient`		`.bg-light .bg-opacity-75`
Dark	`.bg-dark`		`.bg-dark-subtle`		`.bg-dark .bg-gradient`		`.bg-dark .bg-opacity-10`

Text Colors & Link Colors

Name	Text Color		Text Emphasis		Text Opacity		Link Color
Primary	`.text-primary`	Primary Color Text	`.text-primary-emphasis`	Primary Emphasis Text	`.text-primary .text-opacity-50`	Primary Color Text	`.link-primary`	Primary Link
Secondary	`.text-secondary`	Secondary Color Text	`.text-secondary-emphasis`	Secondary Emphasis Text	`.text-secondary .text-opacity-75`	Secondary Color Text	`.link-secondary`	Secondary Link
Success	`.text-success`	Success Color Text	`.text-success-emphasis`	Success Emphasis Text	`.text-success .text-opacity-25`	Success Color Text	`.link-success`	Success Link
Info	`.text-info`	Info Color Text	`.text-info-emphasis`	Info Emphasis Text	`.text-info .text-opacity-50`	Info Color Text	`.link-info`	Info Link
Danger	`.text-danger`	Danger Color Text	`.text-danger-emphasis`	Danger Emphasis Text	`.text-danger .text-opacity-25`	Danger Color Text	`.link-danger`	Danger Link
Warning	`.text-warning`	Warning Color Text	`.text-warning-emphasis`	Warning Emphasis Text	`.text-warning .text-opacity-75`	Warning Color Text	`.link-warning`	Warning Link
Purple	`.text-purple`	Purple Color Text	`.text-purple-emphasis`	Purple Emphasis Text	`.text-purple .text-opacity-25`	Purple Color Text	`.link-purple`	Purple Link
Dark	`.text-dark`	Dark Color Text	`.text-dark-emphasis`	Dark Emphasis Text	`.text-dark .text-opacity-25`	Dark Color Text	`.link-dark`	Dark Link
Light	`.text-light`	Light Color Text	`.text-light-emphasis`	Light Emphasis Text	`.text-light .text-opacity-50`	Light Color Text	`.link-light`	Light Link
Body	`.text-body`	Body Color Text	`.text-body-emphasis`	Body Emphasis Text	-	-	-	-
Body	`.text-body-secondary`	Body Secondary Color	`.text-body-tertiary`	Body Tertiary Text	-	-	-	-
Black	`.text-black`	Black Color Text	`.text-black-50`	Black 50% Text	-	-	-	-
White	`.text-white`	White Color Text	`.text-white-50`	White 50% Text	-	-	-	-

Border Colors

Additive(Add) Border

Use border utilities to add an element’s borders. Choose from all borders or one at a time.

Subtractive(Remove) Border

Use border utilities to remove an element’s borders. Choose from all borders or one at a time.

Border Color

Change the border color using utilities built on our theme colors.

Border Width Size

Border Subtle Color

Change the border color using utilities built on our theme colors.

Border Opacity

choose from any of the .border-opacity utilities:

This is default accent border

This is 75% opacity accent border

This is 50% opacity accent border

This is 25% opacity accent border

This is 10% opacity accent border