Run
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Cards Layout Grid Columns with Equal Height</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" crossorigin="anonymous"></script> <style> body{ padding:15px; } </style> </head> <body> <div class="container"> <div class="row row-cols-1 row-cols-sm-2"> <div class="col mb-3"> <div class="card h-100"> <img src="https://tutorialdeep.com/images/user2.jpg" class="card-img" alt=""> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">This is the text content within card.</p> </div> </div> </div> <div class="col mb-3"> <div class="card h-100"> <img src="https://tutorialdeep.com/images/user2.jpg" class="card-img" alt=""> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">This is the text content within card. This is the text content within card. This is the text content within card. This is the text content within card. This is the text content within card.</p> </div> </div> </div> </div> </div> </body> </html>
Go to
Tutorialdeep Homepage