Form Select in Bootstrap 5.3: Creating Dropdowns with Predefined Options

In Bootstrap 5.3, the form select component allows you to create styled dropdown menus with predefined options. It enhances the HTML <select> element by providing consistent styling, responsiveness, and additional features. Here's an explanation of how to use the form select component in Bootstrap 5.3

Create a select element: Start by creating an HTML select element using the <select> tag. For example

<select class="form-select">
    <option selected>Select Option</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

By applying the "form-select" and "form-control" classes, you can style the select element as a Bootstrap form control with a consistent appearance and responsiveness.

Bootstrap provides additional features and customization options for form selects, such as adding placeholder text, disabling or making the select read-only, adding validation states, and more. You can refer to the Bootstrap documentation for specific examples and usage instructions.

Ensure that you include the necessary Bootstrap CSS and JavaScript files in your project to properly apply the Bootstrap styles and functionalities to your form select components.

form-select Sizing

In Bootstrap 5.3, you can use sizing classes to adjust the size of form select elements. These classes allow you to make the select element smaller or larger based on your design needs. Here are the available sizing classes for form select in Bootstrap 5.3

.form-select-sm: This class can be used to create a smaller-sized form select element

<select class="form-select form-select-sm">
  <option selected>Select Option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

.form-select-lg: This class can be used to create a smaller-sized form select element

<select class="form-select form-select-lg">
  <option selected>Select Option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

By applying these sizing classes to your form select elements, you can control their visual appearance and fit them better within your layout.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Select in Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/base.css" />
  </head>
  <body>
    <div class="container my-5">
      <h5 class="text-danger mb-3">Form Select in Bootstrap</h5>
      <div class="row">
        <div class="col-lg-6 col-md-8">
          <!-- select option -->
          <p class="fw-semibold text-primary border-bottom border-primary py-3">Select in HTML</p>
          <div class="mb-3">
            <select>
              <option selected>Select Option</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Bootstrap Select</p>
          <select class="form-select">
            <option selected>Select Option</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Bootstrap Select Sizing</p>
          <div class="mb-3">
            <select class="form-select form-select-sm">
              <option selected>Select Option</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>
          <div class="mb-3">
            <select class="form-select">
              <option selected>Select Option</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>
          <div class="mb-3">
            <select class="form-select form-select-lg">
              <option selected>Select Option</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Bootstrap Select Multiple</p>
          <div class="mb-3">
            <select class="form-select" multiple>
              <option selected>Select Option</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Bootstrap Disabled Select</p>
          <div class="mb-3">
            <select class="form-select" disabled>
              <option selected>Select Option</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>

          <!--col end -->
        </div>
        <!--row end -->
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Live Preview