<div class="row">
    <div class="col-xl-6">
        <div>
            <div class="spinner-border text-primary m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-secondary m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-success m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-info m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-warning m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-danger m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-purple m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-dark m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-light m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        </div><!-- end col -->
        <div class="col-xl-6">
        <div>
            <div class="spinner-grow text-primary m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-secondary m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-success m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-info m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-warning m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-danger m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-purple m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-dark m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-light m-1" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div><!-- end col -->
</div><!-- end row -->