Bootstrap - Form Control

Types of Form Control Elements

Bootstrap provides a range of form control elements that let you collect user input in a structured way. Here are the different types of form control elements in Bootstrap.

Input Fields

Input fields are common form control elements. They let users input text, numbers, and other data. Bootstrap supports these types of input fields:

  • Text input: For entering plain text.
  • Password input: For entering passwords. The entered characters are hidden for security.
  • Email input: For entering email addresses. It checks the input format.
  • Number input: For entering numbers. It provides increment and decrement buttons.
  • Telephone input: For entering telephone numbers.
  • Date input: For entering dates using a date picker.
  • Time input: For entering time values.
  • URL input: For entering URLs (web addresses).

Text Area

Text areas are used for entering multi-line text input. They provide a larger input area than single-line input fields. You can control the size of a text area using the rows and cols attributes.

Example of Text Area

<textarea rows="4" cols="50"></textarea>

Checkboxes and Radio Buttons

Checkboxes and radio buttons let users select one or more options from a set of choices.

  • Checkboxes: Used when multiple options can be selected. Each checkbox works independently.
  • Radio buttons: Used when only one option can be selected from a group. Selecting one radio button deselects others in the same group.

Example of Checkbox

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

Example of Radio Button

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

Select Dropdowns

Select dropdowns let users select one or more options from a list.

  • Single select dropdown: Lets users select a single option from a dropdown list.
  • Multiple select dropdown: Lets users select multiple options by holding the Ctrl (Windows) or Command (Mac) key while clicking.

Example of Single Select Dropdown

<select class="form-select" aria-label="Default select example">
  <option selected>Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Example of Multiple Select Dropdown

<select multiple class="form-select" aria-label="multiple select example">
  <option selected>Select multiple options</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

File Input

File input elements let users select and upload files from their device. Bootstrap provides styling for file input elements to make them look consistent with other form controls.

Example of File Input

<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>

Submit and Reset Buttons

Form control also includes buttons for submitting and resetting form data.

  • Submit button: Used to submit the form data to the server for processing.
  • Reset button: Used to reset all form fields to their default values, clearing any user input.

These buttons are usually placed at the end of the form and are styled using Bootstrap's button classes.

Example of Submit and Reset Buttons

<div>
  <button type="submit" class="btn btn-primary">Submit</button>
  <button type="reset" class="btn btn-secondary">Reset</button>
</div>

Styling Form Control Elements

Bootstrap has CSS classes that you can apply to form control elements to style them consistently with the overall Bootstrap design. You can also customize the form control styles using your own CSS.

Applying Bootstrap Classes to Form Control Elements

Bootstrap has predefined classes that you can add to your form control elements to apply default styling. Here are some commonly used classes:

  • .form-control: Applies basic styling to input fields, text areas, and select dropdowns. It sets padding, font size, line height, and border styles.

Example: Form Control Input

<input type="text" class="form-control" placeholder="Enter your name">
  • .form-check-input: Applies styling to checkboxes and radio buttons. It changes their appearance to match Bootstrap's design.

Example: Form Check Input

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="exampleCheck">
  <label class="form-check-label" for="exampleCheck">
    Check me out
  </label>
</div>
  • .form-select: Applies styling to select dropdowns, giving them a consistent appearance with other form controls.

Example: Form Select

<select class="form-select">
  <option selected>Choose an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

By applying these classes to your form control elements, you can use Bootstrap's default styling and create visually appealing forms that match the overall design of your Bootstrap-based website.

Customizing Form Control Styles Using CSS

While Bootstrap's default form control styling is suitable for most cases, you may want to customize the styles to fit your specific design requirements. You can do this by writing your own CSS rules.

To customize form control styles, you can target the form control elements using their classes or IDs and apply your desired styles.

Example: Customizing Form Control Styles

<input type="text" class="form-control custom-input" placeholder="Enter your name">
.custom-input {
  background-color: #f8f9fa;
  border: 2px solid #ced4da;
}

The input field has an additional class .custom-input that is used to apply custom styles. The CSS rule targets this class and sets the background color and border properties.

You can customize various aspects of form control elements, such as colors, font styles, padding, margins, and more, using CSS. This allows you to create unique and visually appealing form control elements that align with your website's design.

Remember to use specific class names or IDs when targeting form control elements to avoid unintentionally affecting other elements on the page.

By combining Bootstrap's default form control classes with your own custom CSS, you can create stylish and functional form control elements that improve the user experience on your website.

Form Control Sizing

Bootstrap has classes that let you control the size of form control elements to match your layout and design needs. By using these sizing classes, you can make form control elements smaller or larger than their default size.

Changing the Size of Form Control Elements

Bootstrap has three sizing classes that you can use on form control elements:

Class Description
.form-control-sm Makes the form control element smaller than the default size.
.form-control-lg Makes the form control element larger than the default size.
No class (default) Keeps the form control element at its default size.

Example: Input Field Sizes

<input class="form-control form-control-sm" type="text" placeholder="Small input">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-lg" type="text" placeholder="Large input">

The .form-control-sm class makes the input field smaller, while the .form-control-lg class makes it larger. The default input field size is used when no sizing class is applied.

You can use these sizing classes on different form control elements, such as text inputs, text areas, select dropdowns, and more.

Using Bootstrap's Sizing Classes

Bootstrap's sizing classes can be used on other form control elements too.

Example: Select Dropdown Sizes

<select class="form-select form-select-sm">
  <option selected>Small select</option>
  <!-- options -->
</select>

