My bootstrap page seems to be experiencing an issue where the buttons within a div are shifted slightly to the right without any clear reason:
https://i.sstatic.net/3xlMC.png
https://i.sstatic.net/yFLFM.png
https://i.sstatic.net/gh686.png
The div in question (highlighted above) has no padding or margin:
https://i.sstatic.net/qx35G.png
and both sides of the buttons have the same margin applied:
https://i.sstatic.net/mm0cr.png
Here is the corresponding HTML code:
<div class="cinema-list" style="max-width: 700px;" class="m-auto">
<h2>Select Cinema</h2>
<div class="form-group">
<label for="cinemaSearchInput">Search</label>
<input
type="text"
class="form-control"
id="cinemaSearchInput"
placeholder="Cinema name..."
[(ngModel)]="searchString"
>
</div>
<div *ngIf="cinemaList != null">
<button
*ngFor="let cinema of cinemaList"
type="button"
class="btn btn-primary cinema-button m-1 w-100"
(click)="selectCinema(cinema)"
>
<span>{{cinema.name}}</span>
<i
*ngIf="isFavoriteCinema(cinema)"
class="fa fa-heart pl-1 heart"
aria-hidden="true"></i>
</button>
</div>
<div
*ngIf="cinemaList == null"
class="d-flex align-items-center pt-2">
<span class="spinner-border text-primary mr-2"></span>
<span>Loading...</span>
</div>
</div>
And here is the corresponding SCSS:
.cinema-list{
.cinema-button{
display: block;
}
.cinema:hover{
background-color: $primary;
}
}
I can't seem to identify why the buttons are shifted in this manner. Could this be a Bootstrap bug?
This is Bootstrap version 4.3.1
Thank you