Bootstrap 5 Layout Horizontal form label sizing (original) (raw)

Last Updated : 18 Nov, 2022

Bootstrap 5 Layout Horizontal form label sizing is used to set the label of the form input field in different sizes. To set the label size, use the .col-form-label-sm or .col-form-label-lg class to or tag with the size of .form-control-lg and .form-control-sm.

Horizontal form label sizing used Classes:

• .col-form-label-sm: This class is used to set the size of the form label to small.
• .col-form-label-lg: This class is used to set the size of the form label to large.
• .form-control-sm: This class is used to set the size of the form control to small.
• .form-control-lg: This class is used to set the size of the form control to large.

Syntax:

Example 1: In this example, we will create horizontal form labels in different sizes.

HTML `

    <h2>Bootstrap5 Layout Horizontal form label sizing</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-lg">Password</label>
        <div class="col-lg">
            <input type="password" 
                class="form-control form-control-lg" 
                id="password"
                placeholder="Password"
                aria-label="Password">
        </div>
    </div>
</div>

`

Output:

Example 2: In this example, we will create horizontal form labels in different sizes.

HTML `

    <h2>Bootstrap5 Layout Horizontal form label sizing</h2>

    <div class="row">
        <label for="fname" class="col-sm-2 
            col-form-label col-form-label-sm">First Name</label>
        <div class="col-sm">
            <input type="text" class="form-control form-control-sm"
                id="fname"
                placeholder="First Name">
        </div>
    </div>

    <div class="row mt-4">
        <label for="lname" class="col-sm-2 
            col-form-label col-form-label-sm">Last Name</label>
        <div class="col-sm">
            <input type="text" class="form-control form-control-sm"
                id="lname"
                placeholder="Last Name">
        </div>
    </div>

    <div class="row mt-4">
        <label for="email" class="col-sm-2 
            col-form-label col-form-label">Email Id</label>
        <div class="col-sm">
            <input type="email" class="form-control form-control"
                id="email"
                placeholder="Last Name">
        </div>
    </div>

    <div class="row mt-4">
        <label for="mobile" class="col-sm-2 
            col-form-label col-form-label-lg">Mobile No</label>
        <div class="col-sm">
            <input type="tel" class="form-control form-control-lg"
                id="mobile"
                placeholder="Last Name">
        </div>
    </div>
</div>

`

Output:

Reference: https://getbootstrap.com/docs/5.0/forms/layout/#horizontal-form-label-sizing