I have some bootstrap columns and when the screen goes less wide, they stack vertically, which is great, but the thing is, they don't have their usual top and bottom margins.
Here is what I mean:
How do I get the top margin in there?
Code:
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-5 col-lg-3">
<div id="image" [ngStyle]="{ 'background-image': 'url(' + selectedResult?.result.result.image + ')'}"></div>
</div>
<div class="col-sm-7 col-lg-4">
<div id="result-attributes">
<div class="row">
<div class="col-sm-12" id="rate-container">
<div class="pull-xs-right">
<div class="left-rating border">
<img src="images/star-filled-large.png" width="30px">
<h3>{{averageRating}}</h3>
<small>/ 10</small>
<small class="votes left">{{votesCount}} votes</small>
</div>
<div (click)="ratingStarClick()" class="right-rating">
<div id="rating-content">
<img src="images/star-filled-large.png" width="30px">
<h3>{{userRating}}</h3>
<small>/ 10</small>
</div>
<small class="votes right">you</small>
</div>
</div>
<div class="col-sm-12">
<div id="rate-div" style="" *ngIf="showRatingStars">
<div id="rate-title"> rate me!</div>
<div id="rate-contents">
<img (click)="starClick(event)" id="star1" [src]="imgSrc1" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)">
<img (click)="starClick(event)" id="star2" [src]="imgSrc2" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)">
<img (click)="starClick(event)" id="star3" [src]="imgSrc3" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)">
<img (click)="starClick(event)" id="star4" [src]="imgSrc4" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)">
<img (click)="starClick(event)" id="star5" [src]="imgSrc5" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)">
<img (click)="starClick(event)" id="star6" [src]="imgSrc6" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)">
<img (click)="starClick(event)" id="star7" [src]="imgSrc7" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)">
<img (click)="starClick(event)" id="star8" [src]="imgSrc8" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)">
<img (click)="starClick(event)" id="star9" [src]="imgSrc9" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)">
<img (click)="starClick(event)" id="star10" [src]="imgSrc10" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)">
</div>
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<div class="col-lg-5">
<div id="shops-section">
<!--<input placeholder="try another location" id="area-input" #areaInput type="text"/>-->
<div id="map" #map></div>
<ul>
<li *ngFor="let shop of selectedResult?.result.result.nearbyShops">
<div class="shop-details">
{{ shop.name }}
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
