Today, we will see how to use divider line in bootstrap 5. For this tutorial we see vertical divider line, horizontal line. Before we start first you need to setup bootstrap 5 project or you can read below article.
How to install & setup bootstrap 5
Bootstrap 5 Divider Line Example
1. Bootstrap 5 horizontal line using padding.
<div class="p-1 bg-primary w-100"></div>
<div class="p-1 bg-secondary w-100"></div>
<div class="p-1 bg-danger w-100"></div>
<div class="p-1 bg-success w-100"></div>
<div class="p-1 bg-dark w-100"></div>
bootstrap 5 divider line
2. Bootstrap 5 vertical divider line using vertical rule.
<div class="hstack gap-2">
<div class="card">
<div class="card-body">
Bootstrap 5 vertical divider line 1
</div>
</div>
<div class="vr"></div>
<div class="card">
<div class="card-body">
Bootstrap 5 vertical divider line 2
</div>
</div>
<div class="vr"></div>
<div class="card">
<div class="card-body">
Bootstrap 5 vertical divider line 3
</div>
</div>
</div>
bootstrap 5 divider line vertical
