How to make bootstrap cards' container stretch horizontally?

Question

I'm playing with bootstrap 4 cards. ( https://v4-alpha.getbootstrap.com/components/card/ )

I have a container with a card-desk inside. I would like my container to stretch horizontally as long as I plug new cards inside (an horizontal scrollbar should appear at some moment).

By default, there is a break when the width of my container is greater than the screen's width. And bootstrap creates a second row beside with the remaining cards.

You can see what i want to achieve by looking at trello.

I'm looking forward to read your ideas ! Thanks

Edit: here is the code

<div class="container">
    <div class="card-deck">
        <div class="card">
            <h3 class="card-header">Paris</h3>

            <div class="card-block">
                <h4 class="card-title">Bruno</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
            </div>
        </div>

        <div class="card">
            <h3 class="card-header">Paris</h3>

            <div class="card-block">
                <h4 class="card-title">Bruno</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
            </div>
        </div>
    </div>
</div>

Answer 1

If you give the card-deck a display: inline-flex; flex-wrap: nowrap; display: inline-flex; flex-wrap: nowrap; they will stay on one line

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <style> .card-deck { display: inline-flex; flex-wrap: nowrap; } </style> <div class="container-fluid"> <div class="card-deck"> <div class="card"> <h3 class="card-header">Paris</h3> <div class="card-block"> <h4 class="card-title">Bruno</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> <div class="card"> <h3 class="card-header">Paris</h3> <div class="card-block"> <h4 class="card-title">Bruno</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> <div class="card"> <h3 class="card-header">Paris</h3> <div class="card-block"> <h4 class="card-title">Bruno</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> <div class="card"> <h3 class="card-header">Paris</h3> <div class="card-block"> <h4 class="card-title">Bruno</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> <div class="card"> <h3 class="card-header">Paris</h3> <div class="card-block"> <h4 class="card-title">Bruno</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> <div class="card"> <h3 class="card-header">Paris</h3> <div class="card-block"> <h4 class="card-title">Bruno</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> <div class="card"> <h3 class="card-header">Paris</h3> <div class="card-block"> <h4 class="card-title">Bruno</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div> </div>