Backgrounds

Colored

Please add the CSS classes in the boxes

bg-color-1
bg-color-2
bg-luxury
bg-color-gradient
bg-info
bg-success
bg-warning
bg-danger
bga-color-1
bga-color-2
bga-luxury
bg-light-grey
bga-info
bga-success
bga-warning
bga-danger
bg-dark
bg-grey
bga-dark
bga-grey
Outlined

Please add the CSS classes in the boxes

outline-color-1
outline-color-2
outline-luxury
outline-color-dark
outline-color-grey
outline-color-info
outline-color-success
outline-warning
outline-color-danger
outline-light-grey
Bordered Left

Please add the CSS classes in the boxes

bordered-left
bordered-left-color-2
bordered-left-info
bordered-left-success
bordered-left bga-color-1
bordered-left-color-2 bga-color-2
bordered-left-info bga-info
bordered-left-success bga-success
bordered-left-danger
bordered-left-warning
bordered-left-luxury
bordered-left-grey
bordered-left-danger bga-danger
bordered-left-warning bga-warning
bordered-left-luxury bga-luxury
bordered-left-grey bga-dark
Brightened

Please add the CSS classes in the boxes

bg-color-1 brightness-150
bg-color-1
bg-color-1 brightness-66
bg-color-1 brightness-33
Opacity

Please add the CSS classes in the boxes, opacity1-hover class is applied on all boxes below

bg-color-1 opacity03
bg-color-1 opacity05
bg-color-1 opacity07
bg-color-1 opacity1
Hover

You can add hover classes to any div to change the color on hover, try hovering on the classes below

  • Color: color-1-hover color-2-hover success-hover info-hover danger-hover dark-hover white-hover color-gradient-hover
  • Background Color: bg-color-1-hover bg-color-2-hover bg-black-hover bg-white-hover bg-dark-hover bg-danger-hover bg-success-hover bg-info-hover
  • Color & Background Color: bga-color-1-hover bga-color-2-hover bga-black-hover bga-white-hover bga-dark-hover bga-danger-hover bga-success-hover bga-info-hover
  • Shadow: You can add shadow on Hover shadow-hover shadow-2-hover shadow-3-hover shadow-4-hover
  • Brightness: You can add brightness on Hover brightness-150-hover brightness-100-hover brightness-66-hover brightness-33-hover
  • Opacity: You can add opacity on Hover opacity1-hover opacity03-hover opacity05-hover opacity07-hover

Next β†’
Next β†’

Built with love in Ukraine πŸ‡ΊπŸ‡¦ by Kim Majali, EITO team, and contributors.