Sometimes you need to separate the content visually, here are the options:
1
<hr />
1 2 3
<hr class="short" /> <hr class="tall" /> <hr class="taller" />
1 2 3 4
<hr class="solid tall" /> <hr class="dashed tall" /> <hr class="pattern tall" /> <hr class="pattern pattern-2 tall" />
1 2 3 4 5 6 7
<div class="divider"><em class="fas fa-chevron-down"></em></div> <div class="divider"><em class="fas fa-star"></em></div> <div class="divider"><em class="fas fa-bolt"></em></div> <div class="divider divider-solid"><em class="fas fa-chevron-down"></em></div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
<div class="divider"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-primary"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-secondary"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-tertiary"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-quaternary"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-2 taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-2 divider-primary taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-2 divider-secondary taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-2 divider-tertiary taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-2 divider-quaternary taller"> <em class="fas fa-chevron-down"></em> </div> <hr class="invisible" /> <div class="divider divider-style-3 divider-primary taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-3 divider-secondary taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-3 divider-tertiary taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-3 divider-quaternary taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-4 taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-4 divider-primary taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-4 divider-secondary taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-4 divider-tertiary taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-4 divider-quaternary taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider pattern divider-style-4 divider-quaternary taller"> <em class="fas fa-chevron-down"></em> </div>
<div class="divider divider-solid divider-style-4 taller"> <em class="fas fa-chevron-down"></em> </div>
1 2 3 4 5 6 7 8 9
<div class="divider divider-style-4 divider-icon-sm taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-4 taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-4 divider-icon-lg"> <em class="fas fa-chevron-down"></em> </div>
<div class="divider divider-solid divider-style-4 divider-left divider-icon-sm taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-solid divider-style-4 divider-icon-sm taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-solid divider-style-4 divider-icon-sm divider-right"> <em class="fas fa-chevron-down"></em> </div>
<div class="divider divider-style-4 divider-solid divider-xs divider-icon-sm taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-4 divider-solid divider-sm taller"> <em class="fas fa-chevron-down"></em> </div> <div class="divider divider-style-4 divider-solid divider-icon-lg"> <em class="fas fa-chevron-down"></em> </div>
<div class="divider divider-style-4 taller" data-appear-animation="bounceIn" data-appear-animation-delay="300"> <em class="fas fa-chevron-down"></em> </div>
Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
<div class="row"> <div class="col-md-4"> <div class="feature-box"> <div class="feature-box-icon"> <em class="fas fa-users"></em> </div> <div class="feature-box-info"> <h4 class="mb-sm">Customer Support</h4> <div class="divider divider-small"> <hr /> </div> <p class="tall">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p> </div> </div> </div> <div class="col-md-4"> <div class="featured-boxes featured-boxes-style-4"> <div class="featured-box featured-box-primary mt-none mb-none"> <div class="box-content"> <em class="icon-featured fas fa-user"></em> <h4>Loved by Customers</h4> <div class="divider divider-small divider-small-center"> <hr /> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p> </div> </div> </div> </div> <div class="col-md-4"> <div class="feature-box reverse"> <div class="feature-box-icon"> <em class="fas fa-users"></em> </div> <div class="feature-box-info"> <h4 class="mb-sm">Customer Support</h4> <div class="divider divider-small divider-small-right"> <hr /> </div> <p class="tall">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p> </div> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<div class="row"> <div class="col-md-4"> <h4 class="mt-lg">Colors</h4> <div class="divider divider-small"> <hr /> </div> <div class="divider divider-primary divider-small"> <hr /> </div> <div class="divider divider-secondary divider-small"> <hr /> </div> <div class="divider divider-tertiary divider-small"> <hr /> </div> <div class="divider divider-quaternary divider-small"> <hr /> </div> <div class="divider divider-light divider-small"> <hr /> </div> </div> <div class="col-md-4"> <h4 class="mt-lg">Spacements</h4> <div class="divider divider-small"> <hr /> </div> <div class="divider divider-small tall"> <hr /> </div> <div class="divider divider-small taller"> <hr /> </div> </div> <div class="col-md-4"> <h4 class="mt-lg">Sizes</h4> <div class="divider divider-small divider-small-sm"> <hr /> </div> <div class="divider divider-small"> <hr /> </div> <div class="divider divider-small divider-small-lg"> <hr /> </div> </div> </div>