Divider lines

Divider line helps break down chunky content into different sections, it also helps to improve a web page's accessibility and readability.

We've created a whole set of dividers, you can choose any designs to style up your web pages.

Available classes

By default, divider lines will expand to 100% width of its parent container.

Divider style

Class nameColourThicknessWidth
.divider-solid#be830e1px100%
.divider-gold#be830e3px100%
.divider-black#0000003px100%
.divider-white#ffffff3px100%

Width classes

You can adjust the width of the divider by adding width classes to the divider. You can use all pre-defined size classes ranging from 10% to 95% (with an increment of 5%), view more on the Width section. This class should be used only in conjunction with the divider class.

Class nameWidthDescription
.w1010%The divider line will have a width of 10% of its parent container.
.w1515%The divider line will have a width of 15% of its parent container.
.w2020%The divider line will have a width of 20% of its parent container.
.w2525%The divider line will have a width of 25% of its parent container.
.w3030%The divider line will have a width of 30% of its parent container.
.w3535%The divider line will have a width of 35% of its parent container.
.w4040%The divider line will have a width of 40% of its parent container.
.w4545%The divider line will have a width of 45% of its parent container.
.w5050%The divider line will have a width of 50% of its parent container.
.w5555%The divider line will have a width of 55% of its parent container.
.w6060%The divider line will have a width of 60% of its parent container.
.w6565%The divider line will have a width of 65% of its parent container.
.w7070%The divider line will have a width of 70% of its parent container.
.w7575%The divider line will have a width of 75% of its parent container.
.w8080%The divider line will have a width of 80% of its parent container.
.w8585%The divider line will have a width of 85% of its parent container.
.w9090%The divider line will have a width of 90% of its parent container.
.w9595%The divider line will have a width of 95% of its parent container.

Divider position

By default, the divider lines are left-aligned. By using the following classes, you can also centre/right align your divider lines.

Class namePositionDescription
.centercenterThis makes the divider center-aligned within its parent container.
.rightrightThis makes the divider right-aligned within its parent container.

Customisation

Horizonal rule <hr/>

Solid divider (divider thickness: 1px)

<div class="divider-solid"></div>

 
Divider colors

To use dividers for the headings. Use the below class, By default, the heading divider is full width with a thickness of 3px.

Gold divider for the heading:

<div class="divider-gold"></div>

 

Black divider for the heading:

<div class="divider-black"></div>

 

White divider for the heading:

<div class="divider-white"></div>

 
Divider widths

You can adjust the width of the divider by adding width classes to the divider. You can use all pre-defined size classes ranging from 10% to 95% (with increment of 5%), view more on width section . This class should be used only in conjunction with the divider class.

w20

<div class="divider-gold w20"></div>

 

w30

<div class="divider-gold w30"></div>

 

w40

<div class="divider-gold w40"></div>

 

w50

<div class="divider-gold w50"></div>

 

w60

<div class="divider-gold w60"></div>

 

w70

<div class="divider-gold w70"></div>

 

w80

<div class="divider-gold w80"></div>

 

Similarly you can use w20, w30, w40, w50, w60, w70 and w80 for black, white heading dividers and the solid divider.

If you are using the black background, please apply the white divider by using .divider-white

w20

<div class="divider-black w20"></div>

 

w30

<div class="divider-black w30"></div>

 

w40

<div class="divider-black w40"></div>

 

w50

<div class="divider-black w50"></div>

 

w60

<div class="divider-black w60"></div>

 

w70

<div class="divider-black w70"></div>

 

w80

<div class="divider-black w80"></div>

 
Divider position

You can center divider with an addon class center.

<div class="divider-gold center w20"></div>

 

<div class="divider-black center w20"></div>

 

<div class="divider-white center w20"></div>

 

You can right align the divider with an addon class right.

<div class="divider-gold right w20"></div>

 
 

<div class="divider-black right w20"></div>

 
 

<div class="divider-white right w20"></div>