Bootstrap 5Utilities

Bootstrap 5 Divider

The Bootstrap 5 divider is a reusable UI component that provides consistent styling and behaviour. Bootstrap provides built-in classes that handle the divider implementation, making it easy to add to any project without custom CSS.

Primary Class

.divider

Common Use Cases

→Adding divider to a page layout
→Customising divider with Bootstrap utility classes
→Responsive divider variants
→Divider accessibility and best practices

Variants & Classes

Variant	Description	Classes
Divider Default	Standard divider with Bootstrap's default styling.	`divider`
Divider Responsive	Responsive variant that adapts to different screen sizes.	`divider divider-responsive`

Code Example

<div class="divider">
  <!-- Divider content -->
</div>

Live Examples

Basic Divider

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated divider with custom colours
✓Divider with interactive states
✓Responsive divider for all screen sizes

Best Practices

Use Bootstrap's built-in divider classes

Bootstrap provides well-tested classes for divider that work across all browsers. Start with Bootstrap's defaults and customise as needed.

Test responsiveness

Always test divider across different screen sizes to ensure it behaves correctly on mobile, tablet, and desktop.

FAQ

How do I customise a Bootstrap 5 divider?

Use Bootstrap's utility classes or add custom CSS. Canvas Builder can generate divider with your brand colours automatically.

Is Divider accessible?

Bootstrap 5 divider components are built with accessibility in mind. Add aria-* attributes where needed and test with screen readers.