Colored
Please add the CSS classes in the boxes
bg-color-1
bg-color-2
bg-luxury
bg-danger
bg-info
bg-success
bg-warning
bg-black
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
Gradient
Please add the CSS classes in the boxes
bg-gradient
bg-gradient-info
bg-gradient-success
bg-gradient-danger
bg-gradient-warning
bg-gradient-luxury
bg-gradient-black
bg-gradient-white
Outlined
Please add the CSS classes in the boxes
outline-color-1
outline-color-2
outline-luxury
outline-color-dark
outline-grey
outline-info
outline-success
outline-warning
outline-danger
outline-light-grey
Bordered
- Add the class border to create a basic border or border-style that applies a border with the your style definition.
- Border Width:
- All Sides: border-0, border-2, border-4, border-8
- Top Border: border-t-0, border-t-2, border-t-4, border-t-8
- Right Border: border-r-0, border-r-2, border-r-4, border-r-8
- Bottom Border: border-b-0, border-b-2, border-b-4, border-b-8
- Left Border: border-l-0, border-l-2, border-l-4, border-l-8
- Horizontal Borders (Left & Right): border-h-0, border-h-2, border-h-4, border-h-8
- Vertical Borders (Top & Bottom): border-v-0, border-v-2, border-v-4, border-v-8
- Border Styles: border-solid, border-dashed, border-dotted, border-double
- Border Colors:
- Solid Colors: border-color-1, border-color-2, border-info, border-success, border-danger, border-warning, border-dark,
border-grey, border-light-grey, border-warning, border-luxury, border-white
- Transparent (Alpha) Colors: border-a-color-1, border-a-color-2, border-a-info, border-a-success, border-a-danger, border-a-warning, border-a-dark, border-a-grey, border-a-light-grey, border-a-warning, border-a-luxury, border-a-white
- Gradient Colors: border-gradient, border-gradient-info, border-gradient-success, border-gradient-danger,
border-gradient-warning, border-gradient-luxury, border-gradient-black, border-gradient-white
border border-color-1 border-l-8
border border-color-2 border-t-8
border border-info border-b-8
border border-success border-r-8
border border-danger border-h-4
border border-warning border-v-4
border border-a-color-1 border-2
border border-a-color-2 border-2
border border-a-info info border-4 border-dashed
border border-a-success border-8 border-dotted
border border-a-danger bga-danger border-double
border border-a-luxury bga-luxury border-dashed
border border-gradient
border border-gradient-info
border border-gradient-success
border border-gradient-danger
border border-gradient-warning
border border-gradient-luxury
border border-gradient-black
border border-gradient-white
Rounded
- Add the class rounded to create a basic rounding with half rem round-style that applies a rounding with the your style definition.
- Border Width:
- All Sides: rounded-1-4, rounded-1-8, rounded-0
- Top Border: rounded-t-0, rounded-t-4, rounded-t-8
- Right Border: rounded-r-0, rounded-r-4, rounded-r-8
- Bottom Border: rounded-b-0, rounded-b-4, rounded-b-8
- Left Border: rounded-l-0, rounded-l-4, rounded-l-8
- Circle: circle, circle-t, circle-r, circle-b, circle-l
Brightened
Please add the CSS classes in the boxes
- Brightened: brightness-150, brightness-100, brightness-90, brightness-80, brightness-66, brightness-33
- Brightened on hover: brightness-150-hover, brightness-100-hover, brightness-90-hover, brightness-80-hover, brightness-66-hover, brightness-33-hover
bg-color-1 brightness-150
bg-color-1 brightness-100
bg-color-1 brightness-80
bg-color-1 brightness-66
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
Width and height
- The Grid: Looking for responsive width use CSS vars Grid's system
- Relative to parent: It picks the width and height from its parent element
- Width: w-100, w-75, w-50, w-25
- Height: h-100, h-75, h-50, h-25
- Relative to view: It picks the width and height from the viewport
- Width: w-25-vw, w-33-vw, w-50-vw, w-66-vw, w-75-vw, w-100-vw
- Height: h-25-vh, h-33-vh, h-50-vh, h-66-vh, h-75-vh, h-100-vh
- Fixed by rem values
- Width: w-1rem, w-2rem, w-3rem, w-4rem, w-5rem, w-6rem, w-7rem, w-8rem
- Height: h-1rem, h-2rem, h-3rem, h-4rem, h-5rem, h-6rem, h-7rem, h-8rem
- Maxed by rem values
- Width: mw-1rem, mw-2rem, mw-3rem, mw-4rem, mw-5rem, mw-6rem, mw-7rem, mw-8rem
- Height: mh-1rem, mh-2rem, mh-3rem, mh-4rem, mh-5rem, mh-6rem, mh-7rem, mh-8rem
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
