I am working with ngbootstrap and angular, however, I believe the issue at hand is more related to html/css. My goal is to create a container that scrolls horizontally, despite coming across several helpful threads on this topic, I am struggling to implement it in my specific case... Here is the code snippet html:
<div style="width: 100%; background-color: rgb(177, 177, 177);">
<div class="container" >
<div class="my-container">
<h1>Services</h1>
<p>Our company holds UDT qualifications for the installation and maintenance of lifting equipment, including:</p>
<div class="col-12 horizonstall-scroll" style="margin-left: auto; margin-right: auto; padding: 0;">
<div class="row">
<div class="card-container d-flex justify-content-center" *ngFor="let item of items">
<div class="card my-card" style="width: 18rem;">
<img class="card-img-top" src="{{item.smallImg}}" alt="lift">
<div class="card-body">
<h5 class="card-title">{{item.name}}</h5>
<p class="card-text">{{item.shortDesc}}</p>
<a class="btn btn-primary" (click)="openModal(item)" >Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
css:
.my-container {
padding-left: 15px;
padding-right: 15px;
background-color: rgb(216, 209, 209);
box-shadow: 0px 10px 25px 13px rgba(0,0,0,0.75);
}
.horizonstall-scroll > .row {
overflow-x: auto;
white-space: nowrap;
}
.horizonstall-scroll > .row > .card-container {
display: inline-block;
float: none;
}