Dividers

Best Practices

• Use Dividers to separate content.
• Use Dividers sparingly and only when separating content.
• Major Dividers create strong separation between content. This could be between Form or content sections.
• Minor Dividers create weak separation between content. This could be between Form or content section with minor differences.
• If the divider is outside a white or gray box, but atop the background of the page, it goes edge-to-edge.
• If the divider is inside a white or gray box, it stays within the padding of the white or gray box.
• Top borders on Back and Forward Buttons go edge-to-edge.
• Borders on Components such as Large Progress Indicator typically go edge-to-edge.
• Add any my-x class to change top and bottom margin at the same time.
• Add any mt-x class to change top margin.
• Add any mb-x class to change bottom margin.

Usage

Major Divider

<hr class="major">

Minor Divider

<hr class="minor">

Resources

• Bootstrap Spacing Utilities