Run
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Cards Layout Card Columns</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="card-columns"> <div class="card"> <img src="https://tutorialdeep.com/images/user1.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.</p> </div> </div> <div class="card"> <img src="https://tutorialdeep.com/images/user4.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> <p class="text-muted">Last Updated 4 min ago</p> </div> </div> <div class="card p-3"> <img src="https://tutorialdeep.com/images/user3.jpg" class="card-img" alt=""> </div> <div class="card p-3"> <div class="card-header">Quotes</div> <div class="card-body"> <blockquote class="blockquote"> <p>Many of life's failures are people who did not realize how close they were to success when they gave up.</p> <footer class="blockquote-footer">by <cite>Thomas A. Edison</cite></footer> </blockquote> </div> </div> <div class="card"> <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 class="card"> <img src="https://tutorialdeep.com/images/user1.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.</p> </div> </div> <div class="card text-center"> <img src="https://tutorialdeep.com/images/user4.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> <p class="text-muted">Last Updated 4 min ago</p> </div> </div> <div class="card"> <img src="https://tutorialdeep.com/images/user3.jpg" class="card-img" alt=""> </div> <div class="card bg-primary text-white text-center p-3"> <div class="card-header">Quotes</div> <div class="card-body"> <blockquote class="blockquote"> <p>Many of life's failures are people who did not realize how close they were to success when they gave up.</p> <footer class="blockquote-footer text-white">by <cite>Thomas A. Edison</cite></footer> </blockquote> </div> </div> <div class="card"> <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> </body> </html>
Go to
Tutorialdeep Homepage