Bootstrap 5 Form Controls

Last Updated : 23 Jul, 2025

Form controls like <input>, <select>, <textarea> are the tags used to add custom styles, sizing, focus states to  input field, select item, and text-areas etc. Below are utilities of form control:

  • Sizing: This utility is used to set the label of the form input field in different sizes.
  • Disabled: This attribute is used to give it a grayed-out appearance and remove pointer events.
  • Readonly: This attribute is used to prevent modification of the input’s value.
  • Readonly plain text: Form Controls Readonly plain text is used to create a readonly input field as a plaintext. To create a plain text input field, we will use .form-control-plaintext class. This class removes the styling and preserves the correct margin and padding.
  • File input: This utility is used to browse the file from your computer.
  • Color: Bootstrap 5 Form Control Color is used to set the color in the color type input field. To create a color-type input field, type=”color” attribute is used in <input> element.
  • Datalists: Form controls datalists are used to create a group of options (group of <option> elements) that can be accessed by using an input element. It is similar to the <select> element but the difference is that it has more menu styling limitations and differences.

Example 1: Let's see an example of sizing.

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CDN  -->
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" 
          crossorigin="anonymous">
</head>

<body class="col-4 m-3">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>Bootstrap 5 Form Controls</h3>

    <input class="form-control mt-3 form-control-lg" 
           type="text" 
           placeholder="large size GFG">
    <input class="form-control mt-3"
            type="text"
           placeholder="Default size GFG">
    <input class="form-control mt-3 form-control-sm" 
           type="text"
           placeholder="small size GFG">
</body>

</html>

Output:

Example 2: Let's see an example of form control Datalists.

HTML 
<!DOCTYPE html>
<html>
<head>
    <!-- CSS only -->
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        crossorigin="anonymous">
</head>

<body class="col-6">
     <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>Bootstrap5 Controls</h3>
    <label class="form-label">
        Datalist
     </label>
    
<input class="form-control" 
       list="GFGOptions"
       placeholder="Select option">
    <datalist id="GFGOptions">
          <option value="apple">
          <option value="orange">
          <option value="onion">
          <option value="potato">
    </datalist>

</body>

</html>

Output:

Reference:https://getbootstrap.com/docs/5.0/forms/form-control/

Comment

Explore