Horizontally scrollable list of cards in Bootstrap

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)