Divider

Horizontal Solid Divider

Use divider-body-1 class for linear divider.

Primary
Secondary
Success
<div class="card-body main-divider">
   <div class="divider-body divider-body-1 divider-primary"> 
       <div class="divider-p-primary">
           <i class="fa fa-modx me-2 txt-primary f-20"></i>
           <span class="txt-primary">Primary</span>
       </div>
   </div>
   <div class="divider-body divider-body-1 divider-secondary"> 
       <div class="divider-p-secondary">
           <i class="fa fa-recycle me-2 txt-secondary f-20"></i>
           <span class="txt-secondary">Secondary </span>
       </div>
   </div>
   <div class="divider-body divider-body-1 divider-success"> 
       <div class="divider-p-success">
           <i class="fa fa-leaf me-2 txt-success f-20"></i>
           <span class="txt-success">Success</span>
       </div>
   </div>
</div>

Horizontal Dashed Divider

Use divider-body-2 class for dashed divider.

<div class="card-body main-divider">
   <div class="divider-body divider-body-2 divider-danger"> 
       <div class="divider-circle bg-light-danger">
           <i class="fa fa-heart txt-danger"></i>
       </div>
   </div>
   <div class="divider-body divider-body-2 divider-warning">
       <div class="divider-circle bg-light-warning">
           <i class="fa fa-star txt-warning"></i>
       </div>
   </div>
   <div class="divider-body divider-body-2 divider-success">
       <div class="divider-circle bg-light-success">
           <i class="fa fa-trophy txt-success"></i>
       </div>
   </div>
</div>

Horizontal Dotted Divider

Use divider-body-3 class for dotted divider.

Primary
Secondary
Warning
Info
Dark
<div class="card-body main-divider">
   <div class="divider-body divider-body-3 divider-primary">Primary</div>
   <div class="divider-body divider-body-3 divider-secondary">Secondary</div>
   <div class="divider-body divider-body-3 divider-warning">Warning</div>
   <div class="divider-body divider-body-3 divider-info">Info</div>
   <div class="divider-body divider-body-3 divider-dark">Dark</div>
</div>

Vertical Dashed Divider

Use vertical-divider and vertical-line class for dashed divider.

Primary

Secondary

Success

<div class="card-body main-divider">
   <div class="row g-sm-2 d-flex gy-4">
       <div class="col-sm-3 col-6">
           <div class="vertical-divider">
               <div class="vertical-line bg-primary"></div>
               <p class="my-2 border border-primary">Primary</p>
               <div class="vertical-line bg-primary"></div>
           </div>
       </div>
       <div class="col-sm-3 col-6">
           <div class="vertical-divider">
               <div class="vertical-line bg-secondary"></div>
               <p class="my-2 border border-secondary rounded-pill">Secondary</p>
               <div class="vertical-line bg-secondary"></div>
           </div>
       </div>
       <div class="col-sm-3 col-6">
           <div class="vertical-divider">
               <div class="vertical-line bg-warning"></div>
               <svg class="my-2 stroke-icon stroke-warning">
                   <use href="../assets/svg/icon-sprite.svg#stroke-social"></use>
               </svg>
               <div class="vertical-line bg-warning"></div>
           </div>
       </div>
       <div class="col-sm-3 col-6">
           <div class="vertical-divider">
               <div class="vertical-line bg-success"></div>
               <p class="my-2 txt-success">Success</p>
               <div class="vertical-line bg-success"></div>
           </div>
       </div>
   </div>
</div>

Vertical Dotted Divider

Use dotted-divider and vertical-line class for dotted divider.

Success

Warning

Dark

<div class="card-body main-divider">
   <div class="row g-sm-2 d-flex dotted-divider gy-4">
       <div class="col-sm-3 col-6">
           <div class="vertical-divider">
               <div class="vertical-line bg-success"></div>
               <p class="my-2 border border-success">Success</p>
               <div class="vertical-line bg-success"></div>
           </div>
       </div>
       <div class="col-sm-3 col-6">
           <div class="vertical-divider">
               <div class="vertical-line bg-warning"></div>
               <p class="my-2 border border-warning rounded-pill">Warning</p>
               <div class="vertical-line bg-warning"></div>
           </div>
       </div>
       <div class="col-sm-3 col-6">
           <div class="vertical-divider">
               <div class="vertical-line bg-danger"></div>
               <svg class="my-2 fill-icon fill-danger">
                   <use href="../assets/svg/icon-sprite.svg#fill-starter-kit"></use>
               </svg>
               <div class="vertical-line bg-danger"></div>
           </div>
       </div>
       <div class="col-sm-3 col-6">
           <div class="vertical-divider">
               <div class="vertical-line bg-dark"></div>
               <p class="my-2">Dark</p>
               <div class="vertical-line bg-dark"></div>
           </div>
       </div>
   </div>
