Aquileo | Bootstrap 5 Form Controls Sizing

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/bootstrap@5.2.3/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/bootstrap@5.2.3/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 Sizing

Explore