Stepper



CSS styles for this component are based on the bs-stepper package found here - https://www.npmjs.com/package/bs-stepper

Basic markup

Example

General details

Address

Contact details

<div class="stepper-example">
    <div class="bs-stepper">
        <div class="bs-stepper-header" role="tablist">
        <div class="step" data-target="#step1">
            <button type="button" class="step-trigger" role="tab">
            <span class="bs-stepper-circle">1</span>
            <span class="bs-stepper-label">Step 1</span>
            </button>
        </div>
        <div class="bs-stepper-line"></div>
        <div class="step" data-target="#step2">
            <button type="button" class="step-trigger" role="tab">
            <span class="bs-stepper-circle">2</span>
            <span class="bs-stepper-label">Step 2</span>
            </button>
        </div>
        <div class="bs-stepper-line"></div>
        <div class="step" data-target="#step3">
            <button type="button" class="step-trigger" role="tab">
            <span class="bs-stepper-circle">3</span>
            <span class="bs-stepper-label">Step 3</span>
            </button>
        </div>
        </div>
        <div class="bs-stepper-content">
        <form onSubmit="return false">
            <div role="tabpanel" class="bs-stepper-pane" id="step1">
                <div class="card w-100">
                    <div class="card-body">            
                        <h4 class="card-title text-dark">General details</h4>
                        <div class="row">
                            <div class="col-12">
                                <label class="form-label small">Name</label>
                                <input class="form-control" />
                            </div>
                            <div class="col-12">
                                <label class="form-label small">Legal entity name</label>
                                <input class="form-control" />
                            </div>
                            <div class="col-12">
                                <label class="form-label small">Account manager</label>
                                <input class="form-control" />
                            </div>
                            <div class="col-12">
                                <label class="form-label small">Description</label>
                                <textarea class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="bs-stepper-pane" id="step2">
                <div class="card w-100">
                    <div class="card-body">
                        <h4 class="card-title text-dark">Address</h4>
                        <div class="row">
                            <div class="col-12">
                                <label class="form-label small">Address 1</label>
                                <input class="form-control" />
                            </div>
                            <div class="col-12">
                                <label class="form-label small">Address 2</label>
                                <input class="form-control" />
                            </div>
                            <div class="col-12">
                                <label class="form-label small">City</label>
                                <input class="form-control" />
                            </div>
                            <div class="col-12">
                                <label class="form-label small">Country</label>
                                <select class="form-control">
                                    <option>France</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="bs-stepper-pane" id="step3">
            <div class="card w-100">
                    <div class="card-body">
                        <h4 class="card-title text-dark">Contact details</h4>
                        <div class="row">
                            <div class="col-12">
                                    <label class="form-label small">Contact name</label>
                                    <input class="form-control" />
                            </div>
                            <div class="col-12">
                                    <label class="form-label small">Contact email</label>
                                    <input class="form-control" />
                            </div>
                            <div class="col-12">
                                    <label class="form-label small">Website URL</label>
                                    <input class="form-control" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        </div>
    </div>
    <div class="stepper-buttons">
        <button class="btn btn-primary stepper-previous-btn">back</button>
        <button class="btn btn-primary stepper-next-btn">next</button>
    </button>
</div>