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-warning This text represents some information.

bg-luxury 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

bga-warning

bga-luxury

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.

warning This text indicates success.

luxury 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

outline-warning with class d-inline-block

outline-luxury with class d-inline-block