Divider

BsDivider is small and lightweight component which is primarily used to separate content within lists or layouts.

Usage Examples

The following is an example that demonstrate how to use the <bs-divider>.

List Item 1

---

List Item 2

---

List Item 3

Setting

Help

---

Exit

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-divider for better customization.

Updated in v2.2.0

.md-divider {
  --md-divider-color: oklch(0 0 0 / 0.15);
  --md-divider-height: 1px;
  --md-divider-margin-y: 0.25rem;
}

API Reference

Property	Type	Default	Description
dark	Boolean	false	Define explicitly when is placed inside element with dark background. Updated in v2.2.1
left-indent	Number|String		Indentation from left side. Numbers get converted to pixel. Any other value must include the units (such as px, em or rem).
right-indent	Number|String		Indentation from right side. Numbers get converted to pixel. Any other value must include the units (such as px, em or rem).
thickness	Number|String		Divider thickness. Numbers get converted to pixel. Any other value must include the units (such as px, em or rem).