Loading...

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

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

Buy now !

### Helper Classes

##### Styled Borders

Use different styles of borders, like `border radius, border-color, and 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

    <div class="row g-3">
     <div class="col-xxl-3 col-sm-6">
       <div class="border-wrapper h-100 alert-light-light dark-helper">
         <h6 class="mb-3">Custom Border-radius Class</h6>
         <div class="helper-common-box">
           <div class="helper-box b-r-0 bg-light border"></div><span>b-r-0</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-1 bg-light border"></div><span>b-r-1</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-2 bg-light border"></div><span>b-r-2</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-3 bg-light border"></div><span>b-r-3</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-4 bg-light border"></div><span>b-r-4</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-5 bg-light border"></div><span>b-r-5</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-6 bg-light border"></div><span>b-r-6</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-7 bg-light border"></div><span>b-r-7</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-8 bg-light border"></div><span>b-r-8</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-9 bg-light border"></div><span>b-r-9</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box b-r-10 bg-light border"></div><span>b-r-10</span>
         </div>
       </div>
     </div>
     <div class="col-xxl-3 col-sm-6">
       <div class="border-wrapper h-100 alert-light-light dark-helper">
         <h6 class="mb-3">Border Color</h6>
         <div class="helper-common-box">
           <div class="helper-box border-primary border"></div><span>border-primary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-secondary border"></div><span>border-secondary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-success border"></div><span>border-success</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-danger border"></div><span>border-danger</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-warning border"></div><span>border-warning</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-info border"></div><span>border-info</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-dark border"></div><span>border-dark</span>
         </div>
       </div>
     </div>
     <div class="col-xxl-3 col-sm-6">
       <div class="border-wrapper h-100 alert-light-light dark-helper">
         <h6 class="mb-3">Border Width</h6>
         <div class="helper-common-box">
           <div class="helper-box border-1 border"> </div><span>border-1</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-2 border"> </div><span>border-2</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-3 border"> </div><span>border-3</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-4 border"> </div><span>border-4</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-5 border"> </div><span>border-5</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-6 border"> </div><span>border-6</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-7 border"> </div><span>border-7</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-8 border"> </div><span>border-8</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-9 border"> </div><span>border-9</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box border-10 border"> </div><span>border-10</span>
         </div>
       </div>
     </div>
     <div class="col-xxl-3 col-sm-6">
       <div class="border-wrapper alert-light-light h-100 dark-helper">
         <h6 class="mb-3">Text Colors</h6>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-primary">C </div><span>txt-primary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-secondary">C </div><span>txt-secondary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-success">C </div><span>txt-success</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-danger">C </div><span>txt-danger</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-warning">C </div><span>txt-warning</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-info">C </div><span>txt-info</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-dark">C </div><span>txt-dark</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box helper-text border txt-light bg-dark">C </div><span>txt-light</span>
         </div>
       </div>
     </div>
    </div>

##### Variation of 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

    <div class="row g-3">
     <div class="col-xl-4 col-sm-6">
       <div class="border-wrapper h-100 border">
         <h6 class="mb-3">Additive Border</h6>
         <div class="helper-common-box">
           <div class="helper-box bg-light border"></div><span>border</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border-top"></div><span>border-top</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border-bottom"></div><span>border-bottom</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border-start"></div><span>border-start</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border-end"></div><span>border-end</span>
         </div>
       </div>
     </div>
     <div class="col-xl-4 col-sm-6">
       <div class="border-wrapper h-100 border">
         <h6 class="mb-3">Subtractive Border</h6>
         <div class="helper-common-box">
           <div class="helper-box bg-light border border-0"> </div><span>border-0</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border border-top-0"> </div><span>border-top-0</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border border-end-0"> </div><span>border-end-0</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border border-bottom-0"> </div><span>border-bottom-0</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light border border-start-0"> </div><span>border-start-0</span>
         </div>
       </div>
     </div>
     <div class="col-xl-4 col-sm-12">
       <div class="border-wrapper h-100 border">
         <h6 class="mb-3">Additive Radius</h6>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded"></div><span>rounded</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-top"></div><span>rounded-top</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-end"></div><span>rounded-end</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-bottom"></div><span>rounded-bottom</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-start"></div><span>rounded-start</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-pill"></div><span>rounded-pill</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-circle"></div><span>rounded-circle</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-radius radius-wrapper rounded-0"></div><span>rounded-0</span>
         </div>
       </div>
     </div>
    </div>

##### Background Colors

Use any component in a theme, use the colors `bg-*` and `alert-light-*.`

###### Dark Backgrounds

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

    <div class="row g-3">
     <div class="col-xl-4 col-sm-6">
       <div class="border-wrapper h-100 border">
         <h6 class="mb-3">Dark Backgrounds</h6>
         <div class="helper-common-box">
           <div class="helper-box bg-primary"></div><span>bg-primary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-secondary"></div><span>bg-secondary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-success"></div><span>bg-success</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-danger"></div><span>bg-danger</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-warning"></div><span>bg-warning</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-info"></div><span>bg-info</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-dark"></div><span>bg-dark</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box bg-light"></div><span>bg-light</span>
         </div>
       </div>
     </div>
     <div class="col-xl-4 col-sm-6">
       <div class="border-wrapper h-100 border">
         <h6 class="mb-3">Light Backgrounds</h6>
         <div class="helper-common-box">
           <div class="helper-box alert-light-primary"> </div><span>alert-light-primary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-secondary"></div><span>alert-light-secondary</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-success"></div><span>alert-light-success</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-danger"></div><span>alert-light-danger</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-warning"></div><span>alert-light-warning</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-info"></div><span>alert-light-info</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-dark"></div><span>alert-light-dark</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box alert-light-light"></div><span>alert-light-light</span>
         </div>
       </div>
     </div>
     <div class="col-xl-4 col-sm-12">
       <div class="border-wrapper h-100 border">
         <h6 class="mb-3">Extended Background Colors</h6>
         <div class="helper-common-box">
           <div class="helper-box light-card"> </div><span>light-card</span>
         </div>
         <div class="helper-common-box">
           <div class="helper-box light-background border"></div><span>light-background</span>
         </div>
       </div>
     </div>
    </div>

##### Border Colors

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

    <div class="gradient-border">
     <div class="helper-common-box">
       <div class="helper-box b-primary border fill-wrapper"> </div><span>b-primary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-primary border fill-wrapper"> </div><span>b-t-primary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-primary border fill-wrapper"> </div><span>b-b-primary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-primary border fill-wrapper"> </div><span>b-l-primary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-primary border fill-wrapper"> </div><span>b-r-primary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-secondary border fill-wrapper"> </div><span>b-secondary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-secondary border fill-wrapper"> </div><span>b-t-secondary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-secondary border fill-wrapper"> </div><span>b-b-secondary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-secondary border fill-wrapper"> </div><span>b-l-secondary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-secondary border fill-wrapper"> </div><span>b-r-secondary</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-success border fill-wrapper"> </div><span>b-success</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-success border fill-wrapper"> </div><span>b-t-success</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-success border fill-wrapper"> </div><span>b-b-success</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-success border fill-wrapper"> </div><span>b-l-success</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-success border fill-wrapper"> </div><span>b-r-success</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-danger border fill-wrapper"> </div><span>b-danger</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-danger border fill-wrapper"> </div><span>b-t-danger</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-danger border fill-wrapper"> </div><span>b-b-danger</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-danger border fill-wrapper"> </div><span>b-l-danger</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-danger border fill-wrapper"> </div><span>b-r-danger</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-warning border fill-wrapper"> </div><span>b-warning</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-warning border fill-wrapper"> </div><span>b-t-warning</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-warning border fill-wrapper"> </div><span>b-b-warning</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-warning border fill-wrapper"> </div><span>b-l-warning</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-warning border fill-wrapper"> </div><span>b-r-warning</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-info border fill-wrapper"> </div><span>b-info</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-info border fill-wrapper"> </div><span>b-t-info</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-info border fill-wrapper"> </div><span>b-b-info</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-info border fill-wrapper"> </div><span>b-l-info</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-info border fill-wrapper"> </div><span>b-r-info</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-dark border fill-wrapper"> </div><span>b-dark</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-dark border fill-wrapper"> </div><span>b-t-dark</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-dark border fill-wrapper"> </div><span>b-b-dark</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-dark border fill-wrapper"> </div><span>b-l-dark</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-dark border fill-wrapper"> </div><span>b-r-dark</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-light border fill-wrapper"> </div><span>b-light</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-t-light border fill-wrapper"> </div><span>b-t-light</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-b-light border fill-wrapper"> </div><span>b-b-light</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-l-light border fill-wrapper"> </div><span>b-l-light</span>
     </div>
     <div class="helper-common-box">
       <div class="helper-box b-r-light border fill-wrapper"> </div><span>b-r-light</span>
     </div>
    </div>

##### Images Sizes

Use `img-h-*` & `img-*` for image height and border radius for use `rounded-* / b-r-* / and rounded-pill` for border-radius images.

    <div class="row g-3">
     <div class="col-12 helper-col-6">
       <div class="card-wrapper border rounded-3 h-100">
         <div class="gradient-border gap-3">
           <img class="img-30 img-h-30" src="../assets/images/blog/comment.jpg" alt="img-size-30">
           <img class="img-40 img-h-40" src="../assets/images/blog/comment.jpg" alt="img-size-40">
           <img class="img-50 img-h-50" src="../assets/images/blog/comment.jpg" alt="img-size-50">
           <img class="img-60 img-h-60" src="../assets/images/blog/comment.jpg" alt="img-size-60">
           <img class="img-70 img-h-70" src="../assets/images/blog/comment.jpg" alt="img-size-70">
           <img class="img-80 img-h-80" src="../assets/images/blog/comment.jpg" alt="img-size-80">
           <img class="img-90 img-h-90" src="../assets/images/blog/comment.jpg" alt="img-size-90">
           <img class="img-100 img-h-100" src="../assets/images/blog/comment.jpg" alt="img-size-100">
         </div>
       </div>
     </div>
     <div class="col-12 helper-col-6">
       <div class="card-wrapper border rounded-3 h-100">
         <div class="gradient-border gap-3">
           <img class="img-30 img-h-30 b-r-4" src="../assets/images/blog/comment.jpg" alt="img-size-30">
           <img class="img-40 img-h-40 rounded" src="../assets/images/blog/comment.jpg" alt="img-size-40">
           <img class="img-50 img-h-50 rounded-1" src="../assets/images/blog/comment.jpg" alt="img-size-50">
           <img class="img-60 img-h-60 rounded-2" src="../assets/images/blog/comment.jpg" alt="img-size-60">
           <img class="img-70 img-h-70 rounded-3" src="../assets/images/blog/comment.jpg" alt="img-size-70">
           <img class="img-80 img-h-80 rounded-4" src="../assets/images/blog/comment.jpg" alt="img-size-80">
           <img class="img-90 img-h-90 rounded-5" src="../assets/images/blog/comment.jpg" alt="img-size-90">
           <img class="img-100 img-h-100 rounded-pill" src="../assets/images/blog/comment.jpg" alt="img-size-100">
         </div>
       </div>
     </div>
    </div>

##### Font-style

Use 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

    <div class="card-body">
     <p class="f-s-normal">This is a<strong>f-s-normal</strong>font-style</p>
     <p class="f-s-italic">This is a<strong>f-s-italic</strong>font-style</p>
     <p class="f-s-oblique">This is a<strong>f-s-oblique</strong>font-style</p>
     <p class="f-s-initial">This is a<strong>f-s-initial</strong>font-style</p>
     <p class="f-s-inherit">This is a<strong>f-s-inherit</strong>font-style</p>
    </div>

##### Font Weight

Use 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

    <div class="card-body">
     <div class="helper-common-box">
       <div class="f-w-100">You can set light font weight heading f-w-100</div>
     </div>
     <div class="helper-common-box">
       <div class="f-w-300">You can set light font weight heading f-w-300</div>
     </div>
     <div class="helper-common-box">
       <div class="f-w-400">You can set light font weight heading f-w-400</div>
     </div>
     <div class="helper-common-box">
       <div class="f-w-600">You can set bolder font weight heading f-w-600</div>
     </div>
     <div class="helper-common-box">
       <div class="f-w-700">You can set bold font weight heading f-w-700</div>
     </div>
     <div class="helper-common-box">
       <div class="f-w-900">You can set bold font weight heading f-w-900</div>
     </div>
    </div>

##### Text Colors

Use text color for `font-*` classes.

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

    <div class="card-body txt-space">
     <div class="font-primary">This is a<strong>font-primary</strong>text used class as font-primary</div>
     <div class="font-secondary">This is a<strong>font-secondary</strong>text used class as font-secondary </div>
     <div class="font-success">This is a<strong>font-success</strong>text used class as font-success</div>
     <div class="font-danger">This is a<strong>font-danger</strong>text used class as font-danger</div>
     <div class="font-warning">This is a<strong>font-warning</strong>text used class as font-warning</div>
     <div class="font-info">This is a<strong>font-info</strong>text used class as font-info</div>
     <div class="font-dark">This is a<strong>font-dark</strong>text used class as font-dark</div>
    </div>

##### Padding

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

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

    <div class="border-wrapper h-100 alert-light-light dark-helper">
     <div class="helper-common-box helper-p-wrapper">
       <div class="helper-p-box p-10 bg-light border"><span>p-10</span></div>
       <div class="helper-p-box p-15 bg-light border"><span>p-15</span></div>
       <div class="helper-p-box p-20 bg-light border"><span>p-20</span></div>
       <div class="helper-p-box p-25 bg-light border"><span>p-25</span></div>
       <div class="helper-p-box p-30 bg-light border"><span>p-30</span></div>
       <div class="helper-p-box p-35 bg-light border"><span>p-35</span></div>
       <div class="helper-p-box p-40 bg-light border"><span>p-40</span></div>
       <div class="helper-p-box p-45 bg-light border"><span>p-45</span></div>
       <div class="helper-p-box p-50 bg-light border"><span>p-50</span></div>
     </div>
    </div>

##### Dashed Border

Use`b-width-*` and `border-s-dashed` to dashed border.

b-width-1
b-width-2
b-width-3

    <div class="helper-common-box helper-p-wrapper">
     <div class="border-common-box border-s-dashed b-width-1">b-width-1</div>
     <div class="border-common-box border-s-dashed b-width-2">b-width-2</div>
     <div class="border-common-box border-s-dashed b-width-3">b-width-3</div>
    </div>

##### Dotted Border

Use the`b-width-*` and `border-s-dotted` to dotted border.

b-width-1
b-width-2
b-width-3

    <div class="helper-common-box helper-p-wrapper">
     <div class="border-common-box border-s-dotted b-width-1">b-width-1</div>
     <div class="border-common-box border-s-dotted b-width-2">b-width-2</div>
     <div class="border-common-box border-s-dotted b-width-3">b-width-3</div>
    </div>

##### Groove Border

Use the`b-width-*` and `border-s-groove` to groove border.

b-width-1
b-width-2
b-width-3

    <div class="helper-common-box helper-p-wrapper">
     <div class="border-common-box border-s-groove b-width-1">b-width-1</div>
     <div class="border-common-box border-s-groove b-width-2">b-width-2</div>
     <div class="border-common-box border-s-groove b-width-3">b-width-3</div>
    </div>

##### Ridge Border

Use the`b-width-*` and `border-s-inset` to ridge border.

b-width-1
b-width-2
b-width-3

    <div class="helper-common-box helper-p-wrapper">
     <div class="border-common-box border-s-inset b-width-1">b-width-1</div>
     <div class="border-common-box border-s-inset b-width-2">b-width-2</div>
     <div class="border-common-box border-s-inset b-width-3">b-width-3</div>
    </div>

##### Only One Side Padding

Use 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

    <div class="row g-3">
     <div class="col-xxl-3 col-sm-6">
       <div class="border-wrapper h-100 alert-light-light dark-helper">
         <h6 class="mb-3">Padding Left</h6>
         <div class="common-p-box">
           <span>p-l-10</span>
           <span>p-l-15</span>
           <span>p-l-20</span>
           <span>p-l-25</span>
           <span>p-l-30</span>
           <span>p-l-35</span>
           <span>p-l-40</span>
           <span>p-l-45</span>
           <span>p-l-50</span>
         </div>
       </div>
     </div>
     <div class="col-xxl-3 col-sm-6">
       <div class="border-wrapper h-100 alert-light-light dark-helper">
         <h6 class="mb-3">Padding Right</h6>
         <div class="common-p-box">
           <span>p-r-10</span>
           <span>p-r-15</span>
           <span>p-r-20</span>
           <span>p-r-25</span>
           <span>p-r-30</span>
           <span>p-r-35</span>
           <span>p-r-40</span>
           <span>p-r-45</span>
           <span>p-r-50</span>
         </div>
       </div>
     </div>
     <div class="col-xxl-3 col-sm-6">
       <div class="border-wrapper h-100 alert-light-light dark-helper">
         <h6 class="mb-3">Padding Top</h6>
         <div class="common-p-box">
           <span>p-t-10</span>
           <span>p-t-15</span>
           <span>p-t-20</span>
           <span>p-t-25</span>
           <span>p-t-30</span>
           <span>p-t-35</span>
           <span>p-t-40</span>
           <span>p-t-45</span>
           <span>p-t-50</span>
         </div>
       </div>
     </div>
     <div class="col-xxl-3 col-sm-6">
       <div class="border-wrapper h-100 alert-light-light dark-helper">
         <h6 class="mb-3">Padding Bottom</h6>
         <div class="common-p-box">
           <span>p-b-10</span>
           <span>p-b-15</span>
           <span>p-b-20</span>
           <span>p-b-25</span>
           <span>p-b-30</span>
           <span>p-b-35</span>
           <span>p-b-40</span>
           <span>p-b-45</span>
           <span>p-b-50</span>
         </div>
       </div>
     </div>
    </div>

##### Margins

Use 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

    <div class="gradient-border">
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-10 border bg-light"></div>
       <span>m-10</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-15 border bg-light"></div>
       <span>m-15</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-20 border bg-light"></div>
       <span>m-20</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-25 border bg-light"></div>
       <span>m-25</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-30 border bg-light"></div>
       <span>m-30</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-35 border bg-light"></div>
       <span>m-35</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-40 border bg-light"></div>
       <span>m-40</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-45 border bg-light"></div>
       <span>m-45</span>
     </div>
     <div class="helper-common-box gap-0 mb-0">
       <div class="helper-box m-50 border bg-light"></div>
       <span>m-50</span>
     </div>
    </div>

##### Just One Side Margin

Use all around 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

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

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

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

    <div class="row g-3">
     <div class="col-xxl-3 col-sm-6">
       <div class="border-wrapper h-100 alert-light-light dark-helper">
         <h6 class="mb-3">Margin Left</h6>
         <div class="common-p-box">
           <span>m-l-10</span>
           <span>m-l-15</span>
           <span>m-l-20</span>
           <span>m-l-25</span>
           <span>m-l-30</span>
           <span>m-l-35</span>
           <span>m-l-40</span>
           <span>m-l-45</span>
           <span>m-l-50</span>
         </div>
       </div>
     </div>
     <div class="col-xxl-3 col-sm-6">
       <div class="border-wrapper h-100 alert-light-light dark-helper">
         <h6 class="mb-3">Margin Right</h6>
         <div class="common-p-box">
           <span>m-r-10</span>
           <span>m-r-15</span>
           <span>m-r-20</span>
           <span>m-r-25</span>
           <span>m-r-30</span>
           <span>m-r-35</span>
           <span>m-r-40</span>
           <span>m-r-45</span>
           <span>m-r-50</span>
         </div>
       </div>
     </div>
     <div class="col-xxl-3 col-sm-6">
       <div class="border-wrapper h-100 alert-light-light dark-helper">
         <h6 class="mb-3">Margin Top</h6>
         <div class="common-p-box">
           <span>m-t-10</span>
           <span>m-t-15</span>
           <span>m-t-20</span>
           <span>m-t-25</span>
           <span>m-t-30</span>
           <span>m-t-35</span>
           <span>m-t-40</span>
           <span>m-t-45</span>
           <span>m-t-50</span>
         </div>
       </div>
     </div>
     <div class="col-xxl-3 col-sm-6">
       <div class="border-wrapper h-100 alert-light-light dark-helper">
         <h6 class="mb-3">Margin Bottom</h6>
         <div class="common-p-box">
           <span>m-b-10</span>
           <span>m-b-15</span>
           <span>m-b-20</span>
           <span>m-b-25</span>
           <span>m-b-30</span>
           <span>m-b-35</span>
           <span>m-b-40</span>
           <span>m-b-45</span>
           <span>m-b-50</span>
         </div>
       </div>
     </div>
    </div>

##### Font Sizes

Use 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

    <div class="gradient-border">
     <div class="font-wrapper border">
       <div class="f-14">Font-size f-14</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-16">Font-size f-16</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-18">Font-size f-18</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-20">Font-size f-20</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-22">Font-size f-22</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-24">Font-size f-24</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-26">Font-size f-26</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-28">Font-size f-28</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-30">Font-size f-30</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-32">Font-size f-32</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-34">Font-size f-34</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-36">Font-size f-36</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-38">Font-size f-38</div>
     </div>
     <div class="font-wrapper border">
       <div class="f-40">Font-size f-40</div>
     </div>
    </div>