Bootstrap Forms

Level : Advanced

Mentor: Shailendra Chauhan

Duration : 00:02:00

Select:

Select inputs provide users with a dropdown menu of options. They are ideal for choosing from a list of predefined values.

Example:

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

Checks & Radios:

Checkboxes and radio buttons allow users to make selections from a list of options. They are often used for multiple-choice selections.

Example:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkboxExample">
  <label class="form-check-label" for="checkboxExample">
    Checkbox label
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="radioExample" id="radioExample1" checked>
  <label class="form-check-label" for="radioExample1">
    Radio option 1
  </label>
</div>

Range:

Range inputs let users select a value from a range by dragging a slider. They are useful for settings like volume controls or numerical input.

Example:

<label for="rangeExample" class="form-label">Select a value:</label>
<input type="range" class="form-range" id="rangeExample" min="0" max="100" step="1">

Input Group:

Input groups combine form controls with text, buttons, or other elements. They provide a more organized and visually appealing layout.

Example:

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Floating Labels:

Floating labels move label text inside the input field when users start typing. This saves space and keeps the form clean.

Example:

<div class="form-floating">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

Layout:

Bootstrap provides a grid system to create responsive layouts. It uses columns and rows to structure content effectively across different screen sizes.

Example:

<div class="row">
  <div class="col-md-6">Column 1</div>
  <div class="col-md-6">Column 2</div>
</div>

Validation:

Bootstrap offers built-in form validation styles and attributes to provide feedback to users about their inputs' validity.

Example:

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationInput" class="form-label">Required field</label>
    <input type="text" class="form-control" id="validationInput" required>
    <div class="invalid-feedback">
      Please provide a valid input.
    </div>
  </div>
</form>

Self-paced Membership

Upto 60% OFF

Know More

Still have some questions? Let's discuss.