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
<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>