<div class="container mt-3">
<div class="row" style="overflow-x:scroll; overflow-y: hidden; white-space: nowrap; height: 300px;">
<div class="col-auto mb-3">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
So what I am trying to achieve is having a singular row of multiple cards of same width and height. In the above code what I have done is in a row just pasted 4 instances of a bootstrap card.
To achieve what I want I have tried the following things- 1. Tried using different variation in for columns like "col-lg-3". 2. Tried keeping a fixed width for the cards. 3. Tried using a card deck.
Problem that I am facing is that no matter what I try while arranging the cards in just a row the cards keep arranging each other vertically and not horizontally.
If I use a card deck then the cards align horizontally as I require but then the deck adjusts ALL THE CARDS to fit the screen size by reducing their width, but what I actually want to achieve is that all the cards are aligned horizontally with constant width with a horizontal scroll. I'd appreciate if anyone can help me with this.
