Stor8

<!--
    
    simple directory (AF)
    by sunxrice
    
-->

<div class="container text-center">
    
    <!-- header -->
    <div>
        <h2 class="mb-0">
            title
        </h2>
        <span class="lead d-block mb-2">0 characters</span>
        <p>describe a little about them here</p>
    </div>
    <!-- /header -->
    
    <hr>
    
    <!-- characters -->
    <div class="row justify-content-center">
        
        <!-- character -->
        <div class="col-12 col-sm-6 col-lg-3 mb-3">
            <a href="" class="btn btn-outline-secondary text-body w-100 h-100 d-flex flex-column align-items-center">
                <img src="https://placehold.co/200" alt="" class="mb-2">
                <span class="font-weight-bold" style="font-size:1.25em">character</span>
                <span>short desc</span>
            </a>
        </div>
        <!-- /character -->
        
        <!-- character -->
        <div class="col-12 col-sm-6 col-lg-3 mb-3">
            <a href="" class="btn btn-outline-secondary text-body w-100 h-100 d-flex flex-column align-items-center">
                <img src="https://placehold.co/200" alt="" class="mb-2">
                <span class="font-weight-bold" style="font-size:1.25em">character</span>
                <span>this is what happens when the description is longer</span>
            </a>
        </div>
        <!-- /character -->
        
    </div>
    <!-- /characters -->
    
    <hr>
    
    <!-- credit -->
    <p class="text-right">
        <a class="btn btn-outline-secondary text-primary border-0 p-1 tooltipster" style="font-size:0.8em" href="https://toyhou.se/41115090.simple-directory-af">
            code by sunxrice
            <i class="fal fa-sun-haze fa-width-auto"></i>
        </a>
    </p>
    
</div>
<!-- end -->