Helper Classes

  • 3
    Notifications
    • user

      Emay Walter liked your post

      10 minutes ago
    • user

      Allie Gratershared your post

      5 hours ago
    • user

      Colin Sikcommented on your post

      yesterday
    • Check all
  • 2
    user
    Jane Cooper

    active

    • user

      Hello.how are you?

    • user

      Hi, i'm fine.what about you?

    • user

      I am facing js issue can you help me?

    • user

      Sure, i will help you.

  • 2
    Cart
    empty
    Oops! Your cart empty!!!
  • profile

    Wade Warren

    UI Designer
user

Wade Warren

UI Designer

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 yuri 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
.light-background

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

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