<!-- Start of horizontal tabs -->
<ul class="nav nav-pills mb-0" id="pills-tab" role="tablist" style="padding-top: .25rem; list-style: none; margin-left: .25rem;">
    <li class="nav-item"> <a class="nav-link active show" id="h-tabs-t1-tab" data-toggle="pill" href="#h-tabs-t1" role="tab" aria-controls="h-tabs-t1" aria-selected="true">Tab 1</a> </li>
    <li class="nav-item"> <a class="nav-link" id="h-tabs-t2-tab" data-toggle="pill" href="#h-tabs-t2" role="tab" aria-controls="h-tabs-t2" aria-selected="false">Tab 2</a> </li>
    <li class="nav-item"> <a class="nav-link" id="h-tabs-t3-tab" data-toggle="pill" href="#h-tabs-t3" role="tab" aria-controls="h-tabs-t3" aria-selected="false">Tab 3</a> </li>
</ul>
<div class="tab-content card" id="pills-tabContent" style="padding-bottom: .25rem">
    <div class="tab-pane p-3 fade active show" id="h-tabs-t1" role="tabpanel" aria-labelledby="h-tabs-t1-tab">
        <h4>Tab 1</h4>
        <p>Tab 1 content goes here.</p>
    </div>
    <div class="tab-pane p-3 fade" id="h-tabs-t2" role="tabpanel" aria-labelledby="h-tabs-t2-tab">
        <h4>Tab 2</h4>
        <p>Tab 2 content goes here.</p>
    </div>
    <div class="tab-pane p-3 fade" id="h-tabs-t3" role="tabpanel" aria-labelledby="h-tabs-t3-tab">
        <h4>Tab 3</h4>
        <p>Tab 3 content goes here.</p>
    </div>
</div>
<!-- End of horizontal tabs -->