<h2 class="toc">Underline</h2>

<p>Underlines add a single <code>border-bottom</code> to the element.</p>

{% apply view_source %}
<div class="d-flex">
  <h3 class="underline mx-3">H3.underline</h3>
  <h4 class="underline mx-3 border-primary">H4.underline.border-primary</h4>
  <h5 class="underline mx-3 border-danger">H5.underline.border-danger</h5>
</div>
{% end %}

<p>When applied to <code>form-control</code> elements, it also removes the
  border/outline when focused or active. Instead, the underline becomes thicker on
  focus.</p>

{% 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 %}
