Loading...

###### Don't Miss Out! Out new update has been release.

###### Something you love is now on sale!

Buy now !

#### Helper Classes

#### Styles in borders

Use the different styles of borders like: `border radius/border-color/border-width`. Use of any components.

###### Custom border-radius class

.b-r-0
.b-r-1
.b-r-2
.b-r-3
.b-r-4
.b-r-5
.b-r-6
.b-r-7
.b-r-8
.b-r-9
.b-r-10

###### Border color

.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-dark

###### Border-width

.border-1
.border-2
.border-3
.border-4
.border-5
.border-6
.border-7
.border-8
.border-9
.border-10

###### Text colors

C
.txt-primary
C
.txt-secondary
C
.txt-success
C
.txt-danger
C
.txt-warning
C
.txt-info
C
.txt-dark
C
.txt-light

#### Borders and displays

Use border utilities to add or remove an element's borders.

###### Additive border

.border
.border-top
.border-bottom
.border-start
.border-end

###### Subtractive border

.border-0
.border-top-0
.border-end-0
.border-bottom-0
.border-start-0

###### Additive radius

.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-pill
.rounded-circle
.rounded-0

#### Background colors

Use the `.bg-*` and `.alert-light-*` colors in cuba theme. Use of any components.

###### Dark background

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-dark
.bg-light

###### Light backgrounds

.alert-light-primary
.alert-light-secondary
.alert-light-success
.alert-light-danger
.alert-light-warning
.alert-light-info
.alert-light-dark
.alert-light-light

###### Extended background colors

.light-card
.light-background

#### Border color

Use the `.b-*/.b-t-*/.b-b-*/.b-l-*/.b-r-*` class for borders.

.b-primary
.b-t-primary
.b-b-primary
.b-l-primary
.b-r-primary
.b-secondary
.b-t-secondary
.b-b-secondary
.b-l-secondary
.b-r-secondary
.b-success
.b-t-success
.b-b-success
.b-l-success
.b-r-success
.b-danger
.b-t-danger
.b-b-danger
.b-l-danger
.b-r-danger
.b-warning
.b-t-warning
.b-b-warning
.b-l-warning
.b-r-warning
.b-info
.b-t-info
.b-b-info
.b-l-info
.b-r-info
.b-dark
.b-t-dark
.b-b-dark
.b-l-dark
.b-r-dark
.b-light
.b-t-light
.b-b-light
.b-l-light
.b-r-light

#### Images sizes

Use the width and height of images class like: `.img-*` and `.img-h-*`.

#### Font-style

Use the font-style like: `.f-s-*[normal/italic/oblique/initial/inherit]`.

This is a .f-s-normal font-style

This is a .f-s-italic font-style

This is a .f-s-oblique font-style

This is a .f-s-initial font-style

This is a .f-s-inherit font-style

#### Font weight

Use the font-weight classes like: `.f-w-* [100/300/400/600/700/900]`

You can set light font weight heading .f-w-100
You can set light font weight heading .f-w-300
You can set light font weight heading .f-w-400
You can set bolder font weight heading .f-w-600
You can set bold font weight heading .f-w-700
You can set bold font weight heading .f-w-900

#### Text colors

Use the text color for `.font-*` class.

This is a font-primary text used class as .font-primary
This is a font-secondary text used class as .font-secondary
This is a font-success text used class as .font-success
This is a font-danger text used class as .font-danger
This is a font-warning text used class as .font-warning
This is a font-info text used class as .font-info
This is a font-dark text used class as .font-dark

#### Padding

Use the padding classes like: `.p-* [10/15/20/25/30/35/40/45/50]`

###### Padding

.p-10
.p-15
.p-20
.p-25
.p-30
.p-35
.p-40
.p-45
.p-50

#### Only one side padding

Use the padding classes like: `.p-l-*/.p-r-*/.p-t-*/.p-b-*`

###### Padding Left

.p-l-10.p-l-15.p-l-20.p-l-25.p-l-30.p-l-35.p-l-40.p-l-45.p-l-50

###### Padding Right

.p-r-10.p-r-15.p-r-20.p-r-25.p-r-30.p-r-35.p-r-40.p-r-45.p-r-50

###### Padding Top

.p-t-10.p-t-15.p-t-20.p-t-25.p-t-30.p-t-35.p-t-40.p-t-45.p-t-50

###### Padding Bottom

.p-b-10.p-b-15.p-b-20.p-b-25.p-b-30.p-b-35.p-b-40.p-b-45.p-b-50

#### Margin

Use the margin classes like: `.m-* [10/15/20/25/30/35/40/45/50]`

.m-10
.m-15
.m-20
.m-25
.m-30
.m-35
.m-40
.m-45
.m-50

#### Only one side margin

Use the margin classes like: `.m-l-*/.m-r-*/.m-t-*/.m-b-*`

###### Margin Left

.m-l-10.m-l-15.m-l-20.m-l-25.m-l-30.m-l-35.m-l-40.m-l-45.m-l-50

###### Padding Right

.m-r-10.m-r-15.m-r-20.m-r-25.m-r-30.m-r-35.m-r-40.m-r-45.m-r-50

###### Padding Top

.m-t-10.m-t-15.m-t-20.m-t-25.m-t-30.m-t-35.m-t-40.m-t-45.m-t-50

###### Padding Bottom

.m-b-10.m-b-15.m-b-20.m-b-25.m-b-30.m-b-35.m-b-40.m-b-45.m-b-50

#### Font sizes

Use the font-size for `.f-* [14/16/18/20/22/24/26/28/30/32/34/36/38/40]`.

Font-size .f-14
Font-size .f-16
Font-size .f-18
Font-size .f-20
Font-size .f-22
Font-size .f-24
Font-size .f-26
Font-size .f-28
Font-size .f-30
Font-size .f-32
Font-size .f-34
Font-size .f-36
Font-size .f-38
Font-size .f-40