How to place two bootstrap cards next to each other ?
Bootstrap is the most popular, free, and open-source HTML, CSS framework that is used to make a responsive website and make them beautiful. It provides various classes to work with that can be used to make a website beautiful. It also provides classes for creating cards.
Cards: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Syntax:
<div class="card" style="width: 20rem"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <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> |
chevron_right
filter_none
Example 1: This example using bootstrap’s grid to make a row and divide it.
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href= integrity= "sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> <title> Place two bootstrap cards next to each other </title> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-6 mb-4"> <div class="card"> <img class="card-img-top" src="" alt=""> <div class="card-body"> <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-outline-primary btn-sm"> Card link </a> <a href="#" class="btn btn-outline-secondary btn-sm"> <i class="far fa-heart"></i></a> </div> </div> </div> <div class="col-lg-6 mb-4"> <div class="card"> <img class="card-img-top" src="" alt=""> <div class="card-body"> <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-outline-primary btn-sm"> Card link </a> <a href="#" class="btn btn-outline-secondary btn-sm"> <i class="far fa-heart"></i></a> </div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> integrity= "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src= integrity= "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script> <script src= integrity= "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> </script> </body> </html> |
chevron_right
filter_none
Output:
Example 2: To create Cards of equal width and height you can also use a class of Bootstrap card-deck.
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1,shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href= integrity= "sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> <title> Place two bootstrap cards next to each other </title> </head> <body> <div class="card-deck"> <div class="card"> <img class="card-img-top" src="" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <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"> <img class="card-img-top" src=""> <div class="card-block"> <h4 class="card-title">Card title</h4> <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"> <img class="card-img-top" src=""> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. </p> <p class="card-text"> <small class="text-muted"> Last updated 3 mins ago </small> </p> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script> integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> </script> </body> </html> |
chevron_right
filter_none
Output:
