Making horizontally srcollable container - html

Question

I'm using ngbootstrap and angular, but I think the problem here is more of html/css matter.
I want to make a container to scroll horizonstally, I've found few threads about it, but cannot make it work in my case...
Here's my code
html:
<div style="width: 100%; background-color: rgb(177, 177, 177);">
<div class="container" >
<div class="my-container">
<h1>Usługi</h1>
<p>Nasza firma posiada uprawnienia UDT w zakresie montażu i konserwacji urządzeń dźwigowych, w tym:</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)" >Czytaj więcej</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;
}

Answer 1

Hi maybe this might help because I have had this problem before and I fixed it using this solution and its using bootstrap which is better in your case
Horizontal scrollable div's in a bootstrap row
hope this solution helps your needs, Cheers :)