How to Create a Horizontal Divider in Bootstrap 4: The Official Method

TLDR: Bootstrap 4 provides a ready-made horizontal rule component that styles native <hr> elements with standardized margins, border colors, and opacity through the reboot stylesheet, requiring no additional CSS classes for basic functionality.

Bootstrap 4 streamlines the creation of visual separators by leveraging native HTML elements enhanced with systematic Sass variables. According to the twbs/bootstrap source code, the framework applies default styling to <hr> elements in scss/_reboot.scss, ensuring horizontal dividers automatically adapt to the current theme and respect customizable $hr-* variables.

The Official Implementation in _reboot.scss

The definitive source for Bootstrap 4's horizontal divider styling resides in scss/_reboot.scss at lines 68-73. This core stylesheet establishes the baseline appearance by setting margin-top, margin-bottom, border-top width, color, and opacity properties.

By defining these styles in the reboot module, Bootstrap ensures that every <hr> element inherits consistent spacing and theming capabilities without requiring framework-specific classes. The implementation uses Sass variables prefixed with $hr-*, allowing developers to customize divider aesthetics globally through the framework's variable overrides rather than targeting individual elements.

Customizing Dividers with Utility Classes

While the base styling requires no classes, Bootstrap 4 enables precise control through utility classes.

Spacing Utilities adjust vertical margins using classes like my-4 (adds 1.5rem top and bottom), my-5 (3rem), or responsive variants such as my-lg-3. You can also isolate margins with mt-0 or mb-4 for stacked layouts where asymmetric spacing is required.

Border Utilities modify divider colors using classes like border-primary, border-secondary, or border-dark to match theme colors without writing custom CSS. These utilities override the default border color while preserving the opacity and margin settings defined in the reboot stylesheet.

Practical Code Examples

The following examples demonstrate the official horizontal divider Bootstrap 4 patterns in common scenarios:

<!-- Basic horizontal divider with default reboot styling -->
<hr>

<!-- Divider with extra vertical spacing (1.5rem top and bottom) -->
<hr class="my-4">

<!-- Divider with custom top/bottom margins for stacked layouts -->
<hr class="mt-0 mb-4">

<!-- Divider with theme color applied -->
<hr class="border-primary my-3">

All examples work within any Bootstrap 4 layout system, including grid containers and flex utility wrappers, as they rely on the base reboot styles rather than component-specific positioning.

Summary

• Bootstrap 4 uses native <hr> elements as the official horizontal divider implementation.
• Default styles are defined in scss/_reboot.scss (lines 68-73) with configurable $hr-* Sass variables.
• No additional classes are required for basic functionality, as reboot styles apply automatically to all horizontal rules.
• Utility classes like my-4, border-primary, and responsive spacing variants enable customization without custom CSS.
• Dividers automatically adapt to theme changes including dark mode through CSS variable inheritance.

Frequently Asked Questions

Does Bootstrap 4 require a special class to create a horizontal divider?

No. Bootstrap 4 styles native <hr> elements automatically through the reboot stylesheet in scss/_reboot.scss at lines 68-73. The framework applies default margins, border colors, and opacity settings without requiring any CSS classes, though utility classes can be added for customization.

How do I change the color of a horizontal divider in Bootstrap 4?

Apply border color utilities to the <hr> element, such as border-primary, border-secondary, or border-dark. These classes override the default border color defined in the $hr-* variables while maintaining the reboot stylesheet's margin and opacity settings.

Where are the default horizontal rule styles defined in Bootstrap 4?

The default styles are defined in scss/_reboot.scss at lines 68-73 within the twbs/bootstrap repository. This file sets the margin-top, margin-bottom, border-top properties, and opacity values that control the visual appearance of all <hr> elements across the framework.

Can I adjust the vertical spacing of hr elements in Bootstrap 4?

Yes. Use spacing utilities such as my-4 (1.5rem vertical margin), my-5 (3rem), or responsive variants like my-lg-3. You can also isolate specific margins with mt-0 or mb-4 to control spacing in complex layouts without modifying the base reboot styles.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}