→ Aisha Bello
→ Bootstrap 5 Section Dividers

Bootstrap 5 Section Dividers

8 divider examples

This bootstrap css example is contributed by Aisha Bello, on 20-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is HR

Tags: Divider

Author Aisha Bello

2.7k

v.5.3

Fork Fullscreen

<div class="container py-5">
    <h2 class="text-center mb-5">Bootstrap 5 Section Dividers</h2>

<div class="content-section">
        <h4>Text Divider</h4>
        <div class="divider">
            <div class="divider-text">
                <span>SECTION</span>
            </div>
        </div>
    </div>

<div class="content-section">
        <h4>Gradient Divider</h4>
        <div class="divider">
            <div class="divider-gradient"></div>
        </div>
    </div>

<div class="content-section">
        <h4>Wave Divider</h4>
        <div class="divider">
            <div class="divider-wave"></div>
        </div>
    </div>

<div class="content-section">
        <h4>Icon Divider</h4>
        <div class="divider">
            <div class="divider-icon">
                <i class="fas fa-star text-primary"></i>
            </div>
        </div>
    </div>

<div class="content-section">
        <h4>Double Line Divider</h4>
        <div class="divider">
            <div class="divider-double"></div>
        </div>
    </div>

<div class="content-section">
        <h4>Dashed Divider</h4>
        <div class="divider">
            <div class="divider-dashed"></div>
        </div>
    </div>

<div class="content-section">
        <h4>Angled Pattern Divider</h4>
        <div class="divider">
            <div class="divider-angled"></div>
        </div>
    </div>

<div class="content-section">
        <h4>Fade Divider</h4>
        <div class="divider">
            <div class="divider-fade"></div>
        </div>
    </div>
    
</div>

More Examples

Service Cards with Hover Effects
service showcase component featuring neuromorphic design cards with smooth hover effects, gradient accents, and responsive layout.

Author:
Alaric Sloane

1 year ago

3.7k

v.5.3
Login form with social login buttons

Author:
Juan Martinez

1 year ago

7.1k

v.5.3
CTA block
Beautiful CTA section with a form

Author:
Ross Wille

1 year ago

1.7k

v.4.6
Responsive image galary with tabs

Author:
Arturo

1 year ago

6.9k

v.5.3
Pricing Cards
Three pricing tiers (Basic, Pro, and Enterprise) using Bootstrap's card component.

Author:
Sofia Petrova

1 year ago

2.5k

v.5.3
Search Bar Examples with Boostrap 5

Author:
Riz Mohammad

1 year ago

6.4k

v.5.3
Interactive image carousel using Bootstrap 5
Full-width carousel with automatically sliding images

Author:
Prajwal Hallale

1 year ago

3.3k

v.5.3
Testimonial
with auto-scrolling testimonial cards

Author:
Sofia Petrova

1 year ago

6.8k

v.5.3
Pricing card
Product pricing card made with bootstrap 5

Author:
Omar Khaled

1 year ago

1.2k

v.5.3
Simple toast messages example
Four different types of toasts: Success (green) Error (red) Warning (yellow) Info (blue) Auto-dismisses after 3 seconds

Author:
Ankit khedkar

1 year ago

2.1k

v.5.3
Modern Dashboard Analytics Card
A sleek, modern dashboard component featuring animated metric cards with progress indicators and trend badges. Perfect for displaying key business metrics like revenue, users, and orders with visual progress tracking.

Author:
Alaric Sloane

1 year ago

4.4k

v.5.3
Bootstrap Footer example
dark footer

Author:
Anonymous

1 year ago

4.2k

v.3.4

Didn't find component you were looking for?

Search from 300+ componenent