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 > |
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 > |
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 > |
Output: