I am trying to use a card-deck
in bootstrap 4 which contain cards with different width.
For single cards you do the following to change the width (or use class w-25
, w-50
or w-75
if the 25%, 50% or 75% width fit your needs):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
<br>
<div class="card" style="width: 30%">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
<br>
<div class="card" style="width: 70%">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
</div>
For a card-deck
containing cards with equal width you do this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1>Card Deck with equal width</h1>
<div class="card-deck">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
</div>
<br>
</div>
To have a card-deck
containing cards with different width I tried this (without success):
Note: The cards are displayed with equal width even that they have different width...
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="card-deck">
<div class="card" style="width: 30%">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
<div class="card" style="width: 70%">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
</div>
</div>
so obviously I'm doing something wrong here (or bootstrap 4 is not supporting this). any suggestions how to use a card-deck
containing cards with different width?
To set the width of something, you can use the width property: width: 500px; width: 50%; width: 50vw; There are different units you can use, such as px (pixels) % (percentage of page width) and vw (percentage of window width). There may also be others, but those are the ones I know of.
Controlling Bootstrap Card Component Width and Height Normally, the height of the card will be adjusted to vertically fit the content of the card, but we can also control it using custom CSS (for example, style=" height: 10rem;" ) or Bootstrap's sizing utilities (for examle, <div class="card h-200"> ).
To get it to the same height, add Bootstrap class h-100 to all the cards or use CSS height.
As indicated in the docs, the card-deck
is equal width cards. If you want different width wrap the cards in the Bootstrap grid...
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card h-100">
...
</div>
</div>
<div class="col-md-3">
<div class="card h-100">
...
</div>
</div>
<div class="col-md-3">
<div class="card h-100">
...
</div>
</div>
</div>
</div>
https://www.codeply.com/go/8qpkLw5Dfv
Or, use custom CSS to set the flex basis and max-width of the card-deck cards...
.card-deck .cw-30 {
flex: 1 0 30%;
max-width: 30%;
}
.card-deck .cw-70 {
flex: 1 0 70%;
max-width: 70%;
}
https://www.codeply.com/go/JiAEZdT0Ob
Related: Cards with different sizes in Bootstrap 4 card-group
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With