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

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.

img-size-30img-size-40img-size-50img-size-60img-size-70img-size-80img-size-90img-size-100
img-size-30img-size-40img-size-50img-size-60img-size-70img-size-80img-size-90img-size-100 
<div class="row g-3">
 <div class="col-12"> 
   <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">
   <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-* 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
<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-10p-l-15p-l-20p-l-25p-l-30p-l-35p-l-40p-l-45p-l-50
Padding Right
p-r-10p-r-15p-r-20p-r-25p-r-30p-r-35p-r-40p-r-45p-r-50
Padding Top
p-t-10p-t-15p-t-20p-t-25p-t-30p-t-35p-t-40p-t-45p-t-50
Padding Bottom
p-b-10p-b-15p-b-20p-b-25p-b-30p-b-35p-b-40p-b-45p-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-10m-l-15m-l-20m-l-25m-l-30m-l-35m-l-40m-l-45m-l-50
Margin Right
m-r-10m-r-15m-r-20m-r-25m-r-30m-r-35m-r-40m-r-45m-r-50
Margin Top
m-t-10m-t-15m-t-20m-t-25m-t-30m-t-35m-t-40m-t-45m-t-50
Margin Bottom
m-b-10m-b-15m-b-20m-b-25m-b-30m-b-35m-b-40m-b-45m-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>