Split admin workflows and list sections with Bootstrap-native separators.
Use <hr> or Bootstrap's .vr helper to divide related content sections when spacing alone is not enough. A horizontal separator can split stacked blocks, while a vertical separator can divide compact inline groups in a flex row.
<hr>
.vr
Keep purely visual separators decorative for assistive technology. If the split introduces a new topic, form section, route group, or landmark, use a real heading, fieldset legend, or navigation label instead of relying on a line.
Bootstrap's horizontal rule inherits border color and opacity from the design system, while the .vr helper creates a vertical rule that stretches in the layout. Keep separator spacing local to the surrounding composition so the line supports rhythm without becoming a card-like frame.
Use a horizontal separator to split stacked content blocks.
1 2 3 4 5 6 7 8 9 10 11<div class="vstack gap-2"> <div> <div class="fw-medium">Current objective</div> <div class="text-body-secondary small">Finish release notes and confirm handoff criteria.</div> </div> <hr class="my-3" aria-hidden="true"> <div> <div class="fw-medium">Ownership check</div> <div class="text-body-secondary small">Billing controls stay reserved for the primary account owner.</div> </div> </div>
<div class="vstack gap-2"> <div> <div class="fw-medium">Current objective</div> <div class="text-body-secondary small">Finish release notes and confirm handoff criteria.</div> </div> <hr class="my-3" aria-hidden="true"> <div> <div class="fw-medium">Ownership check</div> <div class="text-body-secondary small">Billing controls stay reserved for the primary account owner.</div> </div> </div>
Use .vr inside compact flex layouts to separate adjacent inline sections.
1 2 3 4 5 6 7<div class="hstack align-items-center gap-3"> <span class="fw-medium">Draft</span> <div class="vr mx-1" role="separator" aria-orientation="vertical"></div> <span class="text-body-secondary">Review</span> <div class="vr mx-1" role="separator" aria-orientation="vertical"></div> <span class="text-body-secondary">Published</span> </div>
<div class="hstack align-items-center gap-3"> <span class="fw-medium">Draft</span> <div class="vr mx-1" role="separator" aria-orientation="vertical"></div> <span class="text-body-secondary">Review</span> <div class="vr mx-1" role="separator" aria-orientation="vertical"></div> <span class="text-body-secondary">Published</span> </div>
For vertical stacks, pair short labels with separators to mimic sidebar menu rhythm.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25<div class="d-grid gap-2"> <div> <div class="d-flex align-items-center gap-2"> <span class="fw-medium">Team</span> <div class="vr mx-2" aria-hidden="true"></div> <span class="text-body-secondary small">Invite members, manage roles.</span> </div> </div> <hr aria-hidden="true"> <div> <div class="d-flex align-items-center gap-2"> <span class="fw-medium">Settings</span> <div class="vr mx-2" aria-hidden="true"></div> <span class="text-body-secondary small">Security, integrations, and preferences.</span> </div> </div> <hr aria-hidden="true"> <div> <div class="d-flex align-items-center gap-2"> <span class="fw-medium">Support</span> <div class="vr mx-2" aria-hidden="true"></div> <span class="text-body-secondary small">Knowledge base, status, and contact path.</span> </div> </div> </div>
<div class="d-grid gap-2"> <div> <div class="d-flex align-items-center gap-2"> <span class="fw-medium">Team</span> <div class="vr mx-2" aria-hidden="true"></div> <span class="text-body-secondary small">Invite members, manage roles.</span> </div> </div> <hr aria-hidden="true"> <div> <div class="d-flex align-items-center gap-2"> <span class="fw-medium">Settings</span> <div class="vr mx-2" aria-hidden="true"></div> <span class="text-body-secondary small">Security, integrations, and preferences.</span> </div> </div> <hr aria-hidden="true"> <div> <div class="d-flex align-items-center gap-2"> <span class="fw-medium">Support</span> <div class="vr mx-2" aria-hidden="true"></div> <span class="text-body-secondary small">Knowledge base, status, and contact path.</span> </div> </div> </div>
Separate list rows when content stays in the same visual density.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16<div class="vstack gap-2"> <div class="d-flex justify-content-between gap-3"> <span class="fw-medium">Task 1</span> <span class="text-body-secondary">12 points</span> </div> <hr aria-hidden="true"> <div class="d-flex justify-content-between gap-3"> <span class="fw-medium">Task 2</span> <span class="text-body-secondary">8 points</span> </div> <hr aria-hidden="true"> <div class="d-flex justify-content-between gap-3"> <span class="fw-medium">Task 3</span> <span class="text-body-secondary">5 points</span> </div> </div>
<div class="vstack gap-2"> <div class="d-flex justify-content-between gap-3"> <span class="fw-medium">Task 1</span> <span class="text-body-secondary">12 points</span> </div> <hr aria-hidden="true"> <div class="d-flex justify-content-between gap-3"> <span class="fw-medium">Task 2</span> <span class="text-body-secondary">8 points</span> </div> <hr aria-hidden="true"> <div class="d-flex justify-content-between gap-3"> <span class="fw-medium">Task 3</span> <span class="text-body-secondary">5 points</span> </div> </div>
Use the same separator pattern when content is mirrored by direction.
1 2 3 4 5 6 7 8 9 10 11<div class="vstack gap-2" dir="rtl"> <div> <div class="fw-medium">الهدف الحالي</div> <div class="text-body-secondary small">أكمل ملاحظات الإصدار وتحقق من شروط التسليم.</div> </div> <hr class="my-3" aria-hidden="true"> <div> <div class="fw-medium">فحص الملكية</div> <div class="text-body-secondary small">تبقى إعدادات الفوترة مخصصة لمالك الحساب الرئيسي فقط.</div> </div> </div>
<div class="vstack gap-2" dir="rtl"> <div> <div class="fw-medium">الهدف الحالي</div> <div class="text-body-secondary small">أكمل ملاحظات الإصدار وتحقق من شروط التسليم.</div> </div> <hr class="my-3" aria-hidden="true"> <div> <div class="fw-medium">فحص الملكية</div> <div class="text-body-secondary small">تبقى إعدادات الفوترة مخصصة لمالك الحساب الرئيسي فقط.</div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11<div class="vstack gap-2" dir="rtl"> <div> <div class="fw-medium">המטרה הנוכחית</div> <div class="text-body-secondary small">סיים את הערות השחרור ובדוק דרישות הסיום.</div> </div> <hr class="my-3" aria-hidden="true"> <div> <div class="fw-medium">בדיקת בעלות</div> <div class="text-body-secondary small">הגדרות החיוב שמורות לבעל החשבון הראשי בלבד.</div> </div> </div>
<div class="vstack gap-2" dir="rtl"> <div> <div class="fw-medium">המטרה הנוכחית</div> <div class="text-body-secondary small">סיים את הערות השחרור ובדוק דרישות הסיום.</div> </div> <hr class="my-3" aria-hidden="true"> <div> <div class="fw-medium">בדיקת בעלות</div> <div class="text-body-secondary small">הגדרות החיוב שמורות לבעל החשבון הראשי בלבד.</div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11<div class="vstack gap-2" dir="ltr"> <div> <div class="fw-medium">Current objective</div> <div class="text-body-secondary small">Finish release notes and confirm handoff criteria.</div> </div> <hr class="my-3" aria-hidden="true"> <div> <div class="fw-medium">Ownership check</div> <div class="text-body-secondary small">Billing controls stay reserved for the primary account owner.</div> </div> </div>
<div class="vstack gap-2" dir="ltr"> <div> <div class="fw-medium">Current objective</div> <div class="text-body-secondary small">Finish release notes and confirm handoff criteria.</div> </div> <hr class="my-3" aria-hidden="true"> <div> <div class="fw-medium">Ownership check</div> <div class="text-body-secondary small">Billing controls stay reserved for the primary account owner.</div> </div> </div>
For Bootstrap's divider behavior and accessibility details, see the Bootstrap Vertical rule documentation.
No matching pages.
Restore the default appearance.