How to Make Bootstrap 4 Cards the Same Height in Card-Columns

Bootstrap 4 Cards of same height in columns

The Bootstrap 4 columns already use flexbox so they are the same height. Just use h-100 for height:100% on the cards and they'll fill the columns...

https://www.codeply.com/go/hKhPuxoovH

<div class="container">
    <div class="row">
            <div class="col-md-4 col-sm-6 col-12">
                <div class="card h-100">
                    <img src="images/dieux/Agni.jpg" alt="BeatsX">
                    <h1 class="card-title">BeatsX</h1>
                    <div class="text-center">
                        <p>1188.0000</p>
                        <p>2017-06-09 10:00:00</p>
                        <a href="god.php?ID=2" target="_blank" class="btn btn-primary">Voir la Fiche</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12">
                <div class="card h-100">
                    <img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
                    <h1 class="card-title">Nitendo Switch</h1>
                    <div class="text-center">
                        <p>2899.0000</p>
                        <p>2017-06-10 10:00:00</p>
                        <a href="god.php?ID=3" target="_blank" class="btn btn-primary">Voir la Fiche</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12">
                <div class="card h-100">
                    <img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
                    <h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
                    <div class="text-center">
                        <p>6388.0000</p>
                        <p>2017-06-06 10:00:00</p>
                        <a href="god.php?ID=1" target="_blank" class="btn btn-primary">Voir la Fiche</a>
                    </div>
                </div>
            </div>
        </div>
</div>

Also there is no reason to float the cards, and the .col-* should be directly in the .row, not .card-deck

Bootstrap 4 Cards Same Height and Bottom Justified

Thanks to inputforcolor for help with the solution below, which keeps the cards the same height AND pushes the part I was looking for to the bottom.

<div class="col-sm-12 col-md-6 col-lg-4 d-flex align-self-stretch">
    <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
            <h5 class="card-title text-uppercase">Longer title here that wraps two lines</h5>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="mt-auto border border-danger">
                <p class="text-uppercase mb-0">Donors: 123</p>
                <p class="text-uppercase">Funded: $1,234</p>
                <a href="#" class="btn btn-info btn-block">View Details</a>
            </div>
        </div>
    </div>
</div>

Using .d-flex and .flex-fill to make cards the same height

The columns are the same height, but the cards need to fill the height of the columns. Use h-100 for this...

<div class="row row-cols-1 row-cols-md-2">
    <div class="d-flex col mb-3">
        <doors class="flex-fill">
            <div class="card bg-inf h-100">
                <div class="card-header"> AAA </div>
                <div class="card-body">
                    <ul class="list-group">
                        <door>
                            <li class="list-group-item">A1</li>
                        </door>
                        <door>
                            <li class="list-group-item">A2</li>
                        </door>
                    </ul>
                </div>
            </div>
        </doors>
    </div>
    <div class="d-flex col mb-3">
        <commands class="flex-fill">
            <div class="card h-100">
                <div class="card-header"> BBB </div>
                <div class="card-body">
                    <ul class="list-group">
                        <command>
                            <li class="list-group-item">B1</li>
                        </command>
                        <command>
                            <li class="list-group-item">B2</li>
                        </command>
                        <command>
                            <li class="list-group-item">B3</li>
                        </command>
                    </ul>
                </div>
            </div>
        </commands>
    </div>
</div>

https://codeply.com/p/ouWsT4CuSb

Bootstrap 4 responsive card columns with equal height cards

Did something, I hope this is what you were looking for

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex align-content-stretch flex-wrap card-columns-group">

  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in supporting text below as a natural lead-in supporting text below as a natural lead-in supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in ting text below as a natural lead-in ting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
</div>

Bootstrap 4 cards responsive with same height on multiple rows

How about adding style="height: 200px; max-height: 200px; overflow-y: auto;" to all the divs with the class of card-body

Here's the code:

<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
    
        </div>
    </div>
</section>

This will make all the rows of the same height.

how can i make cards equal height in react with react bootstrap?

If you can add custom CSS, using "display: flex" on the card's parent should do the trick. If you need to force the strech, you can add "align-items: stretch".

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.card {
  background: grey;
  padding: 15px;
  width: 30%;
}
<div class="wrapper">
  <div class="card">
    <h1>hello</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
    </p>
  </div>
    <div class="card">
    <h1>hello</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
    </p>
        <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
    </p>
  </div>
    <div class="card">
    <h1>hello</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
    </p>
  </div>
</div>

Related Topics

Angular 5 File Upload: Failed to Set the 'Value' Property on 'Htmlinputelement'

How to Run a HTML File from Terminal

Remove Scrollbar from Iframe

Angular (Typescript): How to Set Option of Selected to 'Selected' If Two-Way Binded

How to Affect Other Elements When One Element Is Hovered

How to Use Two Ngfor in HTML Angular 4

Css Height 100% Is Not Always Equal to the Direct Parent

How to Make Custom Dots in Owl Carousel

Make Container Shrink-To-Fit Child Elements as They Wrap

Remove Whitespace from Svg

Css-Only Masonry Layout

Max Parallel Http Connections in a Browser

Applying an Ellipsis to Multiline Text

How to Position My Div At the Bottom of Its Container

Set Cellpadding and Cellspacing in Css

Google Apps Script to Open a Url

Why Position:Sticky Is Not Working When the Element Is Wrapped Inside Another One

Htmlspecialchars() Expects Parameter 1 to Be String Array Given


Leave a reply



Submit