</div>

Vertical Double Divider

Use double-divider and vertical-line class for double divider.

Secondary

Success

Warning

<div class="card-body main-divider">
   <div class="row g-sm-2 d-flex double-divider gy-4">
       <div class="col-sm-3 col-6">
           <div class="vertical-divider">
               <div class="vertical-line bg-secondary"></div>
               <p class="my-2 border border-secondary">Secondary</p>
               <div class="vertical-line bg-secondary"></div>
           </div>
       </div>
       <div class="col-sm-3 col-6">
           <div class="vertical-divider">
               <div class="vertical-line bg-success"></div>
               <p class="my-2 border border-success rounded-pill">Success</p>
               <div class="vertical-line bg-success"></div>
           </div>
       </div>
       <div class="col-sm-3 col-6">
           <div class="vertical-divider">
               <div class="vertical-line bg-dark"></div>
               <svg class="my-2 divider-dark-icon">
                   <use href="../assets/svg/icon-sprite.svg#project-target"></use>
               </svg>
               <div class="vertical-line bg-dark"></div>
           </div>
       </div>
       <div class="col-sm-3 col-6">
           <div class="vertical-divider">
               <div class="vertical-line bg-warning"></div>
               <p class="my-2 txt-warning">Warning</p>
               <div class="vertical-line bg-warning"></div>
           </div>
       </div>
   </div>
</div>

Animated Color divider

Use animated-line and animated-divider classes to create a linear animated divider.

Main Heading

This CSS divider embodies simplicity at its finest, yet it exudes an air of elegance and timelessness. Despite its minimalist design, it commands attention effortlessly. While the divider takes center stage in this arrangement, it seamlessly integrates with the overall aesthetic, allowing the backdrop image to shine through.

<div class="card-body linear-divider">
   <h5>Main Heading</h5>
   <div class="animated-divider animated-line"></div>
   <p class="mb-0 c-light">This CSS divider embodies simplicity at its finest, yet it exudes an air of elegance and timelessness. Despite its minimalist design, it commands attention effortlessly. While the divider takes center stage in this arrangement, it seamlessly integrates with the overall aesthetic, allowing the backdrop image to shine through. </p>
</div>

Horizontal Editable Divider

Use horizontal-variation and double-line-* classes to create a thickness divider.

Primary
Secondary
Success
Warning
Danger
Info
<div class="card-body main-divider horizontal-variation">
   <div class="divider linear-line double-line double-line-1" contenteditable="true">Primary</div>
   <div class="divider linear-line double-line double-line-2" contenteditable="true">Secondary</div>
   <div class="divider linear-line double-line double-line-3" contenteditable="true">Success</div>
   <div class="divider linear-line double-line double-line-4" contenteditable="true">Warning</div>
   <div class="divider linear-line double-line double-line-5" contenteditable="true">Danger</div>
   <div class="divider linear-line double-line double-line-6" contenteditable="true">Info</div>
</div>

Simple Horizontal Divider

Use divider-h-line class for horizontal divider.

<div class="card-body main-divider">
   <div class="divider-h-line bg-primary"></div>
   <div class="divider-h-line bg-secondary"></div>
   <div class="divider-h-line bg-success"></div>
   <div class="divider-h-line bg-info"></div>
   <div class="divider-h-line bg-warning"></div>
   <div class="divider-h-line bg-danger"></div>
   <div class="divider-h-line bg-dark"></div>
</div>

Simple Vertical Divider

Use vr class for vertical divider.

<div class="card-body main-divider">
   <div class="common-align">
       <div class="vr bg-primary"></div>
       <div class="vr bg-secondary"></div>
       <div class="vr bg-success"></div>
       <div class="vr bg-info"></div>
       <div class="vr bg-warning"></div>
       <div class="vr bg-danger"></div>
       <div class="vr bg-dark"></div>
   </div>
</div>