Bootstrap 5 Layout Horizontal form
Last Updated :
21 Nov, 2022
Improve
Bootstrap 5 Layout Horizontal form is used to create horizontal forms by using the .row class with .col-*-* classes to specify the width of your labels and controls. Also, use the .col-form-label class with <label> element to set the form label in vertically centered.
Layout Horizontal form used Classes:
- .row: This class is used to create the row of the form.
- .col-*-*: This class is used to create a grid column layout of the form.
Syntax:
<form>
<div class="row">
<label for="..." class="col-*-* col-form-label">...</label>
<div class="col-*-*">
<input type="..." class="form-control" id="...">
</div>
</div>
...
</div>
Example 1: In this example, we will create a horizontal form layout.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Layout Horizontal form</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Layout Horizontal form</h2>
<div class="row">
<label for="username" class="col-sm-2
col-form-label col-form-label-sm">Email</label>
<div class="col-sm">
<input type="text"
class="form-control form-control-sm"
id="username"
placeholder="Username/Email"
aria-label="Username/Email">
</div>
</div>
<br>
<div class="row">
<label for="password" class="col-sm-2
col-form-label col-form-label-sm">Password</label>
<div class="col-sm">
<input type="password"
class="form-control form-control-sm"
id="password"
placeholder="Password"
aria-label="Password">
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we will create a horizontal form layout.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Layout Horizontal form</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h2 class="text-center">
Bootstrap 5 Layout Horizontal form
</h2>
<form>
<div class="row">
<label for="fname" class="col-sm-2
col-form-label">First Name</label>
<div class="col-sm">
<input type="text" class="form-control"
id="fname" placeholder="First Name">
</div>
</div>
<div class="row mt-4">
<label for="lname" class="col-sm-2
col-form-label">Last Name</label>
<div class="col-sm">
<input type="text" class="form-control"
id="lname" placeholder="Last Name">
</div>
</div>
<div class="row mt-4">
<label for="email" class="col-sm-2
col-form-label">Email Id</label>
<div class="col-sm">
<input type="email" class="form-control"
id="email" placeholder="Last Name">
</div>
</div>
<div class="row mt-4 mb-4">
<label for="mobile" class="col-sm-2
col-form-label">Mobile No</label>
<div class="col-sm">
<input type="tel" class="form-control"
id="mobile" placeholder="Last Name">
</div>
</div>
<fieldset class="row">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm">
<div class="form-check">
<input class="form-check-input" type="radio"
name="gender" id="male" value="option1"
checked>
<label class="form-check-label" for="male">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
name="gender" id="female" value="option2">
<label class="form-check-label" for="female">
Female
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
name="gender" id="others" value="option3">
<label class="form-check-label" for="others">
Others
</label>
</div>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/layout/#horizontal-form
