Bootstrap Forms

Introduction

Forms are used for user input. Bootstrap provides various form styles. With class .form-control, the width of all textual <input>, <textarea> and <select> components are 100%.

1. Default Form Layout

Bootstrap forms are responsive and use form-group for spacing:

<form>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email">
  </div>
</form>

Result:

Important Notes:

Use form-control for proper styling of input fields.
form-group ensures proper spacing and alignment.

2. Vertical, Inline & Horizontal Forms

Vertical Form: Default layout with form controls stacked.
Inline Form: Displays fields in a single row using form-inline class.
Horizontal Form: Uses form-row for a structured layout.

Example:

<form class="form-inline">
  <input type="text" class="form-control mb-2 mr-sm-2" placeholder="Enter name">
</form>

Important Notes:

Use form-inline for inline forms but ensure adequate spacing.
form-row is best for horizontal form layouts.

Bootstrap Inline Form

An inline form displays form fields in a single line.

<form class="form-inline">
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email">
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Bootstrap Horizontal Form

A horizontal form arranges labels and inputs side by side.

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Important Note:

Using different form layouts helps improve usability based on screen size and user experience requirements.

Request more information

Bootstrap Forms