→ 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

3.1k

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

Horizontal Steps (Interactive)
Stepper component with Navigation buttons

Author:
Aisha Bello

5 months ago

2.7k

v.5.3
Steps section

Author:
Ankit khedkar

9 months ago

3.5k

v.5.3
Steps Section
How it works section

Author:
Ankit khedkar

10 months ago

983

v.5.3
Customer testimonials
modern and clean customer review section

Author:
Anonymous

5 months ago

1.2k

v.5.3
Footer example made with Bootstrap 5.3
Dark theme

Author:
Arturo

5 months ago

3.5k

v.5.3
Bootstrap 5 chat template

Author:
Andreas Müller

10 months ago

1.4k

v.5.3
HTML and JavaScript for Product Showcase Page
JavaScript: Pagination Handling: The script fetches images based on the current page and updates the pagination controls dynamically. Product Cards: Each product is displayed as a card with an image, title, description, and price

Author:
zobaidul kaziex

8 months ago

812

v.4.6
About us section

Author:
Kemaya m

1 year ago

872

v.4.6
Pricing cards

Author:
Prajwal Hallale

1 year ago

865

v.5.3
HTML, CSS, and Bootstrap. This approach will be purely HTML and CSS without any JavaScript.
HTML: Bootstrap Integration: Linked to Bootstrap CDN for styling. Form Structure: Contains input fields for name, email, and message, all within a card component. CSS: Background Gradient: Applied to the body for a visually appealing background. Card Styling: Rounded corners and padding for the card. Button Styling: Custom colors for the submit button, including hover effects. How to Use: Create an index.html file and copy the above code into it. Open the HTML file in your web browser to view the Contact Us form.

Author:
zobaidul kaziex

8 months ago

1.2k

v.4.6
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

8 months ago

4.9k

v.4.6
Auto-expanding Textarea

Author:
Anonymous

5 months ago

768

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent