→ 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

7.9k

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
How it works section

Author:
Ankit khedkar

1 year ago

2.4k

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

Author:
Aisha Bello

1 year ago

7.9k

v.5.3
Steps section

Author:
Ankit khedkar

1 year ago

9.2k

v.5.3
Error Page, you can use HTML, CSS, 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.

Author:
zobaidul kaziex

1 year ago

2.5k

v.4.6
slider card product

Author:
Juan Antonio González Hernández

1 month ago

170

v.5.3
Coming Soon Landing Page

Author:
Anonymous

1 year ago

3.4k

v.5.3
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
Anonymous

11 months ago

1.8k

v.5.3
Cookie Consent Banner Made with bootstrap
Fade from the bottom with options and persistent storage

Author:
Arturo

1 year ago

3.9k

v.5.3
Simple login form

Author:
Prajwal Hallale

2 years ago

8k

v.4.6
navbar
navbar 2 line

Author:
almounkez

1 year ago

1.9k

v.4.6
Clean hero section with image
tugas

Author:
Anonymous

8 months ago

1.2k

v.5.3
Pricing cards

Author:
Kemaya m

2 years ago

2.6k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent