Bootstrap Card / Card-columns Breaking

Question

I need help solving this puzzle. When using card-columns and cards in bootstrap 4.1, the row breaks when I don't want it to. I have column-count set to 4, and when there are 4 cards it looks perfect. When the fifth card is added it breaks the row to 3 cards on top and 2 below. Does anyone know of a fix for this. I have included a screenshot of all my rows below, Broke into 2 sections. Second section "Transitional", is where the issue is currently occurring.

I have played around with making the widows and orphans set to unset, but that didn't work. Cards are set to inline-block.

My Code is here: https://jsfiddle.net/alecruckus/1savgxjm/10/

</div>

Answer 1

Here you can find the "problem": https://getbootstrap.com/docs/4.0/components/card/

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

If there is space, cards are FIRST ordered from top to bottom, THEN left to right. You can understand exactly the order using numbers ( I used the default Boostrap column-count ):

 <div class="container"> <h1>First Set of 4</h1> <div class="card-columns"> <!-- Cabinet 1 --> <div class="card"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>1</b></p> <p>Model</p> </div> <!-- Cabinet 2 --> <div class="card"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>2</b></p> <p>Model</p> </div> <!-- Cabinet 3 --> <div class="card"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>3</b></p> <p>Model</p> </div> <!-- Cabinet 4 --> <div class="card"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>4</b></p> <p>Model</p> </div> </div> </div> <div class="container"> <h1>Second Set of 5</h1> <div class="card-columns"> <!-- Cabinet 1 --> <div class="card cabinet"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>1</b></p> <p>Model</p> </div> <!-- Cabinet 2 --> <div class="card cabinet"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>2</b></p> <p>Model</p> </div> <!-- Cabinet 3 --> <div class="card cabinet"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>3</b></p> <p>Model</p> </div> <!-- Cabinet 4 --> <div class="card cabinet"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>4</b></p> <p>Model</p> </div> <!-- Cabinet 5 --> <div class="card cabinet"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>5</b></p> <p>Model</p> </div> </div> </div> <!-- Optional JavaScript --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 

So, your code have no problem: it is the correct work of column-count : if the cards are many, you do not notice the "problem" of empty space.

If you want a row-direction disposition (ie FIRST left to right, THEN top to bottom), you could use the normal col-xx-xx bootstrap class:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="container"> <h1>First Set of 4</h1> <div class="row"> <div class="col-sm-3"> <!-- Cabinet 1 --> <div class="card cabinet mb-3"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>1</b></p> <p>Model</p> </div> </div> <div class="col-sm-3"> <!-- Cabinet 2 --> <div class="card cabinet mb-3"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>2</b></p> <p>Model</p> </div> </div> <div class="col-sm-3"> <!-- Cabinet 3 --> <div class="card cabinet mb-3"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>3</b></p> <p>Model</p> </div> </div> <div class="col-sm-3"> <!-- Cabinet 4 --> <div class="card cabinet mb-3"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>4</b></p> <p>Model</p> </div> </div> </div> </div> <div class="container"> <h1>Second Set of 5</h1> <div class="row"> <div class="col-sm-3"> <!-- Cabinet 1 --> <div class="card cabinet mb-3"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>1</b></p> <p>Model</p> </div> </div> <div class="col-sm-3"> <!-- Cabinet 2 --> <div class="card cabinet mb-3"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>2</b></p> <p>Model</p> </div> </div> <div class="col-sm-3"> <!-- Cabinet 3 --> <div class="card cabinet mb-3"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>3</b></p> <p>Model</p> </div> </div> <div class="col-sm-3"> <!-- Cabinet 4 --> <div class="card cabinet mb-3"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>4</b></p> <p>Model</p> </div> </div> <div class="col-sm-3"> <!-- Cabinet 5 --> <div class="card cabinet mb-3"> <img src="http://localhost:8888/wp-content/uploads/2018/10/S-1-1.png" alt=""> <p>Color <b>5</b></p> <p>Model</p> </div> </div> </div> </div>