Overview
										
										
										Separator is a custom component to used to device page blocks with space and visual line.
										
									 
									
									
									
										
										
										Basic
										
										
										Use
										.separatorclass to place a separator with border color and add vertical space with margin spacing classes as shown below:
										
										
										
											Some text goes here
											
Other text goes here
 
										
										
										
											
											
												
												
													
<div class="separator my-10"></div>
												 
											 
											
										 
										
									 
									
									
									
										
										
										Sizes
										
										
										
										
										
										
										
										
										
											
											
												
												
													
<div class="separator my-10"></div>
<div class="separator border-2 my-10"></div>
<div class="separator border-3 my-10"></div>
<div class="separator border-4 my-10"></div>
<div class="separator border-5 my-10"></div>
												 
											 
											
										 
										
									 
									
									
									
										
										
										Colors
										
										
										
										
										
										
										
										
										
											
											
												
												
													
<div class="separator border-white my-10"></div>
<div class="separator border-primary my-10"></div>
<div class="separator border-light my-10"></div>
<div class="separator border-secondary my-10"></div>
<div class="separator border-success my-10"></div>
<div class="separator border-info my-10"></div>
<div class="separator border-warning my-10"></div>
<div class="separator border-danger my-10"></div>
<div class="separator border-dark my-10"></div>
												 
											 
											
										 
										
									 
									
									
									
										
										
										Styles
										
										
										Add
										.separator-dottedand
										.separator-dashedclasses to change a separator's border style:
										
										
										
										
										
										
											
											
												
												
													
<div class="separator separator-dotted border-dark my-10"></div>
<div class="separator separator-dashed border-dark my-10"></div>
												 
											 
											
										 
										
									 
									
									
									
										
										
										Centered Content
										
										
										Add
										.separator-contentalong with any other separator classes and include any text/icon within the separator wrapper:
										
										
										
											
												Separator
												
													Title
												
												
													Long separator title label
												
												
												
													
												
												
													
												
											 
										 
										
										
										
											
											
												
												
													
<div class="separator separator-content my-15">Separator</div>
<div class="separator separator-dotted separator-content border-dark my-15"><span class="h1">Title</span></div>
<div class="separator separator-content border-dark my-15"><span class="w-250px fw-bolder">Long separator title label</span></div>
<div class="separator separator-dashed separator-content border-primary my-15">
    <span class="svg-icon svg-icon-1 svg-icon-primary">
        ...
    </span>
</div>
<div class="separator separator-dotted separator-content border-success my-15">
    <i class="bi bi-check-square text-success fs-2"></i>
</div>
<div class="separator separator-content border-danger my-15">
    <i class="fas fa-bomb text-danger fs-2"></i>
</div>