Open In App

Bootstrap 5 Layout Horizontal form

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 21 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads