<h2 class="toc">Login</h2>
{% apply view_source %}
<div class="row mt-3 justify-content-center">
  <div class="col-6">
    <div class="card">
      <div class="card-body">
        <div class="col">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span>
            </div>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username">
          </div>
          <div class="input-group mt-3">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span>
            </div>
            <input type="password" class="form-control" placeholder="Password" aria-label="Password">
          </div>
          <div class="row justify-content-between mt-2">
            <div class="col-6">
              <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input">
                <span class="custom-control-label"></span>
                <span class="custom-control-description">Remember me</span>
              </label>
            </div>
            <div class="col-6 text-right">
              <p><a href="#">Forgot Password ?</a></p>
            </div>
          </div>
          <div class="row">
            <button type="button" class="col-11 mx-auto btn btn-primary">Login</button>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /.col -->
</div>
{% end %}
