Bootstrap 5 Layout Horizontal form
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.
HTML
<!DOCTYPE html><html> <head> <title>Bootstrap 5 Layout Horizontal form</title> rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 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.
HTML
<!DOCTYPE html><html> <head> <title>Bootstrap 5 Layout Horizontal form</title> rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 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
Please Login to comment...