<select class="form-select">
  <option selected>Default select</option>
  <!-- options -->
</select>

<select class="form-select form-select-lg">
  <option selected>Large select</option>
  <!-- options -->
</select>

The sizing classes (.form-select-sm and .form-select-lg) are used on the select dropdowns to change their size.

Example: Checkbox and Radio Sizes

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="smallCheckbox">
  <label class="form-check-label" for="smallCheckbox">Small checkbox</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" id="defaultRadio">
  <label class="form-check-label" for="defaultRadio">Default radio</label>
</div>

<div class="form-check">
  <input class="form-check-input form-control-lg" type="checkbox" id="largeCheckbox">
  <label class="form-check-label" for="largeCheckbox">Large checkbox</label>
</div>

By using Bootstrap's sizing classes, you can create form control elements that are the same size and match your design. These classes let you change the size of form control elements without writing custom CSS.

Keep in mind that the sizing classes may not work the same on all form control elements, as some elements have fixed sizes or may need extra CSS changes to get the size you want.

Form Control States

Bootstrap has different states for form control elements that show their current status or condition. These states give users visual feedback and information about the form control. Here are the main form control states in Bootstrap.

Disabled State

The disabled state is used when you want to disable a form control element, preventing users from interacting with it or changing its value. To put a form control in the disabled state, you can add the disabled attribute to the element.

Example: Disabled form control

<input type="text" class="form-control" placeholder="Disabled input" disabled>

When a form control is disabled, it appears grayed out, and users cannot focus on, click, or edit it. The disabled state is useful when you want to show that a form control is temporarily unavailable or when you need to prevent users from modifying certain fields.

Readonly State

The readonly state is similar to the disabled state but allows users to focus on the form control element without being able to change its value. To put a form control in the readonly state, you can add the readonly attribute to the element.

Example: Readonly form control

<input type="text" class="form-control" placeholder="Readonly input" value="This is a readonly input" readonly>

Readonly form controls appear with a slightly different background color to indicate that their value cannot be edited. Users can still focus on and select the content of a readonly form control, but they cannot change it.

Validation States

Bootstrap has validation states that show if the data entered in a form control is correct or incorrect. The validation states provide visual feedback to users, helping them fix any mistakes before sending the form.

Bootstrap uses the following classes for validation states:

  • .is-valid: Indicates that the form control's value is correct.
  • .is-invalid: Indicates that the form control's value is incorrect.

Example: Validation states in form controls

<div class="mb-3">
  <label for="validInput" class="form-label">Valid input</label>
  <input type="text" class="form-control is-valid" id="validInput">
  <div class="valid-feedback">Valid input!</div>
</div>

<div class="mb-3">
  <label for="invalidInput" class="form-label">Invalid input</label>
  <input type="text" class="form-control is-invalid" id="invalidInput">
  <div class="invalid-feedback">Please enter a valid value.</div>
</div>

In the example above, the first input field has the .is-valid class, indicating that its value is correct. It is accompanied by a <div> element with the .valid-feedback class, which displays a success message.

The second input field has the .is-invalid class, indicating that its value is incorrect. It is accompanied by a <div> element with the .invalid-feedback class, which displays an error message.

To use validation states, add the appropriate class (.is-valid or .is-invalid) to the form control element. Then include the corresponding feedback message in a <div> element with the respective class (.valid-feedback or .invalid-feedback).

Bootstrap's validation states provide a simple way to give users feedback about their input, helping them fill out forms accurately and reducing the chances of sending incorrect data.

Form Control Layout

Bootstrap provides different layout options for arranging form control elements on a page. These layouts help you organize and structure your forms. Let's look at the three main form control layouts in Bootstrap: stacked, inline, and horizontal.

Stacked Form Control Layout

The stacked form control layout is the default layout in Bootstrap. In this layout, form control elements are stacked vertically, one below the other. Each form control element takes up the full width of its container.

Stacked Form Control Layout Example

<form>
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name">
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Each form control element (input fields and text area) is placed within a <div> element with the class .mb-3, which adds margin at the bottom for spacing. The labels and form controls are stacked vertically, creating a clear and readable layout.

Inline Form Control Layout

The inline form control layout displays form control elements in a single line, side by side. This layout is useful when you have a small number of form controls and want to create a compact and horizontal form.

To create an inline form control layout, you can add the .row class to a <div> element that wraps your form controls and the .col class to each form control element.

Inline Form Control Layout Example

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
    <div class="col">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

The form control elements (input fields and button) are placed within <div> elements with the class .col, which makes them align horizontally in a single row. The .row class on the parent <div> ensures proper spacing and alignment.

Horizontal Form Control Layout

The horizontal form control layout combines the benefits of the stacked and inline layouts. It displays labels and form controls in a horizontal layout, with labels on the left and form controls on the right.

To create a horizontal form control layout, you can use the grid system classes provided by Bootstrap.

Horizontal Form Control Layout Example

<form>
  <div class="row mb-3">
    <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Each form control element is placed within a <div> element with the class .row for proper spacing and alignment. The labels are given the class .col-sm-2 to set their width, and the form controls are placed within a <div> element with the class .col-sm-10 to occupy the remaining width. The .offset-sm-2 class is used on the last <div> element to offset the submit button, aligning it with the form controls.

By using Bootstrap's grid system classes, you can create a well-structured and aligned horizontal form control layout. These are the three main form control layouts provided by Bootstrap. Choose the layout that best suits your form design and requirements. You can also mix and match these layouts within a single form to create a custom layout that fits your needs.