<h2 class="toc">Input groups</h2>

{% apply view_source %}
<p>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-label"></span>
    <span class="custom-control-description">Custom checkbox</span>
  </label>
</p>
{% end %}

{% apply view_source %}
<p>
  <label class="custom-control custom-radio">
    <input id="radio1" name="radio" type="radio" class="custom-control-input">
    <span class="custom-control-label"></span>
    <span class="custom-control-description">Custom Radio 1</span>
  </label>
  <label class="custom-control custom-radio">
    <input id="radio2" name="radio" type="radio" class="custom-control-input">
    <span class="custom-control-label"></span>
    <span class="custom-control-description">Custom Radio 2</span>
  </label>
</p>
{% end %}

<h2 class="toc">Input Groups</h2>
{% apply view_source %}
<p>
  <div class="input-group mb-2 mb-sm-0">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control border-left-0" id="inlineFormInputGroup" placeholder="Username">
  </div>
</p>
{% end %}

{% apply view_source %}
<div class="row">
  <div class="col-3">
    <ul class="list-group">
      <li class="list-group-item"><input type="checkbox" name="radio"> CASA TD</li>
      <li class="list-group-item"><input type="checkbox" name="radio"> IPG</li>
      <li class="list-group-item"><input type="checkbox" name="radio"> OPS</li>
      <li class="list-group-item"><input type="checkbox" name="radio"> Hooks</li>
      <li class="list-group-item"><input type="checkbox" name="radio"> Contactability</li>
    </ul>
  </div>
  <div class="col-2">
    <ul class="list-group">
      <li class="list-group-item list-group-item-dark">Priority</li>
      <li class="list-group-item">Non-Priority</li>
      <li class="list-group-item">Both</li>
    </ul>
  </div>
  <div class="col-4">
    <button type="button" class="btn btn-secondary">Zones</button>
    <button type="button" class="btn btn-danger">States</button>
    <button type="button" class="btn btn-secondary">Branches</button>
  </div>
  <div class="col-3">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">$</span>
      </div>
      <input type="text" class="form-control" aria-label="Amount">
      <div class="input-group-append">
        <span class="input-group-text">.00</span>
      </div>
    </div>
  </div>
</div>
{% end %}

<h2 class="toc">Search</h2>
{% apply view_source %}
<div class="row">
  <div class="col">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="submit">Search</button>
      </span>
    </div>
  </div>
  <div class="col">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search">
      <div class="input-group-append">
        <span class="input-group-text"><i class="fa fa-search"></i></span>
      </div>
    </div>
  </div>
  <div class="col">
    <input type="text" class="form-control underline text-center" placeholder="minimal search">
  </div>
</div>
{% end %}
