Form

Input

<label for="example-input">Username</label>
<input id="example-input" type="text" placeholder="Enter Username">

Textarea

<label for="example-textarea">Comment</label>
<textarea id="example-textarea"></textarea>

Select

<label for="example-select">Articles</label>
<div class="select">
  <select id="example-select">
    <option>A first not real article title</option>
    <option>A second article, also not real</option>
    <option>A third article for you</option>
  </select>
</div>

Multiple Select

<label for="example-multi-select">Articles</label>
<select id="example-select" multiple size="3">
  <option>A first not real article title</option>
  <option>A second article, also not real</option>
  <option>A third article for you</option>
</select>

Checkbox (stacked)

<div class="checkbox">
  <input type="checkbox" id="checkbox-1">
  <label for="checkbox-1">Option One</label>
</div>
<div class="checkbox">
  <input type="checkbox" id="checkbox-2">
  <label for="checkbox-2">Option Two</label>
</div>
<div class="checkbox">
  <input type="checkbox" id="checkbox-3" disabled>
  <label for="checkbox-3">Option Three</label>
</div>

Checkbox (inline)

<ul class="list-inline">
  <li>
    <div class="checkbox">
      <input type="checkbox" id="checkbox-inline-1">
      <label for="checkbox-inline-1">Option One</label>
    </div>
  </li>
  <li>
    <div class="checkbox">
      <input type="checkbox" id="checkbox-inline-2">
      <label for="checkbox-inline-2">Option Two</label>
    </div>
  </li>
  <li>
    <div class="checkbox">
      <input type="checkbox" id="checkbox-inline-3" disabled>
      <label for="checkbox-inline-3">Option Three</label>
    </div>
  </li>
</ul>

Radio (stacked)

<div class="radio">
  <input type="radio" id="radio-1" name="radio-1">
  <label for="radio-1">Option One</label>
</div>
<div class="radio">
  <input type="radio" id="radio-2" name="radio-1">
  <label for="radio-2">Option Two</label>
</div>
<div class="radio">
  <input type="radio" id="radio-3" name="radio-1" disabled>
  <label for="radio-3">Option Two</label>
</div>

Radio (inline)

<ul class="list-inline">
  <li>
    <div class="radio">
      <input type="radio" id="radio-inline-1" name="radio-2">
      <label for="radio-inline-1">Option One</label>
    </div>
  </li>
  <li>
    <div class="radio">
      <input type="radio" id="radio-inline-2" name="radio-2">
      <label for="radio-inline-2">Option Two</label>
    </div>
  </li>
  <li>
    <div class="radio">
      <input type="radio" id="radio-inline-3" name="radio-2" disabled>
      <label for="radio-inline-3">Option Three</label>
    </div>
  </li>
</ul>

Upload

<input type="file" id="file">

Custom Upload

The Javascript snippet below depends on the file API (see link).

<label for="file-custom" id="js-filename" class="btn">Choose File</label>
<input type="file" id="file-custom" class="sr-only" multiple>

<script>
  (function() {
    var file = document.getElementById('file-custom');
    file.addEventListener('change', function() {
      var fileCount = file.files.length;
      if (fileCount > 0) {
        if (fileCount > 1) {
          document.getElementById('js-filename').innerHTML = fileCount + ' files selected';
        } else {
          document.getElementById('js-filename').innerHTML = file.files[0].name;
        }
      }
    });
  }());
</script>

Example Login

<form action="#" method="post">
  <div class="row form-group">
    <div class="col col-md-2">
      <label class="label-inline" for="username">Username</label>
    </div>
    <div class="col col-md-4">
      <input id="username" type="text">
    </div>
  </div>

  <div class="row form-group">
    <div class="col col-md-2">
      <label class="label-inline" for="password">Password</label>
    </div>
    <div class="col col-md-4">
      <input id="password" type="password">
    </div>
  </div>

  <div class="row">
    <div class="col col-md-4 col-md-offset-2">
      <input class="btn" type="submit" value="Login">
    </div>
  </div>
</form>

Example Contact

<form action="#" method="post">
  <div class="row">
    <div class="col col-md-6">
      <div class="form-group">
        <label for="firstname">First name</label>
        <input id="firstname" type="text">
      </div>
    </div>
    <div class="col col-md-6">
      <div class="form-group">
        <label for="lastname">Last name</label>
        <input id="lastname" type="text">
      </div>
    </div>
  </div>

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

  <div class="form-group">
    <label for="comment">Comment</label>
    <textarea id="comment"></textarea>
  </div>

  <input type="submit" value="Send" class="btn">
</form>