How to use Bootstrap 5.3 to style HTML forms

HTML forms are an essential part of any website, and they're often used to collect user input, such as contact information, login credentials, and survey responses. Bootstrap 5.3, the latest version of the popular open-source front-end framework, provides a number of useful classes for styling HTML forms. In this post, we'll take a look at how to use Bootstrap 5.3 to style HTML forms.

First, let's start by creating a basic form using Bootstrap's form classes. The basic structure of a Bootstrap form includes a form element, which acts as the container for the form's fields, and a set of input, select, and textarea elements, which are used to collect user input.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

In this example, we have a simple login form that includes an email input, a password input, and a submit button. The form-group class is used to create a container element for each input and its associated label, while the form-control class is used to apply the default form styling to the inputs. Additionally, the label and small tags are used to provide additional context to the inputs.

Bootstrap 5.3 also provides classes to create different types of inputs. For example, you can use the .form-check class to create a group of radio buttons or checkboxes.

<form>
  <div class="form-group">
    <label>Example select</label>
    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label>Example multiple select</label>
    <select multiple class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

In this example, we have two select elements, first one is a single select, and the second one is a multiple select. The form-control class is used to apply the default form styling to the selects, as well as providing additional functionality, such as the ability to select multiple options.

Bootstrap 5.3 also provides classes to create different styles for form inputs. For example, you can use the .form-control-plaintext class to create a plain text input, or the .form-control-lg and .form-control-sm classes to create larger or smaller inputs, respectively.

<form>
  <div class="form-group">
    <label for="exampleInputPlaintext">Plain Text Input</label>
    <input type="text" class="form-control-plaintext" id="exampleInputPlaintext" value="plain text input">
  </div>
  <div class="form-group">
    <label for="exampleInputLarge">Large Input</label>
    <input type="text" class="form-control form-control-lg" id="exampleInputLarge">
  </div>
  <div class="form-group">
    <label for="exampleInputSmall">Small Input</label>
    <input type="text" class="form-control form-control-sm" id="exampleInputSmall">
  </div>
</form>

In this example, we have a plain text input, a large input, and a small input. The plain text input uses the form-control-plaintext class to remove the background and border from the input.

Additionally, Bootstrap 5.3 also provides classes to add validation states and feedback to form inputs. For example, you can use the .is-valid and .is-invalid classes to indicate a valid or invalid input, respectively. You can also use the .valid-feedback and .invalid-feedback classes to provide feedback to the user.

<form>
  <div class="form-group">
    <label for="exampleInputValid">Valid input</label>
    <input type="text" class="form-control is-valid" id="exampleInputValid" required>
    <div class="valid-feedback">
      Input is valid!
    </div>
  </div>
  <div class="form-group">
    <label for="exampleInputInvalid">Invalid input</label>
    <input type="text" class="form-control is-invalid" id="exampleInputInvalid" required>
    <div class="invalid-feedback">
      Input is invalid!
    </div>
  </div>
</form>

In this example, we have a valid input and an invalid input, both with a required attribute. The valid input uses the is-valid class, which adds a green border to indicate a valid input, and the invalid input uses the is-invalid class, which adds a red border to indicate an invalid input. The feedback is also provided through the valid-feedback and invalid-feedback classes.

In conclusion, Bootstrap 5.3 provides a variety of useful classes for styling HTML forms. With the classes discussed in this post, you can create basic forms, different types of inputs, and validation states and feedbacks.