→ 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

1.3k

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

Bootstrap tabs
tab navigation

Author:
Anonymous

1 year ago

15.8k

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

11 months ago

1.9k

v.4.6
FAQ accordion
The accordion component is a vertically stacked set of items

Author:
Prajwal Hallale

1 year ago

3.8k

v.5.3
Footer example made with Bootstrap 5.3
Dark theme

Author:
Arturo

7 months ago

5.2k

v.5.3
Interactive Star Rating
A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

Author:
Mason Ashford

8 months ago

8.3k

v.5.3
Bootstrap 5 shopping cart design
clean and beautiful shopping cart component

Author:
Valeria González

8 months ago

3k

v.5.3
Shopping cart design using Bootstrap 5
With order summary and promo code form

Author:
Kemaya m

1 year ago

13.2k

v.5.3
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

5 months ago

1.7k

v.4.6
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Anonymous

6 months ago

2k

v.5.3
Responsive Bento Grid Layout
Bento grid layout using Bootstrap 5 and custom CSS

Author:
Anonymous

10 months ago

1.1k

v.5.3
Card Layout
Using masonry in cards layout

Author:
almounkez

7 months ago

2.8k

v.5.3
Social media buttons
Beautiful and simple social media buttons

Author:
Maria Garcia

1 year ago

3.2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent