Helper Classes

  2. Ui Kits
  3. Helper Classes

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

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

Background Colors

Use the .bg-* and .alert-light-*colors in Boho 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-*.

img-size-10img-size-20img-size-30img-size-40img-size-50img-size-60img-size-70img-size-80img-size-90img-size-100

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

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