• ENG
  • 2

    Cart

  • 4

    Notification View all

    • 30-04-2024Today
      Alice Goodwin

      Fashion should be fun. It shouldn't be labelled intellectual.

    • 28-06-20241 hour ago
      Herry Venter

      I am convinced that there can be luxury in simplicity.

    • 04-08-2024Today
      Loain Deo

      I feel that things happen for open new opportunities.

    • 12-11-2024Yesterday
      Fenter Jessy

      Sometimes the simplest things are the most profound.

  • Bookmark

  • 15

  • user
    Ava Davis

    Admin

Helper classes

  2. Ui Kits
  3. Helper classes

Borders

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

Additive Border
.border
.border-top
.border-bottom
.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

Borders Style

Use of any component to give the different styles of border using border-*radius/border-color/border-width class.

Custom Border-radius Class
.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-4
.rounded-5
Border Colors
.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
Text Colors
A
.text-primary
A
.text-secondary
A
.text-success
A
.text-danger
A
.text-warning
A
.text-info
A
.text-dark
A
.text-light

Background Colors

Using any component to add background color using .bg-* & .alert-light-* class.

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
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

Set different type of height & width using .img-* & .img-h-* class.

img-size-50img-size-60img-size-70img-size-90img-size-100

Font-Style

To set different font-style use .f-s-*[normal/italic/oblique/initial/inherit] class.

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-inherit font-style

Font Weight

Using .f-w-*[100/300/400/600/700/900] class set different font-weight.

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

Give the text color using .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-warning text used class as .font-warning
This is a font-danger text used class as .font-danger
This is a font-info text used class as .font-info

Font Sizes

Use .f-*[14/16/18..etc] class to add font-sizes.

Font-size .fs-6
Font-size .fs-5
Font-size .fs-4
Font-size .fs-3
Font-size .fs-2
Font-size .fs-1