Update 2021 Bootstrap 5
The flexbox utils still exist in Bootstrap 5: https://codeply.com/p/Vo13PAGO7e
<div class="container-fluid py-2">
<h2 class="font-weight-light">Bootstrap 5 Horizontal Scrolling Cards with Flexbox</h2>
<div class="d-flex flex-row flex-nowrap">
<div class="card card-body">Card</div>
<div class="card card-body">Card</div>
<div class="card card-body">Card</div>
...
</div>
</div>
Update 2019 Bootstrap 4.3+
The flexbox method still works, so you can use the flexbox utils in the container of the cards: https://codeply.com/go/PF4APyGj7F
Original Answer Bootstrap 4 alpha
Now that Bootstrap 4 Alpha 6 uses flexbox, this horizontal scrolling layout is much easier. You can simply use flex-row
and flex-nowrap
:
<div class="container-fluid">
<div class="row flex-row flex-nowrap">
<div class="col-3">
<div class="card card-block">Card</div>
</div>
<div class="col-3">
<div class="card card-block">Card</div>
</div>
<div class="col-3">
<div class="card card-block">Card</div>
</div>
<div class="col-3">
<div class="card card-block">Card</div>
</div>
...
</div>
</div>
https://codeply.com/go/GoFQqQAFhN