Forms & Filters

Clearly labelled form fields make it faster and easier for users to complete forms. Follow the guidelines below when creating form fields, and keep the text labels within each field in uppercase.

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Simple Form Example

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

We'll never share your email with anyone else. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Be sure to explore our custom forms to further style <select>s.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control custom-select" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Filter and Search Controls

These form controls help to filter and search for content on the page.

Filter by:

<div class="row">
     <form class="form-inline">
          <h3 class="filter-title col-md-2">Filter by:</h3>
          <div class="form-group col-md-4">
               <label for="exampleFilter" class="sr-only">Example Filter</label>
               <select class="form-control custom-select" id="exampleFilter">
                    <option>All Faculties</option>
                    <option>Administration</option>
                    <option>DeGroote School of Business</option>
                    <option>Engineering</option>
                    <option>Health Sciences</option>
                    <option>Humanities</option>
                    <option>Science</option>
                    <option>Social Sciences</option>
               </select>
          </div>
     <div class="input-group col-md-6 w-100">
          <input type="text" class="form-control" placeholder="Search Page" aria-label="exampleSearch" aria-describedby="basic-addon2">
               <div class="input-group-append">
                    <button class="btn btn-secondary btn-search" type="button"><span class="sr-only">Search</span></button>
               </div>
          </div>
     </form>
</div>