MyPhoto does a good job of boasting about the services on offer and the quality of those services. However, a user may want to read some feedback from the previous customers. To do this, we'll add a testimonials component to our page as a new tab in the services component. The Testimonials tab will display some positive feedback from the users. Let's add that new tab to our list of tabs:

    <li class="nav-item">
        <a href="#services-testimonials" class="nav-link"                 
        data-toggle="tab">Testimonials</a>
    </li>

Next, we want to add some content. Let's use Bootstrap's grid system to display the testimonials in four neat rows of three columns. Add the following code following to the services-prints markup:

    <div role="tabpanel" class="tab-pane" id="services-testimonials">
   <div class="container">
      <div class="row myphoto-testimonial-row">
         <div class="col-xs-3 myphoto-testimonial-column">
            <h6>Debbie</h6>
            <p>Great service! Would recommend to friends!</p>
         </div>
         <div class="col-3 myphoto-testimonial-column">
            <h6>Joey</h6>
            <p>5 stars! Thanks for the great photos!</p>
         </div>
         <div class="col-3 myphoto-testimonial-column">
            <h6>Jack & Jill</h6>
            <p>So happy with how the photos turned out!
               Thanks for capturing the memories of our day!
            </p>
         </div>
         <div class="col-3 myphoto-testimonial-column">
            <h6>Tony</h6>
            <p>Captured our Cup final win! Great stuff!</p>
         </div>
      </div>
      <div class="row myphoto-testimonial-row">
         <div class="col-3 myphoto-testimonial-column">
            <h6>Anne</h6>
            <p>Really high quality prints!</p>
         </div>
         <div class="col-3 myphoto-testimonial-column">
            <h6>Mary</h6>
            <p>Made a stressful event much easier!
               Absolute professionals!
            </p>
         </div>
      </div>
      <div class="row myphoto-testimonial-row">
         <div class="col-3 myphoto-testimonial-column">
            <h6>Oscar</h6>
            <p>Declared their greatness, exhibited greatness.
            </p>
         </div>
         <div class="col-3 myphoto-testimonial-column">
            <h6>Alice</h6>
            <p>Wonderful! Exactly as I imagined they would 
               turn out!
            </p>
         </div>
         <div class="col-3 myphoto-testimonial-column">
            <h6>Nick</h6>
            <p>Perfectly captured the mood of our gig. 
               Top notch.
            </p>
         </div>
      </div>
   </div>
</div>

We have added three rows with varying number of columns. Each column includes the name of a user and the associated testimonial. As we want a maximum of 4 columns in a row, we have given each column the col-3 class so that the column takes up 3 of the 12 columns in the Bootstrap grid system. We have also given each column an additional myphoto-testimonial-column class for specific styling and each row a myphoto-testimonial-row class. Add the following rules to myphoto.css:

    .myphoto-testimonial-row {
        margin-right : 5px;
    }
    .myphoto-testimonial-column 
    {
        border: 1px solid black; background-color: #FFFFFF;
        padding: 10px;      
        margin: 5px;
        max-width: 23%;
    }

We have given some extra spacing to our testimonials. To make up for the extra spacing, we set a max-width property of 23% as opposed to the 25% declared by col-3 and overrode the default margin-right property of the row class of -15px to 5px. We also included a black border and solid white background. Let's check out our results:

Okay, cool. We have our Testimonials tab and our positive testimonies from users. However, it looks kind of ugly. The contents of the columns are of varying lengths, which makes the spacing visually awkward. Take the distance between Joey's testimony on the first row and Mary's on the second. Wouldn't it be nice if we could decrease this distance? From column to column across individual rows, the spacing is uniform and looks good. Wouldn't it be nice if we could achieve this uniformity vertically as well? Unfortunately, Bootstrap's grid system is not flexible enough to make the vertical spacing uniform while allowing for varying heights of columns. However, we can achieve this with a popular library called Salvattore.