Bootstrap Card / Card-columns Breaking
0
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>
html css twitter-bootstrap wordpress-theming multiple-columns
edited Dec 5 '18 at 20:00
j08691
167k20195215
asked Nov 20 '18 at 18:11
Alec FriedmanAlec Friedman
358
add a comment |
0
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>
html css twitter-bootstrap wordpress-theming multiple-columns
edited Dec 5 '18 at 20:00
j08691
167k20195215
asked Nov 20 '18 at 18:11
Alec FriedmanAlec Friedman
358
Please, add also your code. Only with an image, it is impossible to help you to find the problem.
– ReSedano
Nov 20 '18 at 19:16
Here is my fiddle jsfiddle.net/alecruckus/1savgxjm/10
– Alec Friedman
Nov 20 '18 at 20:50
add a comment |
0
0
0
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>
html css twitter-bootstrap wordpress-theming multiple-columns
edited Dec 5 '18 at 20:00
j08691
167k20195215
asked Nov 20 '18 at 18:11
Alec FriedmanAlec Friedman
358
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>
html css twitter-bootstrap wordpress-theming multiple-columns
html css twitter-bootstrap wordpress-theming multiple-columns
edited Dec 5 '18 at 20:00
j08691
167k20195215
asked Nov 20 '18 at 18:11
Alec FriedmanAlec Friedman
358
edited Dec 5 '18 at 20:00
j08691
167k20195215
asked Nov 20 '18 at 18:11
Alec FriedmanAlec Friedman
358
edited Dec 5 '18 at 20:00
j08691
167k20195215
edited Dec 5 '18 at 20:00
j08691
167k20195215
edited Dec 5 '18 at 20:00
j08691
167k20195215
167k20195215
asked Nov 20 '18 at 18:11
Alec FriedmanAlec Friedman
358
asked Nov 20 '18 at 18:11
Alec FriedmanAlec Friedman
358
asked Nov 20 '18 at 18:11
Alec FriedmanAlec Friedman
358
358
Please, add also your code. Only with an image, it is impossible to help you to find the problem.
– ReSedano
Nov 20 '18 at 19:16
Here is my fiddle jsfiddle.net/alecruckus/1savgxjm/10
– Alec Friedman
Nov 20 '18 at 20:50
add a comment |
Please, add also your code. Only with an image, it is impossible to help you to find the problem.
– ReSedano
Nov 20 '18 at 19:16
Here is my fiddle jsfiddle.net/alecruckus/1savgxjm/10
– Alec Friedman
Nov 20 '18 at 20:50
Please, add also your code. Only with an image, it is impossible to help you to find the problem.
– ReSedano
Nov 20 '18 at 19:16
Please, add also your code. Only with an image, it is impossible to help you to find the problem.
– ReSedano
Nov 20 '18 at 19:16
Here is my fiddle jsfiddle.net/alecruckus/1savgxjm/10
– Alec Friedman
Nov 20 '18 at 20:50
Here is my fiddle jsfiddle.net/alecruckus/1savgxjm/10
– Alec Friedman
Nov 20 '18 at 20:50
add a comment |
1 Answer
1
active
oldest
votes
0
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 (i.e 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>answered Nov 20 '18 at 23:29
ReSedanoReSedano
2,7002516
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399037%2fbootstrap-card-card-columns-breaking%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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 (i.e 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>answered Nov 20 '18 at 23:29
ReSedanoReSedano
2,7002516
add a comment |
0
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 (i.e 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>answered Nov 20 '18 at 23:29
ReSedanoReSedano
2,7002516
add a comment |
0
0
0
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 (i.e 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>answered Nov 20 '18 at 23:29
ReSedanoReSedano
2,7002516
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 (i.e 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><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><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><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><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>answered Nov 20 '18 at 23:29
ReSedanoReSedano
2,7002516
answered Nov 20 '18 at 23:29
ReSedanoReSedano
2,7002516
answered Nov 20 '18 at 23:29
ReSedanoReSedano
2,7002516
answered Nov 20 '18 at 23:29
ReSedanoReSedano
2,7002516
2,7002516
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399037%2fbootstrap-card-card-columns-breaking%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please, add also your code. Only with an image, it is impossible to help you to find the problem.
– ReSedano
Nov 20 '18 at 19:16
Here is my fiddle jsfiddle.net/alecruckus/1savgxjm/10
– Alec Friedman
Nov 20 '18 at 20:50