<h2 class="toc">Tail</h2>
<p>Add a <code>.tail-&lt;position&gt;</code> class to add a tail to a container.</p>

<h3>Tail backgrounds</h3>
{% apply view_source %}
<div class="row">
  <div class="col"><div class="mb-3 bg-primary tail-bc"><div class="p-3 text-middle text-center">tail-bc.bg-primary</div></div></div>
  <div class="col"><div class="mb-3 bg-success tail-bc"><div class="p-3 text-middle text-center">tail-bc.bg-success</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-bc"><div class="p-3 text-middle text-center">tail-bc.bg-warning</div></div></div>
</div>
{% end %}

<h3>Tail borders</h3>
{% apply view_source %}
<div class="row">
  <div class="col"><div class="mb-3 border border-primary tail-bc"><div class="p-3 text-middle text-center">tail-bc.border-primary</div></div></div>
  <div class="col"><div class="mb-3 border border-dark tail-bc"><div class="p-3 text-middle text-center">tail-bc.border-dark</div></div></div>
  <div class="col"><div class="mb-3 border border-danger tail-bc"><div class="p-3 text-middle text-center">tail-bc.border-danger</div></div></div>
</div>
{% end %}

<h3>Tail borders with backgrounds</h3>
{% apply view_source %}
<div class="row">
  <div class="col"><div class="mb-3 bg-white border border-primary tail-bc"><div class="p-3 text-middle text-center">tail-bc.border-primary.bg-white</div></div></div>
  <div class="col"><div class="mb-3 bg-white border border-dark tail-bc"><div class="p-3 text-middle text-center">tail-bc.border-dark.bg-white</div></div></div>
  <div class="col"><div class="mb-3 bg-white border border-danger tail-bc"><div class="p-3 text-middle text-center">tail-bc.border-danger.bg-white</div></div></div>
</div>
<div class="row">
  <div class="col"><div class="mb-3 bg-light border border-primary tail-bc"><div class="p-3 text-middle text-center">tail-bc.bg-light.border-primary</div></div></div>
  <div class="col"><div class="mb-3 bg-primary border border-dark tail-bc"><div class="p-3 text-middle text-center">tail-bc.bg-primary.border-dark</div></div></div>
  <div class="col"><div class="mb-3 bg-warning border border-danger tail-bc"><div class="p-3 text-middle text-center">tail-bc.bg-warning.border-danger</div></div></div>
</div>
{% end %}

<h3>Tail styles</h3>
{% apply view_source %}
<div class="row">
  <div class="col"><div class="mb-3 bg-warning shadow tail-bc"><div class="p-3 text-middle text-center">tail-bc.shadow</div></div></div>
  <div class="col"><div class="mb-3 bg-warning rounded tail-bc"><div class="p-3 text-middle text-center">tail-bc.rounded</div></div></div>
  <div class="col"><div class="mb-3 bg-warning round tail-bc"><div class="p-3 text-middle text-center">tail-bc.round</div></div></div>
</div>
{% end %}

<h3>Tail position</h3>
{% apply view_source %}
<div class="row">
  <div class="col"><div class="mb-3 bg-warning tail-tl"><div class="p-5 text-middle text-center">.tail-tl</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-tc"><div class="p-5 text-middle text-center">.tail-tc</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-tr"><div class="p-5 text-middle text-center">.tail-tr</div></div></div>
</div>
<div class="row">
  <div class="col"><div class="mb-3 bg-warning tail-bl"><div class="p-5 text-middle text-center">.tail-bl</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-bc"><div class="p-5 text-middle text-center">.tail-bc</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-br"><div class="p-5 text-middle text-center">.tail-br</div></div></div>
</div>
<div class="row">
  <div class="col"><div class="mb-3 bg-warning tail-lt"><div class="p-5 text-middle text-center">.tail-lt</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-lc"><div class="p-5 text-middle text-center">.tail-lc</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-lb"><div class="p-5 text-middle text-center">.tail-lb</div></div></div>
</div>
<div class="row w-75">
  <div class="col"><div class="mb-3 bg-warning tail-rt"><div class="p-5 text-middle text-center">.tail-rt</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-rc"><div class="p-5 text-middle text-center">.tail-rc</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-rb"><div class="p-5 text-middle text-center">.tail-rb</div></div></div>
</div>
{% end %}
