bootstrap
  1. bootstrap-forms
PreviousNext

Bootstrap Forms

Bootstrap provides several classes and components for creating forms, such as input fields, checkboxes, radio buttons, and more. These components are designed to be responsive and easy to customize.

Syntax

To use Bootstrap forms, you need to add the following classes to your HTML elements:

  • form-group: this class is used to group form elements together.
  • form-control: this class is applied to input fields, textarea, and select elements to give them a uniform appearance.

Here is an example of how to create a simple Bootstrap form:

<form>
  <div class="form-group">
    <label for="nameInput">Name:</label>
    <input type="text" class="form-control" id="nameInput" placeholder="Enter name">
  </div>
  <div class="form-group">
    <label for="emailInput">Email address:</label>
    <input type="email" class="form-control" id="emailInput" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="messageInput">Message:</label>
    <textarea class="form-control" id="messageInput" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Example

Here is an example of a Bootstrap form with checkboxes and radio buttons.

<form>
  <div class="form-group">
    <label for="nameInput">Name:</label>
    <input type="text" class="form-control" id="nameInput" placeholder="Enter name">
  </div>
  <div class="form-group">
    <label for="emailInput">Email address:</label>
    <input type="email" class="form-control" id="emailInput" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="messageInput">Message:</label>
    <textarea class="form-control" id="messageInput" rows="3"></textarea>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
      Option 1
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
    <label class="form-check-label" for="defaultCheck2">
      Option 2
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
      Option 1
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
      Option 2
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
Try Playground

Explanation

In the example above, we used the following Bootstrap classes:

  • form-group: this is used to group form elements together, such as labels and input fields.
  • form-control: this is applied to input fields, textarea, and select elements to give them a uniform appearance.
  • form-check: this is used to group form elements that are checkboxes or radio buttons.
  • form-check-input: this class is applied to input fields that are checkboxes or radio buttons.
  • form-check-label: this class is applied to the label element that is associated with the checkbox or radio button.

Use

Bootstrap forms are widely used in web development to create user interfaces that allow users to input and submit data. By using Bootstrap forms, developers can save time and create consistent formatting across their web applications.

Important Points

  • Bootstrap provides several classes and components for creating forms, such as input fields, checkboxes, radio buttons, and more.
  • Bootstrap forms are designed to be responsive and easy to customize.
  • You can use Bootstrap forms by using the form-group and form-control classes to group form elements together.

Summary

Bootstrap provides a simple and easy-to-use way to create forms for web applications. By using Bootstrap forms, developers can create consistent and responsive user interfaces that allow users to input and submit data with ease.

ScrollspySelect
Published on: