bootstrap
  1. bootstrap-form-layout
PreviousNext

Bootstrap Form Layout

Bootstrap provides a simple and effective way to create forms on your website. With pre-built classes and components, you can easily create a professional-looking form layout.

Syntax

To create a form layout in Bootstrap, you need to use the following classes:

  • form-group: This class is used to group form elements together.
  • form-control: This class is used to style form elements, such as input fields or textareas.
  • form-label: This class is used to style form labels.

Here's an example of how to create a simple form with two input fields and a submit button:

<form>
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="form-control" id="name">
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Example

Here's a more complex example of how to create a form with various form elements, such as text inputs, select boxes, and radio buttons.

<form class="row g-3">
    <div class="col-6">
        <label for="inputEmail4" class="form-label">Email</label>
        <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="col-6">
        <label for="inputPassword4" class="form-label">Password</label>
        <input type="password" class="form-control" id="inputPassword4">
    </div>
    <div class="col-12">
        <label for="inputAddress" class="form-label">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
    </div>
    <div class="col-12">
        <label for="inputAddress2" class="form-label">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
    </div>
    <div class="col-6">
        <label for="inputCity" class="form-label">City</label>
        <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="col-4">
        <label for="inputState" class="form-label">State</label>
        <select id="inputState" class="form-select">
            <option selected>Choose...</option>
            <option>...</option>
        </select>
    </div>
    <div class="col-2">
        <label for="inputZip" class="form-label">Zip</label>
        <input type="text" class="form-control" id="inputZip">
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
                Check me out
            </label>
        </div>
    </div>
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
</form>
Try Playground

Inline forms

Use the .row-cols-* classes to create responsive horizontal layouts. 

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>
Try Playground

Explanation

In the code above, we used the following Bootstrap classes to create the form layout:

  • form-group: This class is used to group form elements together.
  • form-control: This class is used to style form elements, such as input fields or textareas.
  • form-label: This class is used to style form labels.
  • input-group: This class is used to group some of the form elements together.
  • form-check: This class is used to style the radio buttons.

Use

Bootstrap can be used to create various form elements, such as text inputs, checkboxes, radio buttons, select boxes, and more. It also provides validation styles and JavaScript plugins to make your forms more interactive.

Important Points

  • Bootstrap provides a simple and effective way to create forms on your website.
  • Bootstrap has pre-built classes and components that can be used to style form elements, such as input fields or textareas.
  • You can use Bootstrap to create various form elements, such as text inputs, checkboxes, radio buttons, select boxes, and more.

Summary

Bootstrap form layout makes it easy to create professional-looking forms on your website. With pre-built classes and components, you can easily style your form elements and create a consistent layout for your forms.

Floating LabelsForm Validation
Published on: