Contextual Text & Backgrounds

Contextual Backgrounds

You can color texts using the ready classes color-1, color-2, info, success, danger, dark, black, white. You can add the class d-inline-block to make text display inline block

bg-color-1 This text is important.

bg-color-2 This text is important.

bg-color-gradient This text is important.

bg-success This text indicates success.

bg-info This text represents some information.

bg-danger This text represents danger with d-inline-block.

bg-grey black on grey with d-inline-block.

bg-dark white on dark with d-inline-block.

bga-color-1

bga-color-2

bga-danger

bga-color-success

bga-color-info

bg-light-grey

bga-grey

bga-dark

Contextual text

You can color texts using the ready classes color-1, color-2, info, success, danger, dark, black, white

color-1 This text is important.

color-2 This text is important.

success This text indicates success.

info This text represents some information.

danger This text represents danger.

color-2 This text is important.

dark This text represents normal text.

Contextual text classes on hover

You can add color-hover classes to change the color on hover try hovering on the classes below color-1-hover color-2-hover success-hover info-hover danger-hover dark-hover white-hover color-gradient-hover

Outlined text

You can outine text using the ready classes outline-color-1, outline-color-2, outline-color-dark, outline-color-grey, outline-color-info, outline-color-success, outline-color-danger, outline-light-grey. You can add the class d-inline-block to make text display inline block.

outline-color-1

outline-color-1 with class d-inline-block

outline-color-2 with class d-inline-block

outline-color-success with class d-inline-block

outline-color-info with class d-inline-block

outline-color-danger with class d-inline-block

outline-color-dark with class d-inline-block