Background

List of Background Utility Classes included with Canvas.

Classes

Class Description
.bg-color

Applies the Current Theme Color (set in the css/colors.css|php File) as a Background Color on an Element.

Hover
Use .h-bg-color to apply this Background Color on Hover

.bg-primary

Applies the Bootstrap Primary Color as a Background Color on an Element.

Hover
Use .h-bg-primary to apply this Background Color on Hover

.bg-secondary

Applies the Bootstrap Secondary Color as a Background Color on an Element.

Hover
Use .h-bg-secondary to apply this Background Color on Hover

.bg-success

Applies the Bootstrap Success Color as a Background Color on an Element.

Hover
Use .h-bg-success to apply this Background Color on Hover

.bg-danger

Applies the Bootstrap Danger Color as a Background Color on an Element.

Hover
Use .h-bg-danger to apply this Background Color on Hover

.bg-warning

Applies the Bootstrap Warning Color as a Background Color on an Element.

Hover
Use .h-bg-warning to apply this Background Color on Hover

.bg-info

Applies the Bootstrap Info Color as a Background Color on an Element.

Hover
Use .h-bg-info to apply this Background Color on Hover

.bg-light

Applies the Bootstrap Light Color as a Background Color on an Element.

Hover
Use .h-bg-light to apply this Background Color on Hover

.bg-dark

Applies the Bootstrap Dark Color as a Background Color on an Element.

Hover
Use .h-bg-dark to apply this Background Color on Hover

.bg-transparent

Sets the background-color CSS property to transparent

.bg-ts

Applies Background Color Transitions on the Element

Ex:

<div class="bg-ts bg-primary h-bg-secondary">
	...
</div>

.bg-clip

Applies a Clip Effect of 1rem/16px on the Background CSS of the Element.

Sizes

  • .bg-clip-sm - Clip Effect Size of 0.5rem/8px
  • .bg-clip-lg - Clip Effect Size of 2rem/32px

Ex:

<div class="bg-light bg-clip">
	...
</div>

Last Modified: July 9, 2020