Achieve equal dynamic width and height of bootstrap cards while controlling number of columns [duplicate] Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!Bootstrap cards with 100% height and margin bottomBootstrap 4 Cards of same height in columnsBootstrap 4 - displaying cards in a custom wayBootstrap 4 card-deck with number of columns based on viewportHow to limit number of columns of card-deck?bootstrap 4 card-deck containing cards with different widthFive equal columns in twitter bootstrapHow to make Bootstrap 4 cards the same height in card-columns?Bootstrap 4 card-columns with different widthBootstrap 4 card-columns widthBootstrap equal height columnsBootstrap 4 card-columns of same heightBootstrap Columns equal heightEqual Column Heights Bootstrap 4 in Nested columnsEqual column heights BootstrapIs it possible to specify the number of columns for a bootstrap card deck?
Why is Nikon 1.4g better when Nikon 1.8g is sharper?
What is the topology associated with the algebras for the ultrafilter monad?
Drawing without replacement: why is the order of draw irrelevant?
Using audio cues to encourage good posture
Why does it sometimes sound good to play a grace note as a lead in to a note in a melody?
How come Sam didn't become Lord of Horn Hill?
How fail-safe is nr as stop bytes?
What was the first language to use conditional keywords?
How much damage would a cupful of neutron star matter do to the Earth?
Has negative voting ever been officially implemented in elections, or seriously proposed, or even studied?
Why does the remaining Rebel fleet at the end of Rogue One seem dramatically larger than the one in A New Hope?
Putting class ranking in CV, but against dept guidelines
What is "gratricide"?
Do wooden building fires get hotter than 600°C?
What is this clumpy 20-30cm high yellow-flowered plant?
How does Python know the values already stored in its memory?
SF book about people trapped in a series of worlds they imagine
Why do early math courses focus on the cross sections of a cone and not on other 3D objects?
Do any jurisdictions seriously consider reclassifying social media websites as publishers?
Amount of permutations on an NxNxN Rubik's Cube
What order were files/directories outputted in dir?
Generate an RGB colour grid
What is a fractional matching?
Why do we need to use the builder design pattern when we can do the same thing with setters?
Achieve equal dynamic width and height of bootstrap cards while controlling number of columns [duplicate]
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!Bootstrap cards with 100% height and margin bottomBootstrap 4 Cards of same height in columnsBootstrap 4 - displaying cards in a custom wayBootstrap 4 card-deck with number of columns based on viewportHow to limit number of columns of card-deck?bootstrap 4 card-deck containing cards with different widthFive equal columns in twitter bootstrapHow to make Bootstrap 4 cards the same height in card-columns?Bootstrap 4 card-columns with different widthBootstrap 4 card-columns widthBootstrap equal height columnsBootstrap 4 card-columns of same heightBootstrap Columns equal heightEqual Column Heights Bootstrap 4 in Nested columnsEqual column heights BootstrapIs it possible to specify the number of columns for a bootstrap card deck?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
-1
This question already has an answer here:
Bootstrap 4 Cards of same height in columns
6 answers
Bootstrap 4 - displaying cards in a custom way
2 answers
Bootstrap cards with 100% height and margin bottom
1 answer
I'm trying to specify the number of columns for a bootstrap card deck because I want equal width and height for each card.
The height MUST be dynamic based on the content of card body just like a card deck provides and provide equal spacing between all cards.
I can specify the number of columns using ROW and COL-* with a card class, but then the height and spacing between all the cards is random based on the card body. The CARD-DECK class gives me the equal height and width for each card but I cannot seem to control the number of columns which in this case I would like to be two columns.
I asked this question previously and it was automatically closed by referencing the following questions but I have not seen any of them successfully address having the same height on each card when there are several rows of cards.
Bootstrap 4 card-deck with number of columns based on viewport
bootstrap 4 card-deck containing cards with different width
How to limit number of columns of card-deck?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
<div class="card-deck">
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>bootstrap-4
asked Mar 8 at 20:36
GeeknGeekn
376315
marked as duplicate by Zim bootstrap-4
Users with the bootstrap-4 badge can single-handedly close bootstrap-4 questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 8 at 21:36
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
|
show 5 more comments
-1
This question already has an answer here:
Bootstrap 4 Cards of same height in columns
6 answers
Bootstrap 4 - displaying cards in a custom way
2 answers
Bootstrap cards with 100% height and margin bottom
1 answer
I'm trying to specify the number of columns for a bootstrap card deck because I want equal width and height for each card.
The height MUST be dynamic based on the content of card body just like a card deck provides and provide equal spacing between all cards.
I can specify the number of columns using ROW and COL-* with a card class, but then the height and spacing between all the cards is random based on the card body. The CARD-DECK class gives me the equal height and width for each card but I cannot seem to control the number of columns which in this case I would like to be two columns.
I asked this question previously and it was automatically closed by referencing the following questions but I have not seen any of them successfully address having the same height on each card when there are several rows of cards.
Bootstrap 4 card-deck with number of columns based on viewport
bootstrap 4 card-deck containing cards with different width
How to limit number of columns of card-deck?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
<div class="card-deck">
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>bootstrap-4
asked Mar 8 at 20:36
GeeknGeekn
376315
marked as duplicate by Zim bootstrap-4
Users with the bootstrap-4 badge can single-handedly close bootstrap-4 questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 8 at 21:36
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Actually it does not do what I need. Your code has different heights for each row. They looked the same at first glance, but they don't behave like a card-deck where every card has the same height in every row.
– Geekn
Mar 8 at 21:50
card decks also use flexbox where each card is height of the tallest in that row, and card decks only have 1 row, until they stack vertically when they become different height. "Your code has different heights for each row." -- yeah that's how flexbox works and seperate card-decks would be no different... height is controlled by the tallest content. the only thing you can do is set min height.
– Zim
Mar 8 at 22:25
But that's the whole point of the question. A single card deck controls the height of every card, but doesn't allow you to control the number of columns. To control number of columns, I used a single ROW and many COL but then I lose the behavior of card deck for every row. Hence the question that you keep saying is answered but I have still yet to find one. : (
– Geekn
Mar 8 at 22:28
Correct but every card within each "visible" row of a card deck has the same height. That's all I want. How do I get card deck behavior but limit the max number of columns it uses?
– Geekn
Mar 8 at 22:30
As explained in the docs, card-decks are not responsive: "For the time being, these layout options are not yet responsive." therefore there's no way to control width.
– Zim
Mar 8 at 22:32
|
show 5 more comments
-1
-1
-1
This question already has an answer here:
Bootstrap 4 Cards of same height in columns
6 answers
Bootstrap 4 - displaying cards in a custom way
2 answers
Bootstrap cards with 100% height and margin bottom
1 answer
I'm trying to specify the number of columns for a bootstrap card deck because I want equal width and height for each card.
The height MUST be dynamic based on the content of card body just like a card deck provides and provide equal spacing between all cards.
I can specify the number of columns using ROW and COL-* with a card class, but then the height and spacing between all the cards is random based on the card body. The CARD-DECK class gives me the equal height and width for each card but I cannot seem to control the number of columns which in this case I would like to be two columns.
I asked this question previously and it was automatically closed by referencing the following questions but I have not seen any of them successfully address having the same height on each card when there are several rows of cards.
Bootstrap 4 card-deck with number of columns based on viewport
bootstrap 4 card-deck containing cards with different width
How to limit number of columns of card-deck?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
<div class="card-deck">
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>bootstrap-4
asked Mar 8 at 20:36
GeeknGeekn
376315
This question already has an answer here:
Bootstrap 4 Cards of same height in columns
6 answers
Bootstrap 4 - displaying cards in a custom way
2 answers
Bootstrap cards with 100% height and margin bottom
1 answer
I'm trying to specify the number of columns for a bootstrap card deck because I want equal width and height for each card.
The height MUST be dynamic based on the content of card body just like a card deck provides and provide equal spacing between all cards.
I can specify the number of columns using ROW and COL-* with a card class, but then the height and spacing between all the cards is random based on the card body. The CARD-DECK class gives me the equal height and width for each card but I cannot seem to control the number of columns which in this case I would like to be two columns.
I asked this question previously and it was automatically closed by referencing the following questions but I have not seen any of them successfully address having the same height on each card when there are several rows of cards.
Bootstrap 4 card-deck with number of columns based on viewport
bootstrap 4 card-deck containing cards with different width
How to limit number of columns of card-deck?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
<div class="card-deck">
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>This question already has an answer here:
Bootstrap 4 Cards of same height in columns
6 answers
Bootstrap 4 - displaying cards in a custom way
2 answers
Bootstrap cards with 100% height and margin bottom
1 answer
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
<div class="card-deck">
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
<div class="card-deck">
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
<div class="card mb-3 bg-success">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>bootstrap-4
bootstrap-4
asked Mar 8 at 20:36
GeeknGeekn
376315
asked Mar 8 at 20:36
GeeknGeekn
376315
edited Mar 8 at 22:18
Geekn
asked Mar 8 at 20:36
GeeknGeekn
376315
asked Mar 8 at 20:36
GeeknGeekn
376315
asked Mar 8 at 20:36
GeeknGeekn
376315
376315
marked as duplicate by Zim bootstrap-4
Users with the bootstrap-4 badge can single-handedly close bootstrap-4 questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 8 at 21:36
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Zim bootstrap-4
Users with the bootstrap-4 badge can single-handedly close bootstrap-4 questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 8 at 21:36
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Actually it does not do what I need. Your code has different heights for each row. They looked the same at first glance, but they don't behave like a card-deck where every card has the same height in every row.
– Geekn
Mar 8 at 21:50
card decks also use flexbox where each card is height of the tallest in that row, and card decks only have 1 row, until they stack vertically when they become different height. "Your code has different heights for each row." -- yeah that's how flexbox works and seperate card-decks would be no different... height is controlled by the tallest content. the only thing you can do is set min height.
– Zim
Mar 8 at 22:25
But that's the whole point of the question. A single card deck controls the height of every card, but doesn't allow you to control the number of columns. To control number of columns, I used a single ROW and many COL but then I lose the behavior of card deck for every row. Hence the question that you keep saying is answered but I have still yet to find one. : (
– Geekn
Mar 8 at 22:28
Correct but every card within each "visible" row of a card deck has the same height. That's all I want. How do I get card deck behavior but limit the max number of columns it uses?
– Geekn
Mar 8 at 22:30
As explained in the docs, card-decks are not responsive: "For the time being, these layout options are not yet responsive." therefore there's no way to control width.
– Zim
Mar 8 at 22:32
|
show 5 more comments
Actually it does not do what I need. Your code has different heights for each row. They looked the same at first glance, but they don't behave like a card-deck where every card has the same height in every row.
– Geekn
Mar 8 at 21:50
card decks also use flexbox where each card is height of the tallest in that row, and card decks only have 1 row, until they stack vertically when they become different height. "Your code has different heights for each row." -- yeah that's how flexbox works and seperate card-decks would be no different... height is controlled by the tallest content. the only thing you can do is set min height.
– Zim
Mar 8 at 22:25
But that's the whole point of the question. A single card deck controls the height of every card, but doesn't allow you to control the number of columns. To control number of columns, I used a single ROW and many COL but then I lose the behavior of card deck for every row. Hence the question that you keep saying is answered but I have still yet to find one. : (
– Geekn
Mar 8 at 22:28
Correct but every card within each "visible" row of a card deck has the same height. That's all I want. How do I get card deck behavior but limit the max number of columns it uses?
– Geekn
Mar 8 at 22:30
As explained in the docs, card-decks are not responsive: "For the time being, these layout options are not yet responsive." therefore there's no way to control width.
– Zim
Mar 8 at 22:32
Actually it does not do what I need. Your code has different heights for each row. They looked the same at first glance, but they don't behave like a card-deck where every card has the same height in every row.
– Geekn
Mar 8 at 21:50
Actually it does not do what I need. Your code has different heights for each row. They looked the same at first glance, but they don't behave like a card-deck where every card has the same height in every row.
– Geekn
Mar 8 at 21:50
card decks also use flexbox where each card is height of the tallest in that row, and card decks only have 1 row, until they stack vertically when they become different height. "Your code has different heights for each row." -- yeah that's how flexbox works and seperate card-decks would be no different... height is controlled by the tallest content. the only thing you can do is set min height.
– Zim
Mar 8 at 22:25
card decks also use flexbox where each card is height of the tallest in that row, and card decks only have 1 row, until they stack vertically when they become different height. "Your code has different heights for each row." -- yeah that's how flexbox works and seperate card-decks would be no different... height is controlled by the tallest content. the only thing you can do is set min height.
– Zim
Mar 8 at 22:25
But that's the whole point of the question. A single card deck controls the height of every card, but doesn't allow you to control the number of columns. To control number of columns, I used a single ROW and many COL but then I lose the behavior of card deck for every row. Hence the question that you keep saying is answered but I have still yet to find one. : (
– Geekn
Mar 8 at 22:28
But that's the whole point of the question. A single card deck controls the height of every card, but doesn't allow you to control the number of columns. To control number of columns, I used a single ROW and many COL but then I lose the behavior of card deck for every row. Hence the question that you keep saying is answered but I have still yet to find one. : (
– Geekn
Mar 8 at 22:28
Correct but every card within each "visible" row of a card deck has the same height. That's all I want. How do I get card deck behavior but limit the max number of columns it uses?
– Geekn
Mar 8 at 22:30
Correct but every card within each "visible" row of a card deck has the same height. That's all I want. How do I get card deck behavior but limit the max number of columns it uses?
– Geekn
Mar 8 at 22:30
As explained in the docs, card-decks are not responsive: "For the time being, these layout options are not yet responsive." therefore there's no way to control width.
– Zim
Mar 8 at 22:32
As explained in the docs, card-decks are not responsive: "For the time being, these layout options are not yet responsive." therefore there's no way to control width.
– Zim
Mar 8 at 22:32
|
show 5 more comments
1 Answer
1
active
oldest
votes
0
Bootstrap provides classes to make content span 25%, 50%, 75% or 100% of the width or height of the container for an element, you can add the class h-100 to the cards so they use the full available height, which will be increased if the column with more content gets bigger.
Docs here: https://getbootstrap.com/docs/4.3/utilities/sizing/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
</div>answered Mar 8 at 21:13
IvanS95IvanS95
2,572822
Not really...each row has a different height. A card deck provides the same height on every row for every card.
– Geekn
Mar 8 at 21:59
Upon inspecting them with Chrome Dev Tools each row has the same height; can you show where you see the difference?
– IvanS95
Mar 8 at 22:09
Sure...I could be doing something wrong but I added your code snippet to my post and just removed some text from card 3 to how the second row is shorter than the first one.
– Geekn
Mar 8 at 22:14
Ohhhhh yeah, I know what you mean.. sure that's because the cards on one row have less content so the height is reduced; I'll see what can be done about that
– IvanS95
Mar 8 at 22:15
Exactly...the card deck takes care of that, but I'm can't figure out how to mimic that but also control the columns. I'm gonna remove that extra snippet so as not to confuse anyone. Not sure why @Zim keep closing my question - LOL. Can you see where his referenced answers resolve the height issue?
– Geekn
Mar 8 at 22:17
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Bootstrap provides classes to make content span 25%, 50%, 75% or 100% of the width or height of the container for an element, you can add the class h-100 to the cards so they use the full available height, which will be increased if the column with more content gets bigger.
Docs here: https://getbootstrap.com/docs/4.3/utilities/sizing/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
</div>answered Mar 8 at 21:13
IvanS95IvanS95
2,572822
Not really...each row has a different height. A card deck provides the same height on every row for every card.
– Geekn
Mar 8 at 21:59
Upon inspecting them with Chrome Dev Tools each row has the same height; can you show where you see the difference?
– IvanS95
Mar 8 at 22:09
Sure...I could be doing something wrong but I added your code snippet to my post and just removed some text from card 3 to how the second row is shorter than the first one.
– Geekn
Mar 8 at 22:14
Ohhhhh yeah, I know what you mean.. sure that's because the cards on one row have less content so the height is reduced; I'll see what can be done about that
– IvanS95
Mar 8 at 22:15
Exactly...the card deck takes care of that, but I'm can't figure out how to mimic that but also control the columns. I'm gonna remove that extra snippet so as not to confuse anyone. Not sure why @Zim keep closing my question - LOL. Can you see where his referenced answers resolve the height issue?
– Geekn
Mar 8 at 22:17
add a comment |
0
Bootstrap provides classes to make content span 25%, 50%, 75% or 100% of the width or height of the container for an element, you can add the class h-100 to the cards so they use the full available height, which will be increased if the column with more content gets bigger.
Docs here: https://getbootstrap.com/docs/4.3/utilities/sizing/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
</div>answered Mar 8 at 21:13
IvanS95IvanS95
2,572822
Not really...each row has a different height. A card deck provides the same height on every row for every card.
– Geekn
Mar 8 at 21:59
Upon inspecting them with Chrome Dev Tools each row has the same height; can you show where you see the difference?
– IvanS95
Mar 8 at 22:09
Sure...I could be doing something wrong but I added your code snippet to my post and just removed some text from card 3 to how the second row is shorter than the first one.
– Geekn
Mar 8 at 22:14
Ohhhhh yeah, I know what you mean.. sure that's because the cards on one row have less content so the height is reduced; I'll see what can be done about that
– IvanS95
Mar 8 at 22:15
Exactly...the card deck takes care of that, but I'm can't figure out how to mimic that but also control the columns. I'm gonna remove that extra snippet so as not to confuse anyone. Not sure why @Zim keep closing my question - LOL. Can you see where his referenced answers resolve the height issue?
– Geekn
Mar 8 at 22:17
add a comment |
0
0
0
Bootstrap provides classes to make content span 25%, 50%, 75% or 100% of the width or height of the container for an element, you can add the class h-100 to the cards so they use the full available height, which will be increased if the column with more content gets bigger.
Docs here: https://getbootstrap.com/docs/4.3/utilities/sizing/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
</div>answered Mar 8 at 21:13
IvanS95IvanS95
2,572822
Bootstrap provides classes to make content span 25%, 50%, 75% or 100% of the width or height of the container for an element, you can add the class h-100 to the cards so they use the full available height, which will be increased if the column with more content gets bigger.
Docs here: https://getbootstrap.com/docs/4.3/utilities/sizing/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
</div><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
</div><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100 mb-3 bg-primary">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</div>
</div>
</div>
</div>
</div>answered Mar 8 at 21:13
IvanS95IvanS95
2,572822
edited Mar 8 at 22:18
answered Mar 8 at 21:13
IvanS95IvanS95
2,572822
answered Mar 8 at 21:13
IvanS95IvanS95
2,572822
answered Mar 8 at 21:13
IvanS95IvanS95
2,572822
2,572822
Not really...each row has a different height. A card deck provides the same height on every row for every card.
– Geekn
Mar 8 at 21:59
Upon inspecting them with Chrome Dev Tools each row has the same height; can you show where you see the difference?
– IvanS95
Mar 8 at 22:09
Sure...I could be doing something wrong but I added your code snippet to my post and just removed some text from card 3 to how the second row is shorter than the first one.
– Geekn
Mar 8 at 22:14
Ohhhhh yeah, I know what you mean.. sure that's because the cards on one row have less content so the height is reduced; I'll see what can be done about that
– IvanS95
Mar 8 at 22:15
Exactly...the card deck takes care of that, but I'm can't figure out how to mimic that but also control the columns. I'm gonna remove that extra snippet so as not to confuse anyone. Not sure why @Zim keep closing my question - LOL. Can you see where his referenced answers resolve the height issue?
– Geekn
Mar 8 at 22:17
add a comment |
Not really...each row has a different height. A card deck provides the same height on every row for every card.
– Geekn
Mar 8 at 21:59
Upon inspecting them with Chrome Dev Tools each row has the same height; can you show where you see the difference?
– IvanS95
Mar 8 at 22:09
Sure...I could be doing something wrong but I added your code snippet to my post and just removed some text from card 3 to how the second row is shorter than the first one.
– Geekn
Mar 8 at 22:14
Ohhhhh yeah, I know what you mean.. sure that's because the cards on one row have less content so the height is reduced; I'll see what can be done about that
– IvanS95
Mar 8 at 22:15
Exactly...the card deck takes care of that, but I'm can't figure out how to mimic that but also control the columns. I'm gonna remove that extra snippet so as not to confuse anyone. Not sure why @Zim keep closing my question - LOL. Can you see where his referenced answers resolve the height issue?
– Geekn
Mar 8 at 22:17
Not really...each row has a different height. A card deck provides the same height on every row for every card.
– Geekn
Mar 8 at 21:59
Not really...each row has a different height. A card deck provides the same height on every row for every card.
– Geekn
Mar 8 at 21:59
Upon inspecting them with Chrome Dev Tools each row has the same height; can you show where you see the difference?
– IvanS95
Mar 8 at 22:09
Upon inspecting them with Chrome Dev Tools each row has the same height; can you show where you see the difference?
– IvanS95
Mar 8 at 22:09
Sure...I could be doing something wrong but I added your code snippet to my post and just removed some text from card 3 to how the second row is shorter than the first one.
– Geekn
Mar 8 at 22:14
Sure...I could be doing something wrong but I added your code snippet to my post and just removed some text from card 3 to how the second row is shorter than the first one.
– Geekn
Mar 8 at 22:14
Ohhhhh yeah, I know what you mean.. sure that's because the cards on one row have less content so the height is reduced; I'll see what can be done about that
– IvanS95
Mar 8 at 22:15
Ohhhhh yeah, I know what you mean.. sure that's because the cards on one row have less content so the height is reduced; I'll see what can be done about that
– IvanS95
Mar 8 at 22:15
Exactly...the card deck takes care of that, but I'm can't figure out how to mimic that but also control the columns. I'm gonna remove that extra snippet so as not to confuse anyone. Not sure why @Zim keep closing my question - LOL. Can you see where his referenced answers resolve the height issue?
– Geekn
Mar 8 at 22:17
Exactly...the card deck takes care of that, but I'm can't figure out how to mimic that but also control the columns. I'm gonna remove that extra snippet so as not to confuse anyone. Not sure why @Zim keep closing my question - LOL. Can you see where his referenced answers resolve the height issue?
– Geekn
Mar 8 at 22:17
add a comment |
Actually it does not do what I need. Your code has different heights for each row. They looked the same at first glance, but they don't behave like a card-deck where every card has the same height in every row.
– Geekn
Mar 8 at 21:50
card decks also use flexbox where each card is height of the tallest in that row, and card decks only have 1 row, until they stack vertically when they become different height. "Your code has different heights for each row." -- yeah that's how flexbox works and seperate card-decks would be no different... height is controlled by the tallest content. the only thing you can do is set min height.
– Zim
Mar 8 at 22:25
But that's the whole point of the question. A single card deck controls the height of every card, but doesn't allow you to control the number of columns. To control number of columns, I used a single ROW and many COL but then I lose the behavior of card deck for every row. Hence the question that you keep saying is answered but I have still yet to find one. : (
– Geekn
Mar 8 at 22:28
Correct but every card within each "visible" row of a card deck has the same height. That's all I want. How do I get card deck behavior but limit the max number of columns it uses?
– Geekn
Mar 8 at 22:30
As explained in the docs, card-decks are not responsive: "For the time being, these layout options are not yet responsive." therefore there's no way to control width.
– Zim
Mar 8 at 22:32