How do I add section dividers with borders and spacing utilities?

Asked on Sep 19, 2025

1 Answer

To add section dividers with borders and spacing in Bootstrap 5, you can utilize the border and spacing utility classes. These utilities allow you to easily style dividers between sections.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="section">
                <h2>Section 1</h2>
                <p>This is the content of section 1.</p>
            </div>
            <hr class="my-4 border-top border-secondary">
            <div class="section">
                <h2>Section 2</h2>
                <p>This is the content of section 2.</p>
            </div>
            <hr class="my-4 border-top border-secondary">
            <div class="section">
                <h2>Section 3</h2>
                <p>This is the content of section 3.</p>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `
` element is used to create a horizontal line as a divider.
The `my-4` class adds vertical margin to the top and bottom of the divider.
The `border-top` and `border-secondary` classes are used to style the border color and position.
You can adjust the margin and border color by changing the utility classes as needed.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions