Bootstrap 4 Cards of same height in columns

by

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="https://stackoverflow.com/questions/44451246/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="https://stackoverflow.com/questions/44451246/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="https://stackoverflow.com/questions/44451246/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

More Related Contents:

  1. Bootstrap row with columns of different height
  2. Bootstrap 4: Multilevel Dropdown Inside Navigation
  3. Animate/Shrink NavBar on scroll using Bootstrap
  4. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  5. How to center nav-items in Bootstrap? [duplicate]
  6. Create a responsive navbar sidebar “drawer” in Bootstrap?
  7. How to make Bootstrap 4 cards the same height in card-columns?
  8. Bootstrap – align button to the bottom of card
  9. Bootstrap 4 – Sticky footer – Dynamic footer height
  10. Bootstrap 4 – Responsive cards in card-columns
  11. Align the form to the center in Bootstrap 4 [duplicate]
  12. Bootstrap navbar link color won’t change
  13. Empty vertical space between columns in Bootstrap 4
  14. Bootstrap navbar: nothing is displayed on smaller devices
  15. Why aren’t my bootstrap 4 columns the same height?
  16. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  17. How to make Bootstrap cards the same height in card-columns?
  18. My Website is Mirror-flipped on iPhone Devices
  19. How can I override Bootstrap CSS styles?
  20. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  21. IE8 issue with Twitter Bootstrap 3
  22. Bootstrap 3 collapsed menu doesn’t close on click
  23. bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
  24. Bootstrap 3: Push/pull columns only on smaller screen sizes
  25. How to center buttons in Twitter Bootstrap 3?
  26. Change color of bootstrap navbar on hover link?
  27. Twitter Bootstrap: Center Pills
  28. Bootstrap – Fill fluid container between header and footer
  29. Bootstrap row and col explanation
  30. Can a div have multiple classes (Twitter Bootstrap) [duplicate]

Leave a Comment