Improve alignment of search results

src/main/webapp/app/mock-search/mock-search.component.html

-<div class="col-sm-3" *ngFor="let result of mockResults">
+<div class="row">
     <!-- cards -->
-    <div class="card" style="width: 410px; justify-content: center;">
+    <div class="card col-sm-6 col-md-4 col-lg-3" *ngFor="let result of mockResults">
         <img class="card-img-top" src="{{result.imageURL}}" alt="result image" style="width: 100px; height: auto; margin-left: auto; margin-right: auto; padding-top: 15px; box-shadow: 3px;">
         <div class="card-body">
             <h5 class="card-title">{{result.title}}</h5>
@@ -53,9 +53,8 @@
             </div>
 
         </div>
-    </div> <!-- card end-->
-</div> <!-- col-sm-3 end -->
-
+    </div> <!-- card end--> <!-- col-sm-3 end -->
+</div>
 
 <!-- The Modal -->
 <div *ngIf="selectedResult">

src/main/webapp/app/mock-search/mock-search.scss

 .card {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   text-align: center;
+  justify-content: center;
+  float: left;
+  margin: 20px;
 }
 
 .card-title {