Horizontal form

Bootstrap 5 Horizontal form component

Responsive Horizontal form built with Bootstrap 5. Easy way to create horizontal forms by using the grid.


Basic example

Example 1

Email

Password


Example 2


Example 3

Email

Password

Address

Address 2

City

Zip

        
            
                <form class="w-100" style="max-width: 650px;">
                    <!-- example 1 -->
                    <div class="mb-5">
                        <h4 class="mb-4">Example 1</h4>
                        <div class="row mb-3">
                            <div class="col-md-2 d-flex align-items-center">
                                <p class="mb-0 p-0">Email</p>
                            </div>
                            <div class="col-md-10">
                                <div data-mdb-input-init class="form-outline">
                                    <input type="email" id="typeEmail" class="form-control" />
                                    <label class="form-label" for="typeEmail">Email input</label>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-2 d-flex align-items-center">
                                <p class="mb-0 p-0">Password</p>
                            </div>
                            <div class="col-md-10">
                                <div data-mdb-input-init class="form-outline">
                                    <input type="password" id="typePassword" class="form-control" />
                                    <label class="form-label" for="typeEmail">Password input</label>
                                </div>
                            </div>
                        </div>
                        <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Sign in</button>
                    </div>
                    <!-- example 1 -->
                  <hr>
                    <!-- example 2 -->
                    <div class="my-5">
                        <h4 class="mb-4">Example 2</h4>
                        <div class="row">
                            <div class="col">
                                <div data-mdb-input-init class="form-outline">
                                    <input type="text" id="form12" class="form-control" />
                                    <label class="form-label" for="form12">First name</label>
                                </div>
                            </div>
                            <div class="col">
                                <div data-mdb-input-init class="form-outline">
                                    <input type="text" id="form12" class="form-control" />
                                    <label class="form-label" for="form12">Last name</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- example 2 -->
                    <hr>
                    <!-- example 3 -->
                    <div class="mt-5">
                        <h4 class="mb-4">Example 3</h4>
                        <!-- Grid row -->
                        <div class="row">
                            <!-- Grid column -->
                            <div class="col-6">
                                <p class="mb-0">Email</p>
                                <!-- Material input -->
                                <div class="input-group mb-3">
                                    <input type="email" class="form-control" id="inputEmail4MD" placeholder="Email" />
                                </div>
                            </div>
                            <!-- Grid column -->
    
                            <!-- Grid column -->
                            <div class="col-6">
                                <p class="mb-0">Password</p>
                                <!-- Material input -->
                                <div class="input-group mb-3">
                                    <input type="password" class="form-control" id="inputPassword4MD" placeholder="Password" />
                                </div>
                            </div>
                            <!-- Grid column -->
                        </div>
                        <!-- Grid row -->
    
                        <!-- Grid row -->
                        <div class="row">
                            <!-- Grid column -->
                            <div class="col-12">
                                <p class="mb-0">Address</p>
                                <!-- Material input -->
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" id="inputAddressMD" placeholder="1234 Main St" />
                                </div>
                            </div>
                            <!-- Grid column -->
    
                            <!-- Grid column -->
                            <div class="col-12">
                                <p class="mb-0">Address 2</p>
                                <!-- Material input -->
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" id="inputAddress2MD" placeholder="Apartment, studio, or floor" />
                                </div>
                            </div>
                            <!-- Grid column -->
                        </div>
                        <!-- Grid row -->
    
                        <!-- Grid row -->
                        <div class="row">
                            <!-- Grid column -->
                            <div class="col-6">
                                <p class="mb-0">City</p>
                                <!-- Material input -->
                                <div class="input-group mb-4">
                                    <input type="text" class="form-control" id="inputCityMD" placeholder="New York City" />
                                </div>
                            </div>
                            <!-- Grid column -->
    
                            <!-- Grid column -->
                            <div class="col-6">
                                <p class="mb-0">Zip</p>
                                <!-- Material input -->
                                <div class="input-group mb-4">
                                    <input type="text" class="form-control" id="inputZipMD" placeholder="11206-1117" />
                                </div>
                            </div>
                            <!-- Grid column -->
                        </div>
                        <!-- Grid row -->
                        <div class="d-flex justify-content-center">
                            <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-md">Sign in</button>
                        </div>
                    </div>
                    <!-- example 3 -->
                </form>