# Dividers

Add the `.divider` element to a section as a decorative effect.

###

Bottom Divider

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>

`.divider`

  Add to a `<div>` to invoke a divider

`.divider-bottom`

  Add to a `<div.divider>` to add back the space which was removed by the `pb-0` class on the section

###

Top Divider

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>

`.divider`

  Add to a `<div>` to invoke a divider

`.divider-top`

  Add to a `<div.divider>` to add back the space which was removed by the `pt-0` class on the section

###

Side Divider

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>

`.divider`

  Add to a `<div>` to invoke a divider

`.divider-side`

  Add to a `<div.divider>` to invoke a side divider

###

Colors

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.

`.bg-primary`

  Apply to element to adjust background color

`.bg-primary-2`

  Apply to element to adjust background color

`.bg-primary-3`

  Apply to element to adjust background color

`.bg-primary-alt`

  Apply to element to adjust to a lightened background color

`.bg-primary-2-alt`

  Apply to element to adjust to a lightened background color

`.bg-primary-3-alt`

  Apply to element to adjust to a lightened background color

`.bg-body-color`

  Apply to element to give background the same value as `$body-color` variable.

`.bg-gradient`

  Apply to element to adjust to a lightened background color