→ 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

430

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

1 month ago

348

v.5.3
Steps Section
How it works section

Author:
Ankit khedkar

6 months ago

419

v.5.3
Steps section

Author:
Ankit khedkar

4 months ago

745

v.5.3
Carousel

Author:
Anonymous

10 months ago

381

v.4.6
Pricing cards

Author:
Prajwal Hallale

10 months ago

374

v.5.3
Pricing Card
with the most popular tag

Author:
Sofia Petrova

6 months ago

444

v.5.3
Pulsing Button

Author:
Prajwal Hallale

10 months ago

657

v.5.3
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

4 months ago

3.3k

v.4.6
Testimonials Carousel
showcase user testimonials

Author:
Prajwal Hallale

10 months ago

445

v.5.3
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

1 month ago

249

v.5.3
Parallax effect with image background

Author:
Anonymous

1 month ago

233

v.4.6
Responsive Testimonials

Author:
Anonymous

6 months ago

401

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent