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

Edit in sandbox 
<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>