<h2 class="toc">Forms</h2>
<h3>Inputs</h3>
{% apply view_source %}
<p class="text-muted">by <code class="highlighter-rouge">.form-control-sm(lg)</code> classes</p>
<div class="row">
  <div class="col"><input class="form-control" type="text" placeholder="input default"></div>
  <div class="col"><input class="form-control form-control-sm" type="text" placeholder="input small"></div>
  <div class="col"><input class="form-control form-control-lg" type="text" placeholder="input large"></div>
</div>
<p class="text-muted">OR by <code class="highlighter-rouge">.col-*</code> classes</p>
<div class="row">
  <div class="col"><input class="form-control" type="text" placeholder="input default"></div>
  <div class="col-3"><input class="form-control" type="text" placeholder="input .col-3"></div>
  <div class="col-5"><input class="form-control" type="text" placeholder="input .col-5"></div>
</div>
{% end %}

<h3>Inputs - minimalistic</h3>
{% apply view_source %}
<div class="d-flex">
  <input class="form-control mx-1 underline" placeholder=".underline">
  <input class="form-control mx-1 underline border-primary" placeholder=".underline.border-primary">
  <input class="form-control mx-1 underline border-success" placeholder=".underline.border-success">
  <input class="form-control mx-1 underline border-danger" placeholder=".underline.border-warning">
  <input class="form-control mx-1 underline border-warning" placeholder=".underline.border-warning">
</div>
{% end %}

<h4>Forms - Helper text</h4>
{% apply view_source %}
<div class="row">
  <div class="col">
    <input type="text" class="form-control is-valid">
    <div class="valid-feedback">
      Valid entry
    </div>
  </div>
  <div class="col">
    <input type="text" class="form-control is-invalid">
    <div class="invalid-feedback">
      Invalid entry
    </div>
  </div>
</div>
{% end %}

<h4>Email/password sign-in</h4>
{% apply view_source %}
<form class="form-inline">
  <div class="form-row align-items-center">
    <div class="col-auto">
      <input class="form-control" type="text" placeholder="Email">
      <input class="form-control" type="password" placeholder="Password">
    </div>
    <div class="col-auto">
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox">Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>
{% end %}
