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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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

Asked on Sep 07, 2025

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.

Ask any question about Bootstrap here... and get an instant response.

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

Asked on Sep 07, 2025

Answer

The Q&A Network