Bootstrap 5 Form Controls Sizing

Last Updated : 31 Jul, 2024

Bootstrap 5 Form controls Sizing gives textual form controls on <input>, <select>, and <textarea> elements with custom styles, sizing, focus states, and more.

Bootstrap 5 Form Controls Sizing Classes:

form-control-sm: This class is used to make the size of the form control small.
form-control-lg: This class is used to make the size of the form control large.

Syntax:

<input type="text" class="form-control 
                                  form-control-lg"/>

Example 1: In this example, we will use the form control sizing classes to show the different sizes of the text input.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5 Form Controls Sizing</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
        crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="m-4">
            <h3 class="text-success">
                GeeksforGeeks
            </h3>
            <h4>
                Bootstrap 5 From
                Controls Sizing
            </h4>
        </div>

        <h5>Default Sized Input</h5>
        <input type="text" class="form-control" 
            placeholder="Default Sized Input" />

        <h5>Large Sized Input</h5>
        <input type="text" 
            class="form-control form-control-lg" 
            placeholder="Large Sized Input" />

        <h5>Small Sized Input</h5>
        <input type="text" 
            class="form-control form-control-sm" 
            placeholder="Small Sized Input" />
    </div>
</body>

</html>

Output:

Example 2: In this example, we will use the form control sizing classes to show the different sizing of the select element.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5 Form Controls Sizing</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
        crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="m-4">
            <h3 class="text-success">
                GeeksforGeeks
            </h3>
            <h4>Bootstrap 5 From Controls Sizing</h4>
        </div>

        <h5>Default Sized Select Element</h5>
        <select class="form-control">
            <option value="ds">Data Structures</option>
            <option value="algo">Algorithm</option>
            <option value="os">Operating System</option>
            <option value="cd">Compiler Design</option>
        </select>

        <h5>Large Sized Select Element</h5>
        <select class="form-control form-control-lg">
            <option value="ds">Data Structures</option>
            <option value="algo">Algorithm</option>
            <option value="os">Operating System</option>
            <option value="cd">Compiler Design</option>
        </select>

        <h5>Small Sized Select Element</h5>
        <select class="form-control form-control-sm">
            <option value="ds">Data Structures</option>
            <option value="algo">Algorithm</option>
            <option value="os">Operating System</option>
            <option value="cd">Compiler Design</option>
        </select>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.2/forms/form-control/#sizing

Bootstrap 5 Form Controls Disabled

badalmishra28

Improve

Article Tags :

Bootstrap 5 Form Controls Sizing

Similar Reads

Forms

Form controls

Form Select

Form Checks and radios

Form Range

Form Input group

Form Floating labels

Form Validation

Thank You!

What kind of Experience do you want to share?