→ Aisha Bello
→ Vertical Stepper (Interactive)

Vertical Stepper (Interactive)

Stepper component with Navigation buttons

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 stepper

Tags: Steps

Author Aisha Bello

5.4k

v.5.3

Fork Fullscreen

<div class="steps-vertical">
    <div class="step-vertical complete">
        <div class="step-vertical-icon">
            <i class="fas fa-check"></i>
        </div>
        <div class="step-vertical-content">
            <h4>Account Created</h4>
            <p>Your account has been created successfully</p>
        </div>
    </div>
    <div class="step-vertical active">
        <div class="step-vertical-icon">
            <i class="fas fa-envelope"></i>
        </div>
        <div class="step-vertical-content">
            <h4>Verification Email</h4>
            <p>Please check your email to verify your account</p>
        </div>
    </div>
    <div class="step-vertical">
        <div class="step-vertical-icon">
            <i class="fas fa-cog"></i>
        </div>
        <div class="step-vertical-content">
            <h4>Setup Complete</h4>
            <p>Complete your profile setup</p>
        </div>
    </div>
</div>

<div class="controls">
    <button class="btn" onclick="previousStep()">Previous</button>
    <button class="btn" onclick="nextStep()">Next</button>
</div>

More Examples

Steps section

Author:
Ankit khedkar

1 year ago

6.7k

v.5.3
Horizontal Steps (Interactive)
Stepper component with Navigation buttons

Author:
Aisha Bello

9 months ago

5.2k

v.5.3
Steps Section
How it works section

Author:
Ankit khedkar

1 year ago

1.7k

v.5.3
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

1 year ago

6.7k

v.4.6
Parallax effect with image background

Author:
Anonymous

9 months ago

1.9k

v.4.6
Hidden Search Widget
Hidden Search Widget

Author:
Rami AlAjo

7 months ago

1k

v.4.6
Featured Product Card

Author:
Prajwal Hallale

1 year ago

1.9k

v.5.3
bootstrap 5 search box with icon Example
Dark Theme Search Bar Light Theme Search Bar Simple Iconic Search Bar

Author:
Arturo

9 months ago

3.4k

v.5.3
Card with background image

Author:
Nicholas

1 year ago

2.8k

v.4.6
Interactive Tag Cloud
With: Hover animations Click Effects Random rotation Count badges Smooth transitions

Author:
Kemaya m

9 months ago

1.6k

v.5.3
Hero Section with Animations
Interactive hero section with animated elements, key statistics, and modern styling

Author:
Isaac Winslow

10 months ago

5.3k

v.5.3
Responsive Products Grid

Author:
Ross Wille

1 year ago

2.9k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent