<div class="row justify-content-center">
    <div class="col-xl-7">
       <div class="row justify-content-between">
          <div class="col-lg-5 col-sm-6">
             <div class="card">
                <img src="assets/images/small/img-1.png" class="card-img-top" alt="card img">
                <div class="card-body">
                   <h5 class="card-title">Card title</h5>
                   <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                   <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
             </div>
          </div>
          <!-- end col -->
          <div class="col-lg-5 col-sm-6">
             <div class="card" aria-hidden="true">
                <img src="assets/images/small/img-2.png" class="card-img-top" alt="card dummy img">
                <div class="card-body">
                   <h5 class="card-title placeholder-glow">
                      <span class="placeholder col-6"></span>
                   </h5>
                   <p class="card-text placeholder-glow">
                      <span class="placeholder col-7"></span>
                      <span class="placeholder col-4"></span>
                      <span class="placeholder col-4"></span>
                      <span class="placeholder col-6"></span>
                   </p>
                   <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
                </div>
             </div>
             <!-- end card -->
          </div>
          <!-- end col -->
       </div>
       <!-- end row -->
    </div>
    <!-- end col -->
 </div>
 <!-- end row -->

<div class="row">
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Width</h4>
            </div><!-- end card header -->
            <div class="card-body">
                <span class="placeholder col-6"></span>
                <span class="placeholder w-75"></span>
                <span class="placeholder" style="width: 25%;"></span>
            </div><!-- end card body -->
        </div><!-- end card -->
        <div class="card mb-xl-0">
            <div class="card-header">
                <h4 class="card-title">Sizing</h4>
            </div><!-- end card header -->
            <div class="card-body">
                <span class="placeholder col-12 placeholder-lg"></span>
                <span class="placeholder col-12"></span>
                <span class="placeholder col-12 placeholder-sm"></span>
                <span class="placeholder col-12 placeholder-xs"></span>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div><!-- end col -->
    <div class="col-xl-6">
        <div class="card mb-xl-0">
            <div class="card-header">
                <h4 class="card-title">Color</h4>
            </div><!-- end card header -->
            <div class="card-body">
                <span class="placeholder col-12 mb-3"></span>
                <span class="placeholder col-12 mb-3 bg-primary"></span>
                <span class="placeholder col-12 mb-3 bg-secondary"></span>
                <span class="placeholder col-12 mb-3 bg-success"></span>
                <span class="placeholder col-12 mb-3 bg-danger"></span>
                <span class="placeholder col-12 mb-3 bg-warning"></span>
                <span class="placeholder col-12 mb-3 bg-info"></span>
                <span class="placeholder col-12 mb-3 bg-light"></span>
                <span class="placeholder col-12 bg-dark"></span>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div><!-- end col -->
</div><!-- end row -->