Toyhouse Sliders Layout (Relationships Container)

    <!--Relationships Container-->
    <div class="container mx-auto mb-4" style="width:100%;">

        <h1 class="bg-primary text-white p-2 text-center rounded mb-4">Relationships</h1>
        <div class="col-9 mx-auto p-0 m-0">
            <!--START Row of Characters-->
            <div class="row justify-content-center">
                <!--Start Column of Character-->
                <div class="col-md-3 p-0 text-center mb-3">

                    <ul class="m-0 pr-2 pl-2" style="list-style-type: none;">
                        <li>
                            <div class="thumb-image">
                                <a class="img-thumbnail" href=""><img src="https://pixy.org/images/placeholder.png" class="fr-fic fr-dii" height="120" width="104"></a>
                            </div>
                        </li>
                        <li><a class="btn btn-sm btn-outline-primary character-name-badge mt-1" href=""><span>Name</span></a></li>
                        <li>Relationship</li>
                    </ul>
                </div>
                <!--END Column of Character-->
                <!--Start Column of Character-->
                <div class="col-md-3 p-0 text-center mb-3">

                    <ul class="m-0 pr-2 pl-2" style="list-style-type: none;">
                        <li>
                            <div class="thumb-image">
                                <a class="img-thumbnail" href=""><img src="https://pixy.org/images/placeholder.png" class="fr-fic fr-dii" height="120" width="104"></a>
                            </div>
                        </li>
                        <li><a class="btn btn-sm btn-outline-primary character-name-badge mt-1" href=""><span>Name</span></a></li>
                        <li>Relationship</li>
                    </ul>
                </div>
                <!--END Column of Character-->
                <!--Start Column of Character-->
                <div class="col-md-3 p-0 text-center mb-3">

                    <ul class="m-0 pr-2 pl-2" style="list-style-type: none;">
                        <li>
                            <div class="thumb-image">
                                <a class="img-thumbnail" href=""><img src="https://pixy.org/images/placeholder.png" class="fr-fic fr-dii" height="120" width="104"></a>
                            </div>
                        </li>
                        <li><a class="btn btn-sm btn-outline-primary character-name-badge mt-1" href=""><span>Name</span></a></li>
                        <li>Relationship</li>
                    </ul>
                </div>
                <!--END Column of Character-->
            </div>
            <!--END Row of Characters-->
        </div>
    </div>