Dividers

Add class divider and divider-bottom to a <div>.

Add class pb-0 to the containing section to remove any bottom padding so the divider will sit flush with the bottom of the section.

The divider-bottom class is used to add back the space which was taken away by pb-0.

Add a matching color class to the div.divider and the next section to complete the illusion.

<section class="pb-0">
    <img class="bg-image" src="assets/img/blog/large-2.jpg" alt="Background Image" />
    <div class="divider divider-bottom bg-primary-3"></div>
</section>
<section class="bg-primary-3">
</section>

Add class divider and divider-top to a <div>. Add transform-flip-x to the div.divider to turn the graphic upside-down.

Add class pt-0 to the containing section to remove any top padding so the divider will sit flush with the top of the section.

The divider-top class is used to add back the space which was taken away by pt-0.

Add a matching color class to the div.divider and the previous section to complete the illusion.

<section class="bg-primary-3">
</section>
<section class="pt-0">
    <img class="bg-image" src="assets/img/case-studies/large-1.jpg" alt="Background Image" />
    <div class="divider divider-top transform-flip-x bg-primary-3"></div>
</section>

Add class divider and divider-side to a <div>. Add transform-flip-y to the div.divider to turn the graphic on its side.

Add a matching color class to the div.divider and the adjacent column to complete the illusion.

The containing <div.row> needs class no-gutters to prevent the divider being cut off at the side.

The d-none d-md-block combination ensures that the divider will be hidden on mobile when the two columns are stacked.

<div class="row no-gutters">
    <div class="col-md-6">
        <div class="min-vh-50"></div>
    </div>
    <div class="col-md-6">
        <div class="divider divider-side transform-flip-y d-none d-md-block"></div>
        <img class="img-fluid h-100" src="assets/img/sign-up.jpg" alt="Image">
    </div>
</div>

The default color for a divider is white.

It is advisable to add the same color class to the matching section to complete the illusion of the divider.

Add any of the background colors found in Jumpstart's Color Utility Classes or Bootstrap Color Utilities to change the color of the divider.