Stackable Navs

<!--Stackable Navs Snippet-->

<ul class="nav nav-tabs card-header-tabs row">

    <li class="col-sm-12 col-md-6 col-lg-3 mt-2">
        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#link1" role="button">Link 1</a>
    </li>

    <li class="col-sm-12 col-md-6 col-lg-3 mt-2">
        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#link2" role="button">Link 2</a>
    </li>

    <li class="col-sm-12 col-md-6 col-lg-3 mt-2">
        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#link3" role="button">Link 3</a>
    </li>

    <li class="col-sm-12 col-md-6 col-lg-3 mt-2">
        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#link4" role="button">Link 4</a>
    </li>

</ul>

<br>
<hr>

<!--Nav content-->

<div class="tab-content">

    <div class="tab-pane container active" id="link1">
      example text/your content goes here
    </div>

    <div class="tab-pane container fade" id="link2">
      some more example text/your content goes here
    </div>

    <div class="tab-pane container fade" id="link3">
        even more example text/your content goes here
    </div>

    <div class="tab-pane container fade" id="link4">
        you get the drill/your content goes here
    </div>

</div>