CODEWITHSUNDEEP
cssflexboxtwitter-bootstrap-4
Vivien Adnot
Vivien Adnot

Reputation: 1257

How to make bootstrap cards' container stretch horizontally?

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>

Upvotes: 1

Views: 7123

Answers (1)

Asons
Asons

Reputation: 87191

If you give the card-deck a 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>

Upvotes: 2

Related Questions