https://i.sstatic.net/7ODvY.pngI need to add an additional image in the top row, but there is currently empty space due to the left button (out now) potentially overlapping the image. This layout is using the bootstrap grid system with columns set to col-sm-2 to create six equal columns. To accommodate the button, I have adjusted its width to create room for the sixth image.
.list-group {
width: 100%;
}
.list-group-item-action {
color: black;
background: white;
}
.list-group-item-action:hover {
background: #3d6277;
color: white;
}
.container-fluid {
width: 100%;
}
.search {
width: 300px;
}
.img-fluid {
margin: 0 auto;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2{
color: white;
position: absolute;
top: 0px;
left: 50px;
width: 100%;
}
.btn {
width:0px;
padding:10px;
}
h6{
font-size:22px;
text-align: center;
}
.btn btn-primary btn-sm{
background-color: #8064A2 !important;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
/*
h2 span.spacer {
padding:0 5px;
}*/
.font-size{
font-size:10px;
font-weight:20px;
}
.vertical{
text-align: horizontal;
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
}<div class="container-fluid">
<div class="search">
<input type="text" class="form-control" name="search box" placeholder= "search..." [(ngModel)]="movieName">
</div>
<br>
<div class="row">
<button type="button" class="btn btn-info btn-sm"><h6 class="vertical">Out Now</h6></button>
<div class="list-group col-sm-2" *ngFor="let movie of movies|search:movieName;">
<button type="button" (click)="detail(movie.id)" class="list-group-item list-group-item-action" >
<div class="image">
<img src={{movie.img}} class="img-fluid" width="250px" height="250px" />
<h2><span class='spacer'>{{movie.name}}</span> </h2>
<span class="font-size">{{movie.genres}}</span>
</div>
</button>
</div>
</div>
</div>