2025-03-08 09:31:15 +01:00
<!DOCTYPE html> < html lang = "en" data-bs-theme = "auto" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < meta name = "description" content = "Bootstrap's cards provide a flexible and extensible content container with multiple variants and options." > < meta name = "author" content = "Mark Otto, Jacob Thornton, and Bootstrap contributors" > < meta name = "generator" content = "Astro v5.4.2" > < meta name = "docsearch:language" content = "en" > < meta name = "docsearch:version" content = "5.3" > < link rel = "canonical" href = "https://getbootstrap.com/docs/5.3/components/card/" > < link rel = "preconnect" href = "https://AK7KMZKZHQ-dsn.algolia.net" crossorigin > < title > Cards · Bootstrap v5.3< / title > < script src = "/docs/5.3/assets/js/color-modes.js" > < / script > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/@docsearch/css@3" > < link href = "/docs/5.3/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" > < link rel = "apple-touch-icon" href = "/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes = "180x180" > < link rel = "icon" href = "/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes = "32x32" type = "image/png" > < link rel = "icon" href = "/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes = "16x16" type = "image/png" > < link rel = "manifest" href = "/docs/5.3/assets/img/favicons/manifest.json" > < link rel = "mask-icon" href = "/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color = "#712cf9" > < link rel = "icon" href = "/docs/5.3/assets/img/favicons/favicon.ico" > < meta name = "theme-color" content = "#712cf9" > < meta name = "twitter:card" content = "summary_large_image" > < meta name = "twitter:site" content = "getbootstrap" > < meta name = "twitter:creator" content = "getbootstrap" > < meta name = "twitter:title" content = "Cards" > < meta name = "twitter:description" content = "Bootstrap's cards provide a flexible and extensible content container with multiple variants and options." > < meta name = "twitter:image" content = "https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-social.png" > < meta property = "og:url" content = "https://getbootstrap.com/docs/5.3/components/card/" > < meta property = "og:title" content = "Cards" > < meta property = "og:description" content = "Bootstrap's cards provide a flexible and extensible content container with multiple variants and options." > < meta property = "og:type" content = "article" > < meta property = "og:image" content = "https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-social.png" > < meta property = "og:image:type" content = "image/png" > < meta property = "og:image:width" content = "2000" > < meta property = "og:image:height" content = "1000" > < script defer src = "https://cdn.usefathom.com/script.js" data-site = "ITUSEYJG" > < / script > < link rel = "stylesheet" href = "/_astro/_slug_.BBRoHHoO.css" > < / head > < body tabindex = "0" data-bs-spy = "scroll" data-bs-target = "#TableOfContents" > < div class = "skippy visually-hidden-focusable overflow-hidden" > < div class = "container-xl" > < a class = "d-inline-flex p-2 m-1" href = "#content" > Skip to main content< / a > < a class = "d-none d-md-inline-flex p-2 m-1" href = "#bd-docs-nav" >
Skip to docs navigation
< / a > < / div > < / div > < svg xmlns = "http://www.w3.org/2000/svg" class = "d-none" > < symbol id = "arrow-right" viewBox = "0 0 16 16" > < path fill-rule = "evenodd" d = "M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" > < / path > < / symbol > < symbol id = "arrow-right-short" viewBox = "0 0 16 16" > < path fill-rule = "evenodd" d = "M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8" > < / path > < / symbol > < symbol id = "book-half" viewBox = "0 0 16 16" > < path d = "M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" > < / path > < / symbol > < symbol id = "box-seam" viewBox = "0 0 16 16" > < path d = "M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z" > < / path > < / symbol > < symbol id = "braces" viewBox = "0 0 16 16" > < path d = "M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z" > < / path > < / symbol > < symbol id = "braces-asterisk" viewBox = "0 0 16 16" > < path fill-rule = "evenodd" d = "M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z" > < / path > < / symbol > < symbol id = "check2" viewBox = "0 0 16 16" > < path d = "M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" > < / path > < / symbol > < symbol id = "chevron-expand" viewBox = "0 0 16 16" > < path fill-rule = "evenodd" d = "M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z" > < / path > < / symbol > < symbol id = "circle-half" viewBox = "0 0 16 16" > < path d = "M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" > < / path > < / symbol > < symbol id = "clipboard" viewBox = "0 0 16 16" > < path d = "M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" > < / path > < path d = "M9.5 1a . 5 . 5 0 0 1 . 5 . 5
Docs
< / a > < / li > < li class = "nav-item col-6 col-lg-auto" > < a class = "nav-link py-2 px-0 px-lg-2" href = "/docs/5.3/examples/" > Examples < / a > < / li > < li class = "nav-item col-6 col-lg-auto" > < a class = "nav-link py-2 px-0 px-lg-2" href = "https://icons.getbootstrap.com/" target = "_blank" rel = "noopener" > Icons < / a > < / li > < li class = "nav-item col-6 col-lg-auto" > < a class = "nav-link py-2 px-0 px-lg-2" href = "https://themes.getbootstrap.com/" target = "_blank" rel = "noopener" > Themes < / a > < / li > < li class = "nav-item col-6 col-lg-auto" > < a class = "nav-link py-2 px-0 px-lg-2" href = "https://blog.getbootstrap.com/" target = "_blank" rel = "noopener" > Blog < / a > < / li > < / ul > < hr class = "d-lg-none text-white-50" > < ul class = "navbar-nav flex-row flex-wrap ms-md-auto" > < li class = "nav-item col-6 col-lg-auto" > < a class = "nav-link py-2 px-0 px-lg-2 nav-link py-2 px-0 px-lg-2" href = "https://github.com/twbs" target = "_blank" rel = "noopener" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 499.36" role = "img" class = "navbar-nav-svg" height = "16" width = "16" > < title > GitHub< / title > < path fill = "currentColor" fill-rule = "evenodd" d = "M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" > < / path > < / svg > < small class = "d-lg-none ms-2" > GitHub< / small > < / a > < / li > < li class = "nav-item col-6 col-lg-auto" > < a class = "nav-link py-2 px-0 px-lg-2 nav-link py-2 px-0 px-lg-2" href = "https://twitter.com/getbootstrap" target = "_blank" rel = "noopener" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 416.32" role = "img" class = "navbar-nav-svg" height = "16" width = "16" > < title > Twitter< / title > < path fill = "currentColor" d = "M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" > < / path > < / svg > < small class = "d-lg-none ms-2" > Twitter< / small > < / a > < / li > < li class = "nav-item col-6 col-lg-auto" > < a class = "nav-link py-2 px-0 px-lg-2 nav-link py-2 px-0 px-lg-2" href = "https://opencollective.com/bootstrap" target = "_blank" rel = "noopener" > < svg xmlns = "http://www.w3.org/2000/svg" fill = "currentColor" fill-rule = "evenodd" viewBox = "0 0 40 41" role = "img" class = "navbar-nav-svg" height = "16" width = "16" > < title > Open Collective< / title > < path fill-opacity = ".4" d = "M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z" > < / path > < path d = "M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z" > < / path > < / svg > < small class = "d-lg-none ms-2" > Open Collective< / small > < / a > < / li > < li class = "nav-item py-2 py-lg-1 col-12 col-lg-auto" > < div class = "vr d-none d-lg-flex h-100 mx-lg-2 text-white" > < / div > < hr class = "d-lg-none my-2 text-white-50" > < / li > < li class = "nav-item dropdown" > < button type = "button" class = "btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle = "dropdown" aria-expanded = "false" data-bs-display = "static" > < span class = "d-lg-none" aria-hidden = "true" > Bootstrap< / span > < span class = "visually-hidden" > Bootstrap < / span > v5.3 < span class = "visually-h
Latest (5.3.x)
< svg class = "bi" aria-hidden = "true" > < use xlink:href = "#check2" > < / use > < / svg > < / a > < / li > < li > < a class = "dropdown-item" href = "https://getbootstrap.com/docs/5.2/components/card/" >
v5.2.3
< / a > < / li > < li > < a class = "dropdown-item" href = "https://getbootstrap.com/docs/5.1/components/card/" >
v5.1.3
< / a > < / li > < li > < a class = "dropdown-item" href = "https://getbootstrap.com/docs/5.0/components/card/" >
v5.0.2
< / a > < / li > < li > < hr class = "dropdown-divider" > < / li > < li > < h6 class = "dropdown-header" > Previous releases< / h6 > < / li > < li > < a class = "dropdown-item" href = "https://getbootstrap.com/docs/4.6/" > v4.6.x< / a > < / li > < li > < a class = "dropdown-item" href = "https://getbootstrap.com/docs/3.4/" > v3.4.1< / a > < / li > < li > < a class = "dropdown-item" href = "https://getbootstrap.com/2.3.2/" > v2.3.2< / a > < / li > < li > < hr class = "dropdown-divider" > < / li > < li > < a class = "dropdown-item" href = "/docs/versions/" > All versions< / a > < / li > < / ul > < / li > < li class = "nav-item py-2 py-lg-1 col-12 col-lg-auto" > < div class = "vr d-none d-lg-flex h-100 mx-lg-2 text-white" > < / div > < hr class = "d-lg-none my-2 text-white-50" > < / li > < li class = "nav-item dropdown" > < button class = "btn btn-link nav-link px-0 px-lg-2 py-2 dropdown-toggle d-flex align-items-center" id = "bd-theme" type = "button" aria-expanded = "false" data-bs-toggle = "dropdown" data-bs-display = "static" aria-label = "Toggle theme (auto)" > < svg class = "bi my-1 theme-icon-active" aria-hidden = "true" > < use href = "#circle-half" > < / use > < / svg > < span class = "d-lg-none ms-2" id = "bd-theme-text" > Toggle theme< / span > < / button > < ul class = "dropdown-menu dropdown-menu-end" aria-labelledby = "bd-theme-text" > < li > < button type = "button" class = "dropdown-item d-flex align-items-center" data-bs-theme-value = "light" aria-pressed = "false" > < svg class = "bi me-2 opacity-50" aria-hidden = "true" > < use href = "#sun-fill" > < / use > < / svg >
Light
< svg class = "bi ms-auto d-none" aria-hidden = "true" > < use href = "#check2" > < / use > < / svg > < / button > < / li > < li > < button type = "button" class = "dropdown-item d-flex align-items-center" data-bs-theme-value = "dark" aria-pressed = "false" > < svg class = "bi me-2 opacity-50" aria-hidden = "true" > < use href = "#moon-stars-fill" > < / use > < / svg >
Dark
< svg class = "bi ms-auto d-none" aria-hidden = "true" > < use href = "#check2" > < / use > < / svg > < / button > < / li > < li > < button type = "button" class = "dropdown-item d-flex align-items-center active" data-bs-theme-value = "auto" aria-pressed = "true" > < svg class = "bi me-2 opacity-50" aria-hidden = "true" > < use href = "#circle-half" > < / use > < / svg >
Auto
< svg class = "bi ms-auto d-none" aria-hidden = "true" > < use href = "#check2" > < / use > < / svg > < / button > < / li > < / ul > < / li > < / ul > < / div > < / div > < / nav > < / header > < div class = "container-xxl bd-gutter mt-3 my-md-4 bd-layout" > < aside class = "bd-sidebar" > < div class = "offcanvas-lg offcanvas-start" tabindex = "-1" id = "bdSidebar" aria-labelledby = "bdSidebarOffcanvasLabel" > < div class = "offcanvas-header border-bottom" > < h5 class = "offcanvas-title" id = "bdSidebarOffcanvasLabel" > Browse docs< / h5 > < button type = "button" class = "btn-close" data-bs-dismiss = "offcanvas" aria-label = "Close" data-bs-target = "#bdSidebar" > < / button > < / div > < div class = "offcanvas-body" > < nav class = "bd-links w-100" id = "bd-docs-nav" aria-label = "Docs navigation" > < ul class = "bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2" > < li class = "bd-links-group py-2" > < strong class = "bd-links-heading d-flex w-100 align-items-center fw-semibold" > < svg class = "bi me-2" style = "color: var(--bs-indigo);" aria-hidden = "true" > < use xlink:href = "#book-half" > < / use > < / svg > Getting started < / strong > < ul class = "list-unstyled fw-normal pb-2 small" > < li > < a href = "/docs/5.3/getting-started/introduction" class = "bd-links-link d-inline-block rounded" > Introduction < / a > < / li > < li > < a href = "/docs/5.3/getting-started/download" class = "bd-links-link d-inline-block rounded" > Download < / a > < / li > < li > < a href = "/docs/5.3/getting-started/contents" class = "bd-links-link d-inline-block rounded" > Contents < / a > < / li > < li > < a href = "/docs/5.3/getting-started/browsers-devices" class = "bd-links-link d-inline-block rounded" > Browsers & devices < / a > < / li > < li > < a href = "/docs/5.3/getting-started/javascript" class = "bd-links-link d-inline-block rounded" > JavaScript < / a > < / li > < li > < a href = "/docs/5.3/getting-started/webpack" class = "bd-links-link d-inline-block rounded" > Webpack < / a > < / li > < li > < a href = "/docs/5.3/getting-started/parcel" class = "bd-links-link d-inline-block rounded" > Parcel < / a > < / li > < li > < a href = "/docs/5.3/getting-started/vite" class = "bd-links-link d-inline-block rounded" > Vite < / a > < / li > < li > < a href = "/docs/5.3/getting-started/accessibility" class = "bd-links-link d-inline-block rounded" > Accessibility < / a > < / li > < li > < a href = "/docs/5.3/getting-started/rfs" class = "bd-links-link d-inline-block rounded" > RFS < / a > < / li > < li > < a href = "/docs/5.3/getting-started/rtl" class = "bd-links-link d-inline-block rounded" > RTL < / a > < / li > < li > < a href = "/docs/5.3/getting-started/contribute" class = "bd-links-link d-inline-block rounded" > Contribute < / a > < / li > < / ul > < / li > < li class = "bd-links-group py-2" > < strong class = "bd-links-heading d-flex w-100 align-items-center fw-semibold" > < svg class = "bi me-2" style = "color: var(--bs-pink);" aria-hidden = "true" > < use xlink:href = "#palette2" > < / use > < / svg > Customize < / strong > < ul class = "list-unstyled fw-normal pb-2 small" > < li > < a href = "/docs/5.3/customize/overview" class = "bd-links-link d-inline-block rounded" > Overview < / a > < / li > < li > < a href = "/docs/5.3/customize/sass" class = "bd-links-link d-inline-block rounded" > Sass < / a > < / li > < li > < a href = "/docs/5.3/customize/options" class = "bd-links-link d-inline-block rounded" > Options < / a > < / li > < li > < a href = "/docs/5.3/customize/color" class = "bd-links-link d-inline-block rounded" > Color < / a > < / li > < li > < a href = "/docs/5.3/customize/color-modes" class = "bd-links-link d-inline-block rounded" > Color modes < / a > < / li > < li > < a href = "/docs/5.3/customize/components" class = "bd-links-link d-inline-block rounded" > Components < / a > < / li > < li > < a href = "/docs/5.3/customize/css-variables" class = "bd-links-link d-inline-block rounded" > CSS variables < / a > < / li > < li > < a href = "/docs/5.3/customize/optimize" class = "bd-links-link d-inline-block rounded" > Optimize < / a > < / li > < / ul > < / li > < li class = "bd-links-group py-2" > < strong class = "bd-links-heading d-flex w-100 align-items-center fw-semibold" > < svg class = "bi me-2" style = "color: var(--bs-teal);" aria-hidden = "true" > < use xlink:href = "#grid-fill" > < / use > < / svg > Layout < / strong > < ul class = "list-unstyled fw-normal pb-2 small" > < li > < a href = "/docs/5.3/layout/breakpoints" class = "bd-links-link d-inline-block rounded" > Breakpoints < / a > < / li > < li > < a href = "/docs/5.3/layou
View on GitHub
< / a > < / div > < h1 class = "bd-title mb-0" id = "content" > Cards< / h1 > < / div > < p class = "bd-lead" > Bootstrap's cards provide a flexible and extensible content container with multiple variants and options. < / p > < script async src = "https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id = "_carbonads_js" > < / script > < / div > < div class = "bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary" > < button class = "btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type = "button" data-bs-toggle = "collapse" data-bs-target = "#tocContents" aria-expanded = "false" aria-controls = "tocContents" >
On this page
< svg class = "bi d-md-none ms-2" aria-hidden = "true" > < use xlink:href = "#chevron-expand" > < / use > < / svg > < / button > < strong class = "d-none d-md-block h6 my-2 ms-3" > On this page< / strong > < hr class = "d-none d-md-block my-2 ms-3" > < div class = "collapse bd-toc-collapse" id = "tocContents" > < nav id = "TableOfContents" > < ul > < li > < a href = "#about" > About< / a > < / li > < li > < a href = "#example" > Example< / a > < / li > < li > < a href = "#content-types" > Content types< / a > < / li > < ul > < li > < a href = "#body" > Body< / a > < / li > < li > < a href = "#titles-text-and-links" > Titles, text, and links< / a > < / li > < li > < a href = "#images" > Images< / a > < / li > < li > < a href = "#list-groups" > List groups< / a > < / li > < li > < a href = "#kitchen-sink" > Kitchen sink< / a > < / li > < li > < a href = "#header-and-footer" > Header and footer< / a > < / li > < / ul > < li > < a href = "#sizing" > Sizing< / a > < / li > < ul > < li > < a href = "#using-grid-markup" > Using grid markup< / a > < / li > < li > < a href = "#using-utilities" > Using utilities< / a > < / li > < li > < a href = "#using-custom-css" > Using custom CSS< / a > < / li > < / ul > < li > < a href = "#text-alignment" > Text alignment< / a > < / li > < li > < a href = "#navigation" > Navigation< / a > < / li > < li > < a href = "#images-1" > Images< / a > < / li > < ul > < li > < a href = "#image-caps" > Image caps< / a > < / li > < li > < a href = "#image-overlays" > Image overlays< / a > < / li > < / ul > < li > < a href = "#horizontal" > Horizontal< / a > < / li > < li > < a href = "#card-styles" > Card styles< / a > < / li > < ul > < li > < a href = "#background-and-color" > Background and color< / a > < / li > < li > < a href = "#border" > Border< / a > < / li > < li > < a href = "#mixins-utilities" > Mixins utilities< / a > < / li > < / ul > < li > < a href = "#card-layout" > Card layout< / a > < / li > < ul > < li > < a href = "#card-groups" > Card groups< / a > < / li > < li > < a href = "#grid-cards" > Grid cards< / a > < / li > < li > < a href = "#masonry" > Masonry< / a > < / li > < / ul > < li > < a href = "#css" > CSS< / a > < / li > < ul > < li > < a href = "#variables" > Variables< / a > < / li > < li > < a href = "#sass-variables" > Sass variables< / a > < / li > < / ul > < / ul > < / nav > < / div > < / div > < div class = "bd-content ps-lg-2" > < h2 id = "about" > About< a class = "anchor-link" href = "#about" > < / a > < / h2 >
< p > A < strong > card< / strong > 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. If you' re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.< / p >
< h2 id = "example" > Example< a class = "anchor-link" href = "#example" > < / a > < / h2 >
< p > Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no < code > margin< / code > by default, so use < a href = "/docs/5.3/utilities/spacing" > spacing utilities< / a > as needed.< / p >
< p > Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they' ll naturally fill the full width of its parent element. This is easily customized with our various < a href = "#sizing" > sizing options< / a > .< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card" style = "width: 18rem;" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< 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-primary" > Go somewhere< / a >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Go somewhere< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h2 id = "content-types" > Content types< a class = "anchor-link" href = "#content-types" > < / a > < / h2 >
< p > Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what' s supported.< / p >
< h3 id = "body" > Body< a class = "anchor-link" href = "#body" > < / a > < / h3 >
2022-12-24 18:43:04 +02:00
< p > The building block of a card is the < code > .card-body< / code > . Use it whenever you need a padded section within a card.< / p >
2025-03-08 09:31:15 +01:00
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card" >
< div class = "card-body" >
This is some text within a card body.
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
This is some text within a card body.
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h3 id = "titles-text-and-links" > Titles, text, and links< a class = "anchor-link" href = "#titles-text-and-links" > < / a > < / h3 >
2022-12-24 18:43:04 +02:00
< p > Card titles are used by adding < code > .card-title< / code > to a < code > < h*> < / code > tag. In the same way, links are added and placed next to each other by adding < code > .card-link< / code > to an < code > < a> < / code > tag.< / p >
< p > Subtitles are used by adding a < code > .card-subtitle< / code > to a < code > < h*> < / code > tag. If the < code > .card-title< / code > and the < code > .card-subtitle< / code > items are placed in a < code > .card-body< / code > item, the card title and subtitle are aligned nicely.< / p >
2025-03-08 09:31:15 +01:00
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card" style = "width: 18rem;" >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< h6 class = "card-subtitle mb-2 text-body-secondary" > Card subtitle< / h6 >
< 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 = "card-link" > Card link< / a >
< a href = "#" class = "card-link" > Another link< / a >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h6< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-subtitle mb-2 text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card subtitle< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h6< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-link< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card link< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-link< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Another link< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h3 id = "images" > Images< a class = "anchor-link" href = "#images" > < / a > < / h3 >
< p > < code > .card-img-top< / code > and < code > .card-img-bottom< / code > respectively set the top and bottom corners rounded to match the card' s borders. With < code > .card-text< / code > , text can be added to the card. Text within < code > .card-text< / code > can also be styled with the standard HTML tags.< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card" style = "width: 18rem;" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< 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 >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h3 id = "list-groups" > List groups< a class = "anchor-link" href = "#list-groups" > < / a > < / h3 >
2022-12-24 18:43:04 +02:00
< p > Create lists of content in a card with a flush list group.< / p >
2025-03-08 09:31:15 +01:00
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card" style = "width: 18rem;" >
< ul class = "list-group list-group-flush" >
< li class = "list-group-item" > An item< / li >
< li class = "list-group-item" > A second item< / li >
< li class = "list-group-item" > A third item< / li >
< / ul >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > ul< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group list-group-flush< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > An item< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > A second item< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > A third item< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > ul< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card" style = "width: 18rem;" >
< div class = "card-header" >
Featured
< / div >
< ul class = "list-group list-group-flush" >
< li class = "list-group-item" > An item< / li >
< li class = "list-group-item" > A second item< / li >
< li class = "list-group-item" > A third item< / li >
< / ul >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
Featured
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > ul< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group list-group-flush< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > An item< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > A second item< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > A third item< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > ul< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card" style = "width: 18rem;" >
< ul class = "list-group list-group-flush" >
< li class = "list-group-item" > An item< / li >
< li class = "list-group-item" > A second item< / li >
< li class = "list-group-item" > A third item< / li >
< / ul >
< div class = "card-footer" >
Card footer
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > ul< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group list-group-flush< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > An item< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > A second item< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > A third item< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > ul< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-footer< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
Card footer
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h3 id = "kitchen-sink" > Kitchen sink< a class = "anchor-link" href = "#kitchen-sink" > < / a > < / h3 >
2022-12-24 18:43:04 +02:00
< p > Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.< / p >
2025-03-08 09:31:15 +01:00
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card" style = "width: 18rem;" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< 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 >
< / div >
< ul class = "list-group list-group-flush" >
< li class = "list-group-item" > An item< / li >
< li class = "list-group-item" > A second item< / li >
< li class = "list-group-item" > A third item< / li >
< / ul >
< div class = "card-body" >
< a href = "#" class = "card-link" > Card link< / a >
< a href = "#" class = "card-link" > Another link< / a >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > ul< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group list-group-flush< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > An item< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > A second item< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > list-group-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > A third item< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > ul< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-link< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card link< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-link< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Another link< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h3 id = "header-and-footer" > Header and footer< a class = "anchor-link" href = "#header-and-footer" > < / a > < / h3 >
2022-12-24 18:43:04 +02:00
< p > Add an optional header and/or footer within a card.< / p >
2025-03-08 09:31:15 +01:00
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card" >
< div class = "card-header" >
Featured
< / div >
< div class = "card-body" >
< h5 class = "card-title" > Special title treatment< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Go somewhere< / a >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
Featured
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Special title treatment< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Go somewhere< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
2022-12-24 18:43:04 +02:00
< p > Card headers can be styled by adding < code > .card-header< / code > to < code > < h*> < / code > elements.< / p >
2025-03-08 09:31:15 +01:00
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card" >
< h5 class = "card-header" > Featured< / h5 >
< div class = "card-body" >
< h5 class = "card-title" > Special title treatment< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Go somewhere< / a >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Featured< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Special title treatment< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Go somewhere< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card" >
< div class = "card-header" >
Quote
< / div >
< div class = "card-body" >
< blockquote class = "blockquote mb-0" >
< p > A well-known quote, contained in a blockquote element.< / p >
< footer class = "blockquote-footer" > Someone famous in < cite title = "Source Title" > Source Title< / cite > < / footer >
< / blockquote >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
Quote
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > blockquote< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > blockquote mb-0< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token punctuation" > >< / span > < / span > A well-known quote, contained in a blockquote element.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > footer< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > blockquote-footer< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Someone famous in < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > cite< / span > < span class = "token attr-name" > title< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > Source Title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Source Title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > cite< / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > footer< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > blockquote< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card text-center" >
< div class = "card-header" >
Featured
< / div >
< div class = "card-body" >
< h5 class = "card-title" > Special title treatment< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Go somewhere< / a >
< / div >
< div class = "card-footer text-body-secondary" >
2 days ago
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-center< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
Featured
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Special title treatment< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Go somewhere< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-footer text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
2 days ago
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h2 id = "sizing" > Sizing< a class = "anchor-link" href = "#sizing" > < / a > < / h2 >
< p > Cards assume no specific < code > width< / code > to start, so they' ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.< / p >
< h3 id = "using-grid-markup" > Using grid markup< a class = "anchor-link" href = "#using-grid-markup" > < / a > < / h3 >
2022-12-24 18:43:04 +02:00
< p > Using the grid, wrap cards in columns and rows as needed.< / p >
2025-03-08 09:31:15 +01:00
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "row" >
< div class = "col-sm-6 mb-3 mb-sm-0" >
< div class = "card" >
< div class = "card-body" >
< h5 class = "card-title" > Special title treatment< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Go somewhere< / a >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div >
< div class = "col-sm-6" >
< div class = "card" >
< div class = "card-body" >
< h5 class = "card-title" > Special title treatment< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Go somewhere< / a >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > row< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col-sm-6 mb-3 mb-sm-0< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Special title treatment< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Go somewhere< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col-sm-6< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Special title treatment< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Go somewhere< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h3 id = "using-utilities" > Using utilities< a class = "anchor-link" href = "#using-utilities" > < / a > < / h3 >
< p > Use our handful of < a href = "/docs/5.3/utilities/sizing" > available sizing utilities< / a > to quickly set a card' s width.< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card w-75 mb-3" >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Button< / a >
2024-02-20 17:22:07 +02:00
< / div >
2022-12-24 18:43:04 +02:00
< / div >
< div class = "card w-50" >
2025-03-08 09:31:15 +01:00
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Button< / a >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card w-75 mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Button< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card w-50< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Button< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h3 id = "using-custom-css" > Using custom CSS< a class = "anchor-link" href = "#using-custom-css" > < / a > < / h3 >
2022-12-24 18:43:04 +02:00
< p > Use custom CSS in your stylesheets or as inline styles to set a width.< / p >
2025-03-08 09:31:15 +01:00
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card" style = "width: 18rem;" >
< div class = "card-body" >
< h5 class = "card-title" > Special title treatment< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Go somewhere< / a >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Special title treatment< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Go somewhere< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h2 id = "text-alignment" > Text alignment< a class = "anchor-link" href = "#text-alignment" > < / a > < / h2 >
< p > You can quickly change the text alignment of any card—in its entirety or specific parts—with our < a href = "/docs/5.3/utilities/text#text-alignment" > text align classes< / a > .< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card mb-3" style = "width: 18rem;" >
< div class = "card-body" >
< h5 class = "card-title" > Special title treatment< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Go somewhere< / a >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
< div class = "card text-center mb-3" style = "width: 18rem;" >
2025-03-08 09:31:15 +01:00
< div class = "card-body" >
< h5 class = "card-title" > Special title treatment< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Go somewhere< / a >
2022-12-24 18:43:04 +02:00
< / div >
2024-02-20 17:22:07 +02:00
< / div >
2022-12-24 18:43:04 +02:00
2025-03-08 09:31:15 +01:00
< div class = "card text-end" style = "width: 18rem;" >
< div class = "card-body" >
< h5 class = "card-title" > Special title treatment< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Go somewhere< / a >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Special title treatment< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Go somewhere< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-center mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Special title treatment< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Go somewhere< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-end< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Special title treatment< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Go somewhere< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h2 id = "navigation" > Navigation< a class = "anchor-link" href = "#navigation" > < / a > < / h2 >
< p > Add some navigation to a card' s header (or block) with Bootstrap' s < a href = "/docs/5.3/components/navs-tabs" > nav components< / a > .< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card text-center" >
< div class = "card-header" >
< ul class = "nav nav-tabs card-header-tabs" >
< li class = "nav-item" >
< a class = "nav-link active" aria-current = "true" href = "#" > Active< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Link< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link disabled" aria-disabled = "true" > Disabled< / a >
< / li >
< / ul >
2024-02-20 17:22:07 +02:00
< / div >
2025-03-08 09:31:15 +01:00
< div class = "card-body" >
< h5 class = "card-title" > Special title treatment< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Go somewhere< / a >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-center< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > ul< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav nav-tabs card-header-tabs< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav-link active< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > aria-current< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > true< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Active< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav-link< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Link< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav-link disabled< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > aria-disabled< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > true< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Disabled< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > ul< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Special title treatment< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Go somewhere< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card text-center" >
< div class = "card-header" >
< ul class = "nav nav-pills card-header-pills" >
< li class = "nav-item" >
< a class = "nav-link active" href = "#" > Active< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Link< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link disabled" aria-disabled = "true" > Disabled< / a >
< / li >
< / ul >
2022-12-24 18:43:04 +02:00
< / div >
2025-03-08 09:31:15 +01:00
< div class = "card-body" >
< h5 class = "card-title" > Special title treatment< / h5 >
< p class = "card-text" > With supporting text below as a natural lead-in to additional content.< / p >
< a href = "#" class = "btn btn-primary" > Go somewhere< / a >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-center< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > ul< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav nav-pills card-header-pills< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav-link active< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Active< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav-link< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Link< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > li< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav-item< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > nav-link disabled< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > aria-disabled< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > true< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Disabled< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > li< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > ul< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Special title treatment< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > With supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > a< / span > < span class = "token attr-name" > href< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > #< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > btn btn-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Go somewhere< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > a< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h2 id = "images-1" > Images< a class = "anchor-link" href = "#images-1" > < / a > < / h2 >
< p > Cards include a few options for working with images. Choose from appending " image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.< / p >
< h3 id = "image-caps" > Image caps< a class = "anchor-link" href = "#image-caps" > < / a > < / h3 >
< p > Similar to headers and footers, cards can include top and bottom " image caps" —images at the top or bottom of a card.< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card mb-3" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This is a wider 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-body-secondary" > Last updated 3 mins ago< / small > < / p >
2024-02-20 17:22:07 +02:00
< / div >
2022-12-24 18:43:04 +02:00
< / div >
< div class = "card" >
2025-03-08 09:31:15 +01:00
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This is a wider 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-body-secondary" > Last updated 3 mins ago< / small > < / p >
< / div >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-bottom" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-bottom< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h3 id = "image-overlays" > Image overlays< a class = "anchor-link" href = "#image-overlays" > < / a > < / h3 >
< p > Turn an image into a card background and overlay your card' s text. Depending on the image, you may or may not need additional styles or utilities.< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card text-bg-dark" >
< svg aria-label = "Placeholder: Card image" class = "bd-placeholder-img bd-placeholder-img-lg card-img" height = "270" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Card image< / text > < / svg >
< div class = "card-img-overlay" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This is a wider 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 > Last updated 3 mins ago< / small > < / p >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-bg-dark< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-overlay< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< div class = "bd-callout bd-callout-info" > < p > Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.< / p > < / div >
< h2 id = "horizontal" > Horizontal< a class = "anchor-link" href = "#horizontal" > < / a > < / h2 >
2022-12-24 18:43:04 +02:00
< p > Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with < code > .g-0< / code > and use < code > .col-md-*< / code > classes to make the card horizontal at the < code > md< / code > breakpoint. Further adjustments may be needed depending on your card content.< / p >
2025-03-08 09:31:15 +01:00
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card mb-3" style = "max-width: 540px;" >
< div class = "row g-0" >
< div class = "col-md-4" >
< svg aria-label = "Placeholder: Image" class = "bd-placeholder-img img-fluid rounded-start" height = "250" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image< / text > < / svg >
< / div >
< div class = "col-md-8" >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This is a wider 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-body-secondary" > Last updated 3 mins ago< / small > < / p >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 540px< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > row g-0< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col-md-4< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > img-fluid rounded-start< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col-md-8< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h2 id = "card-styles" > Card styles< a class = "anchor-link" href = "#card-styles" > < / a > < / h2 >
2022-12-24 18:43:04 +02:00
< p > Cards include various options for customizing their backgrounds, borders, and color.< / p >
2025-03-08 09:31:15 +01:00
< h3 id = "background-and-color" > Background and color< a class = "anchor-link" href = "#background-and-color" > < / a > < / h3 >
2022-12-24 18:43:04 +02:00
< small class = "d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2" > Added in v5.2.0< / small >
2025-03-08 09:31:15 +01:00
< p > Set a < code > background-color< / code > with contrasting foreground < code > color< / code > with < a href = "/docs/5.3/helpers/color-background" > our < code > .text-bg-{color}< / code > helpers< / a > . Previously it was required to manually pair your choice of < a href = "/docs/5.3/utilities/colors" > < code > .text-{color}< / code > < / a > and < a href = "/docs/5.3/utilities/background" > < code > .bg-{color}< / code > < / a > utilities for styling, which you still may use if you prefer.< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card text-bg-primary mb-3" style = "max-width: 18rem;" >
< div class = "card-header" > Header< / div >
< div class = "card-body" >
< h5 class = "card-title" > Primary 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 >
< / div >
2022-12-24 18:43:04 +02:00
< / div >
< div class = "card text-bg-secondary mb-3" style = "max-width: 18rem;" >
2025-03-08 09:31:15 +01:00
< div class = "card-header" > Header< / div >
< div class = "card-body" >
< h5 class = "card-title" > Secondary 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 >
< / div >
2022-12-24 18:43:04 +02:00
< / div >
< div class = "card text-bg-success mb-3" style = "max-width: 18rem;" >
2025-03-08 09:31:15 +01:00
< div class = "card-header" > Header< / div >
< div class = "card-body" >
< h5 class = "card-title" > Success 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 >
< / div >
2022-12-24 18:43:04 +02:00
< / div >
< div class = "card text-bg-danger mb-3" style = "max-width: 18rem;" >
2025-03-08 09:31:15 +01:00
< div class = "card-header" > Header< / div >
< div class = "card-body" >
< h5 class = "card-title" > Danger 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 >
< / div >
2022-12-24 18:43:04 +02:00
< / div >
< div class = "card text-bg-warning mb-3" style = "max-width: 18rem;" >
2025-03-08 09:31:15 +01:00
< div class = "card-header" > Header< / div >
< div class = "card-body" >
< h5 class = "card-title" > Warning 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 >
< / div >
2022-12-24 18:43:04 +02:00
< / div >
< div class = "card text-bg-info mb-3" style = "max-width: 18rem;" >
2025-03-08 09:31:15 +01:00
< div class = "card-header" > Header< / div >
< div class = "card-body" >
< h5 class = "card-title" > Info 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 >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< div class = "card text-bg-light mb-3" style = "max-width: 18rem;" >
< div class = "card-header" > Header< / div >
< div class = "card-body" >
< h5 class = "card-title" > Light 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 >
2022-12-24 18:43:04 +02:00
< / div >
2024-02-20 17:22:07 +02:00
< / div >
2025-03-08 09:31:15 +01:00
< div class = "card text-bg-dark mb-3" style = "max-width: 18rem;" >
< div class = "card-header" > Header< / div >
< div class = "card-body" >
< h5 class = "card-title" > Dark 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 >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-bg-primary mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Primary card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-bg-secondary mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Secondary card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-bg-success mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Success card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-bg-danger mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Danger card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-bg-warning mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Warning card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-bg-info mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Info card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-bg-light mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Light card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card text-bg-dark mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Dark card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< div class = "bd-callout bd-callout-info" > < p > < strong > Accessibility tip:< / strong > Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a < a href = "/docs/5.3/getting-started/accessibility/#color-contrast" > < em > sufficient< / em > color contrast< / a > ) or is included through alternative means, such as additional text hidden with the < code > .visually-hidden< / code > class.< / p > < / div >
< h3 id = "border" > Border< a class = "anchor-link" href = "#border" > < / a > < / h3 >
< p > Use < a href = "/docs/5.3/utilities/borders" > border utilities< / a > to change just the < code > border-color< / code > of a card. Note that you can put < code > .text-{color}< / code > classes on the parent < code > .card< / code > or a subset of the card' s contents as shown below.< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card border-primary mb-3" style = "max-width: 18rem;" >
< div class = "card-header" > Header< / div >
< div class = "card-body text-primary" >
< h5 class = "card-title" > Primary 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 >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
< div class = "card border-secondary mb-3" style = "max-width: 18rem;" >
2025-03-08 09:31:15 +01:00
< div class = "card-header" > Header< / div >
< div class = "card-body text-secondary" >
< h5 class = "card-title" > Secondary 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 >
< / div >
2022-12-24 18:43:04 +02:00
< / div >
< div class = "card border-success mb-3" style = "max-width: 18rem;" >
2025-03-08 09:31:15 +01:00
< div class = "card-header" > Header< / div >
< div class = "card-body text-success" >
< h5 class = "card-title" > Success 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 >
< / div >
2022-12-24 18:43:04 +02:00
< / div >
< div class = "card border-danger mb-3" style = "max-width: 18rem;" >
2025-03-08 09:31:15 +01:00
< div class = "card-header" > Header< / div >
< div class = "card-body text-danger" >
< h5 class = "card-title" > Danger 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 >
< / div >
2022-12-24 18:43:04 +02:00
< / div >
< div class = "card border-warning mb-3" style = "max-width: 18rem;" >
2025-03-08 09:31:15 +01:00
< div class = "card-header" > Header< / div >
< div class = "card-body" >
< h5 class = "card-title" > Warning 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 >
< / div >
2022-12-24 18:43:04 +02:00
< / div >
< div class = "card border-info mb-3" style = "max-width: 18rem;" >
2025-03-08 09:31:15 +01:00
< div class = "card-header" > Header< / div >
< div class = "card-body" >
< h5 class = "card-title" > Info 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 >
< / div >
2022-12-24 18:43:04 +02:00
< / div >
< div class = "card border-light mb-3" style = "max-width: 18rem;" >
2025-03-08 09:31:15 +01:00
< div class = "card-header" > Header< / div >
< div class = "card-body" >
< h5 class = "card-title" > Light 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 >
< / div >
< / div >
< div class = "card border-dark mb-3" style = "max-width: 18rem;" >
< div class = "card-header" > Header< / div >
< div class = "card-body" >
< h5 class = "card-title" > Dark 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 >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card border-primary mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body text-primary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Primary card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card border-secondary mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body text-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Secondary card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card border-success mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body text-success< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Success card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card border-danger mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body text-danger< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Danger card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card border-warning mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Warning card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card border-info mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Info card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card border-light mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Light card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card border-dark mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Dark card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h3 id = "mixins-utilities" > Mixins utilities< a class = "anchor-link" href = "#mixins-utilities" > < / a > < / h3 >
< p > You can also change the borders on the card header and footer as needed, and even remove their < code > background-color< / code > with < code > .bg-transparent< / code > .< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card border-success mb-3" style = "max-width: 18rem;" >
< div class = "card-header bg-transparent border-success" > Header< / div >
< div class = "card-body text-success" >
< h5 class = "card-title" > Success 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 >
< / div >
< div class = "card-footer bg-transparent border-success" > Footer< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card border-success mb-3< span class = "token punctuation" > "< / span > < / span > < span class = "token special-attr" > < span class = "token attr-name" > style< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > < span class = "token value css language-css" > < span class = "token property" > max-width< / span > < span class = "token punctuation" > :< / span > 18rem< span class = "token punctuation" > ;< / span > < / span > < span class = "token punctuation" > "< / span > < / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-header bg-transparent border-success< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Header< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body text-success< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Success card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Some quick example text to build on the card title and make up the bulk of the card's content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-footer bg-transparent border-success< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Footer< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h2 id = "card-layout" > Card layout< a class = "anchor-link" href = "#card-layout" > < / a > < / h2 >
< p > In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, < strong > these layout options are not yet responsive< / strong > .< / p >
< h3 id = "card-groups" > Card groups< a class = "anchor-link" href = "#card-groups" > < / a > < / h3 >
< p > Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use < code > display: flex;< / code > to become attached with uniform dimensions starting at the < code > sm< / code > breakpoint.< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card-group" >
< div class = "card" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
2022-12-24 18:43:04 +02:00
< div class = "card-body" >
2025-03-08 09:31:15 +01:00
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This is a wider 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-body-secondary" > Last updated 3 mins ago< / small > < / p >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< div class = "card" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
2022-12-24 18:43:04 +02:00
< div class = "card-body" >
2025-03-08 09:31:15 +01:00
< h5 class = "card-title" > Card title< / h5 >
< 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-body-secondary" > Last updated 3 mins ago< / small > < / p >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< div class = "card" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< 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-body-secondary" > Last updated 3 mins ago< / small > < / p >
< / div >
2024-02-20 17:22:07 +02:00
< / div >
2025-03-08 09:31:15 +01:00
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-group< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This card has supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > 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.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< p > When using card groups with footers, their content will automatically line up.< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "card-group" >
< div class = "card" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< / div >
< div class = "card-footer" >
< small class = "text-body-secondary" > Last updated 3 mins ago< / small >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< div class = "card" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This card has supporting text below as a natural lead-in to additional content.< / p >
< / div >
< div class = "card-footer" >
< small class = "text-body-secondary" > Last updated 3 mins ago< / small >
< / div >
2024-02-20 17:22:07 +02:00
< / div >
2025-03-08 09:31:15 +01:00
< div class = "card" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< 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 >
< / div >
< div class = "card-footer" >
< small class = "text-body-secondary" > Last updated 3 mins ago< / small >
< / div >
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-group< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-footer< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This card has supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-footer< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > 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.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-footer< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h3 id = "grid-cards" > Grid cards< a class = "anchor-link" href = "#grid-cards" > < / a > < / h3 >
< p > Use the Bootstrap grid system and its < a href = "/docs/5.3/layout/grid#row-columns" > < code > .row-cols< / code > classes< / a > to control how many grid columns (wrapped around your cards) you show per row. For example, here' s < code > .row-cols-1< / code > laying out the cards on one column, and < code > .row-cols-md-2< / code > splitting four cards to equal width across multiple rows, from the medium breakpoint up.< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "row row-cols-1 row-cols-md-2 g-4" >
< div class = "col" >
2022-12-24 18:43:04 +02:00
< div class = "card" >
2025-03-08 09:31:15 +01:00
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "140" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
2022-12-24 18:43:04 +02:00
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
2025-03-08 09:31:15 +01:00
< 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 >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div >
< div class = "col" >
2022-12-24 18:43:04 +02:00
< div class = "card" >
2025-03-08 09:31:15 +01:00
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "140" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
2022-12-24 18:43:04 +02:00
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
2025-03-08 09:31:15 +01:00
< 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 >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div >
< div class = "col" >
2022-12-24 18:43:04 +02:00
< div class = "card" >
2025-03-08 09:31:15 +01:00
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "140" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
2022-12-24 18:43:04 +02:00
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
2025-03-08 09:31:15 +01:00
< p class = "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content.< / p >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< div class = "col" >
2022-12-24 18:43:04 +02:00
< div class = "card" >
2025-03-08 09:31:15 +01:00
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "140" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
2022-12-24 18:43:04 +02:00
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
2025-03-08 09:31:15 +01:00
< 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 >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div >
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > row row-cols-1 row-cols-md-2 g-4< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a longer card with supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< p > Change it to < code > .row-cols-3< / code > and you' ll see the fourth card wrap.< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "row row-cols-1 row-cols-md-3 g-4" >
< div class = "col" >
2022-12-24 18:43:04 +02:00
< div class = "card" >
2025-03-08 09:31:15 +01:00
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "140" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
2022-12-24 18:43:04 +02:00
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
2025-03-08 09:31:15 +01:00
< 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 >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div >
< div class = "col" >
2022-12-24 18:43:04 +02:00
< div class = "card" >
2025-03-08 09:31:15 +01:00
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "140" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
2022-12-24 18:43:04 +02:00
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
2025-03-08 09:31:15 +01:00
< 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 >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< div class = "col" >
< div class = "card" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "140" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content.< / p >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div >
< div class = "col" >
< div class = "card" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "140" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< 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 >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > row row-cols-1 row-cols-md-3 g-4< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a longer card with supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< p > When you need equal height, add < code > .h-100< / code > to the cards. If you want equal heights by default, you can set < code > $card-height: 100%< / code > in Sass.< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "row row-cols-1 row-cols-md-3 g-4" >
< div class = "col" >
< div class = "card h-100" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "140" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< 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 >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div >
< div class = "col" >
< div class = "card h-100" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "140" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This is a short card.< / p >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div >
< div class = "col" >
< div class = "card h-100" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "140" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content.< / p >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div >
< div class = "col" >
< div class = "card h-100" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "140" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< 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 >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > row row-cols-1 row-cols-md-3 g-4< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card h-100< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card h-100< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a short card.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card h-100< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a longer card with supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card h-100< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< p > Just like with card groups, card footers will automatically line up.< / p >
< div class = "bd-example-snippet bd-code-snippet" > < div class = "bd-example m-0 border-0" > < div class = "row row-cols-1 row-cols-md-3 g-4" >
< div class = "col" >
< div class = "card h-100" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
2022-12-24 18:43:04 +02:00
< / div >
2025-03-08 09:31:15 +01:00
< div class = "card-footer" >
< small class = "text-body-secondary" > Last updated 3 mins ago< / small >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div >
< div class = "col" >
< div class = "card h-100" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< p class = "card-text" > This card has supporting text below as a natural lead-in to additional content.< / p >
2022-12-24 18:43:04 +02:00
< / div >
2025-03-08 09:31:15 +01:00
< div class = "card-footer" >
< small class = "text-body-secondary" > Last updated 3 mins ago< / small >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< div class = "col" >
< div class = "card h-100" >
< svg aria-label = "Placeholder: Image cap" class = "bd-placeholder-img card-img-top" height = "180" preserveAspectRatio = "xMidYMid slice" role = "img" width = "100%" xmlns = "http://www.w3.org/2000/svg" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#868e96" / > < text x = "50%" y = "50%" fill = "#dee2e6" dy = ".3em" > Image cap< / text > < / svg >
< div class = "card-body" >
< h5 class = "card-title" > Card title< / h5 >
< 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 >
2022-12-24 18:43:04 +02:00
< / div >
2025-03-08 09:31:15 +01:00
< div class = "card-footer" >
< small class = "text-body-secondary" > Last updated 3 mins ago< / small >
2022-12-24 18:43:04 +02:00
< / div >
< / div >
< / div >
2025-03-08 09:31:15 +01:00
< / div > < / div > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom" > < small class = "font-monospace text-body-secondary text-uppercase" > html< / small > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-edit text-nowrap" title = "Try it on StackBlitz" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#lightning-charge-fill" > < / use > < / svg > < / button > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-html" > < code class = "language-html" > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > row row-cols-1 row-cols-md-3 g-4< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card h-100< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-footer< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card h-100< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > This card has supporting text below as a natural lead-in to additional content.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-footer< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > col< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card h-100< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > img< / span > < span class = "token attr-name" > src< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-img-top< span class = "token punctuation" > "< / span > < / span > < span class = "token attr-name" > alt< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > ...< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-body< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > h5< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-title< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Card title< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > h5< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > p< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-text< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > 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.< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > p< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > div< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > card-footer< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > small< / span > < span class = "token attr-name" > class< / span > < span class = "token attr-value" > < span class = "token punctuation attr-equals" > =< / span > < span class = "token punctuation" > "< / span > text-body-secondary< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > Last updated 3 mins ago< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > small< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span >
< span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > div< / span > < span class = "token punctuation" > >< / span > < / span > < / code > < / pre > < / div > < / div >
< h3 id = "masonry" > Masonry< a class = "anchor-link" href = "#masonry" > < / a > < / h3 >
< p > In < code > v4< / code > we used a CSS-only technique to mimic the behavior of < a href = "https://masonry.desandro.com/" > Masonry< / a > -like columns, but this technique came with lots of unpleasant < a href = "https://github.com/twbs/bootstrap/pull/28922" > side effects< / a > . If you want to have this type of layout in < code > v5< / code > , you can just make use of Masonry plugin. < strong > Masonry is not included in Bootstrap< / strong > , but we' ve made a < a href = "/docs/5.3/examples/masonry" > demo example< / a > to help you get started.< / p >
< h2 id = "css" > CSS< a class = "anchor-link" href = "#css" > < / a > < / h2 >
< h3 id = "variables" > Variables< a class = "anchor-link" href = "#variables" > < / a > < / h3 >
2022-12-24 18:43:04 +02:00
< small class = "d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2" > Added in v5.2.0< / small >
2025-03-08 09:31:15 +01:00
< p > As part of Bootstrap' s evolving CSS variables approach, cards now use local CSS variables on < code > .card< / code > for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.< / p >
< script type = "module" src = "/_astro/Code.astro_astro_type_script_index_0_lang.BEd1At9B.js" > < / script > < div class = "bd-code-snippet bd-example-snippet bd-file-ref" > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom" > < a class = "font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href = "https://github.com/twbs/bootstrap/blob/v5.3.3/scss/_card.scss" > scss/_card.scss < / a > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-scss" > < code class = "language-scss" > < span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-spacer-y< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-spacer-y}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-spacer-x< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-spacer-x}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-title-spacer-y< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-title-spacer-y}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-title-color< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-title-color}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-subtitle-color< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-subtitle-color}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-border-width< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-border-width}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-border-color< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-border-color}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-border-radius< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-border-radius}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-box-shadow< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-box-shadow}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-inner-border-radius< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-inner-border-radius}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-cap-padding-y< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-cap-padding-y}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-cap-padding-x< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-cap-padding-x}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-cap-bg< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-cap-bg}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-cap-color< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-cap-color}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-height< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-height}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-color< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-color}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-bg< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-bg}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-img-overlay-padding< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-img-overlay-padding}< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > --< span class = "token variable" > #{$prefix}< / span > card-group-margin< / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > #{$card-group-margin}< / span > < span class = "token punctuation" > ;< / span >
< / code > < / pre > < / div > < / div >
< h3 id = "sass-variables" > Sass variables< a class = "anchor-link" href = "#sass-variables" > < / a > < / h3 >
< div class = "bd-code-snippet bd-example-snippet bd-file-ref" > < div class = "d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom" > < a class = "font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href = "https://github.com/twbs/bootstrap/blob/v5.3.3/scss/_variables.scss" > scss/_variables.scss < / a > < div class = "d-flex ms-auto" > < button type = "button" class = "btn-clipboard mt-0 me-0" title = "Copy to clipboard" > < svg class = "bi" aria-hidden = "true" > < use xlink:href = "#clipboard" > < / use > < / svg > < / button > < / div > < / div > < div class = "highlight" > < pre class = "language-scss" > < code class = "language-scss" > < span class = "token property" > < span class = "token variable" > $card-spacer-y< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > $spacer< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-spacer-x< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > $spacer< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-title-spacer-y< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > $spacer< / span > < span class = "token operator" > *< / span > .5< span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-title-color< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token null keyword" > null< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-subtitle-color< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token null keyword" > null< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-border-width< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token function" > var< / span > < span class = "token punctuation" > (< / span > --< span class = "token variable" > #{$prefix}< / span > border-width< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-border-color< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token function" > var< / span > < span class = "token punctuation" > (< / span > --< span class = "token variable" > #{$prefix}< / span > border-color-translucent< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-border-radius< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token function" > var< / span > < span class = "token punctuation" > (< / span > --< span class = "token variable" > #{$prefix}< / span > border-radius< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-box-shadow< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token null keyword" > null< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-inner-border-radius< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token function" > subtract< / span > < span class = "token punctuation" > (< / span > < span class = "token variable" > $card-border-radius< / span > < span class = "token punctuation" > ,< / span > < span class = "token variable" > $card-border-width< / span > < span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-cap-padding-y< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > $card-spacer-y< / span > < span class = "token operator" > *< / span > .5< span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-cap-padding-x< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > $card-spacer-x< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-cap-bg< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token function" > rgba< / span > < span class = "token punctuation" > (< / span > < span class = "token function" > var< / span > < span class = "token punctuation" > (< / span > --< span class = "token variable" > #{$prefix}< / span > body-color-rgb< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ,< / span > .03< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-cap-color< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token null keyword" > null< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-height< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token null keyword" > null< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-color< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token null keyword" > null< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-bg< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token function" > var< / span > < span class = "token punctuation" > (< / span > --< span class = "token variable" > #{$prefix}< / span > body-bg< span class = "token punctuation" > )< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-img-overlay-padding< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > $spacer< / span > < span class = "token punctuation" > ;< / span >
< span class = "token property" > < span class = "token variable" > $card-group-margin< / span > < / span > < span class = "token punctuation" > :< / span > < span class = "token variable" > $grid-gutter-width< / span > < span class = "token operator" > *< / span > .5< span class = "token punctuation" > ;< / span >
< / code > < / pre > < / div > < / div > < / div > < / main > < / div > < script src = "/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" > < / script > < script type = "module" src = "/_astro/Scripts.astro_astro_type_script_index_0_lang.lFiTneBv.js" > < / script > < script type = "module" src = "/_astro/Scripts.astro_astro_type_script_index_1_lang.CAqD2hc_.js" > < / script > < script type = "module" > const p = ( ) => { const t = document . querySelector ( ".bd-sidebar" ) , a = document . querySelector ( ".bd-links-nav .active" ) ; if ( ! t || ! a ) return ; const c = t . clientHeight , i = a . offsetTop , r = a . clientHeight , n = i , s = n - c + r ; ( t . scrollTop > n || t . scrollTop < s ) && ( t . scrollTop = n - c / 2 + r / 2 ) } , v = ( ) => { document . querySelectorAll ( '[data-bs-toggle="tooltip"]' ) . forEach ( e => { new bootstrap . Tooltip ( e ) } ) , document . querySelectorAll ( '[data-bs-toggle="popover"]' ) . forEach ( e => { new bootstrap . Popover ( e ) } ) ; const t = document . getElementById ( "toastPlacement" ) ; t && document . getElementById ( "selectToastPlacement" ) . addEventListener ( "change" , function ( ) { t . dataset . originalClass || ( t . dataset . originalClass = t . className ) , t . className = ` ${ t . dataset . originalClass } ${ this . value } ` } ) , document . querySelectorAll ( ".bd-example .toast" ) . forEach ( e => { new bootstrap . Toast ( e , { autohide : ! 1 } ) . show ( ) } ) ; const a = document . getElementById ( "liveToastBtn" ) , c = document . getElementById ( "liveToast" ) ; if ( a ) { const e = bootstrap . Toast . getOrCreateInstance ( c ) ; a . addEventListener ( "click" , ( ) => { e . show ( ) } ) } const i = document . getElementById ( "liveAlertPlaceholder" ) , r = ( e , o ) => { const l = document . createElement ( "div" ) ; l . innerHTML = [ ` <div class="alert alert- ${ o } alert-dismissible" role="alert"> ` , ` <div> ${ e } </div> ` , ' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' , "</div>" ] . join ( "" ) , i . append ( l ) } , n = document . getElementById ( "liveAlertBtn" ) ; n && n . addEventListener ( "click" , ( ) => { r ( "Nice, you triggered this alert message!" , "success" ) } ) , document . querySelectorAll ( '.carousel:not([data-bs-ride="carousel"])' ) . forEach ( e => { bootstrap . Carousel . getOrCreateInstance ( e ) } ) , document . querySelectorAll ( '.bd-example-indeterminate [type="checkbox"]' ) . forEach ( e => { e . id . includes ( "Indeterminate" ) && ( e . indeterminate = ! 0 ) } ) , document . querySelectorAll ( '.bd-content [href="#"]' ) . forEach ( e => { e . addEventListener ( "click" , o => { o . preventDefault ( ) } ) } ) ; const s = document . getElementById ( "exampleModal" ) ; s && s . addEventListener ( "show.bs.modal" , e => { const l = e . relatedTarget . getAttribute ( "data-bs-whatever" ) , m = s . querySelector ( ".modal-title" ) , u = s . querySelector ( ".modal-body input" ) ; m . textContent = ` New message to ${ l } ` , u . value = l } ) ; const d = document . querySelectorAll ( ".bd-example-offcanvas .offcanvas" ) ; d && d . forEach ( e => { e . addEventListener ( "show.bs.offcanvas" , o => { o . preventDefault ( ) } , ! 1 ) } ) } ; p ( ) ; v ( ) ; < / script > < footer class = "bd-footer py-4 py-md-5 mt-5 bg-body-tertiary" > < div class = "container py-4 py-md-5 px-4 px-md-3 text-body-secondary" > < div class = "row" > < div class = "col-lg-3 mb-3" > < a class = "d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none" href = "/" aria-label = "Bootstrap" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 118 94" role = "img" class = "d-block me-2" height = "32" width = "40" > < title > Bootstrap< / title > < path fill-rule = "evenodd" clip-rule = "evenodd" d = "M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill = "currentColor" > < / path > < / svg > < span class
Designed and built with all the love in the world by the < a href = "/docs/5.3/about/team" > Bootstrap team< / a > with the help of < a href = "https://github.com/twbs/bootstrap/graphs/contributors" > our contributors< / a > .
< / li > < li class = "mb-2" >
Code licensed < a href = "https://github.com/twbs/bootstrap/blob/main/LICENSE" target = "_blank" rel = "license noopener" > MIT< / a > , docs < a href = "https://creativecommons.org/licenses/by/3.0/" target = "_blank" rel = "license noopener" > CC BY 3.0< / a > .
< / li > < li class = "mb-2" > Currently v5.3.3.< / li > < / ul > < / div > < div class = "col-6 col-lg-2 offset-lg-1 mb-3" > < h5 > Links< / h5 > < ul class = "list-unstyled" > < li class = "mb-2" > < a href = "/" > Home< / a > < / li > < li class = "mb-2" > < a href = "/docs/5.3/" > Docs< / a > < / li > < li class = "mb-2" > < a href = "/docs/5.3/examples" > Examples< / a > < / li > < li class = "mb-2" > < a href = "https://icons.getbootstrap.com/" > Icons< / a > < / li > < li class = "mb-2" > < a href = "https://themes.getbootstrap.com/" > Themes< / a > < / li > < li class = "mb-2" > < a href = "https://blog.getbootstrap.com/" > Blog< / a > < / li > < li class = "mb-2" > < a href = "https://cottonbureau.com/people/bootstrap" target = "_blank" rel = "noopener" > Swag Store< / a > < / li > < / ul > < / div > < div class = "col-6 col-lg-2 mb-3" > < h5 > Guides< / h5 > < ul class = "list-unstyled" > < li class = "mb-2" > < a href = "/docs/5.3/getting-started" > Getting started< / a > < / li > < li class = "mb-2" > < a href = "/docs/5.3/examples/starter-template" > Starter template< / a > < / li > < li class = "mb-2" > < a href = "/docs/5.3/getting-started/webpack" > Webpack< / a > < / li > < li class = "mb-2" > < a href = "/docs/5.3/getting-started/parcel" > Parcel< / a > < / li > < li class = "mb-2" > < a href = "/docs/5.3/getting-started/vite" > Vite< / a > < / li > < / ul > < / div > < div class = "col-6 col-lg-2 mb-3" > < h5 > Projects< / h5 > < ul class = "list-unstyled" > < li class = "mb-2" > < a href = "https://github.com/twbs/bootstrap" target = "_blank" rel = "noopener" > Bootstrap 5< / a > < / li > < li class = "mb-2" > < a href = "https://github.com/twbs/bootstrap/tree/v4-dev" target = "_blank" rel = "noopener" > Bootstrap 4< / a > < / li > < li class = "mb-2" > < a href = "https://github.com/twbs/icons" target = "_blank" rel = "noopener" > Icons< / a > < / li > < li class = "mb-2" > < a href = "https://github.com/twbs/rfs" target = "_blank" rel = "noopener" > RFS< / a > < / li > < li class = "mb-2" > < a href = "https://github.com/twbs/examples" target = "_blank" rel = "noopener" > Examples repo< / a > < / li > < / ul > < / div > < div class = "col-6 col-lg-2 mb-3" > < h5 > Community< / h5 > < ul class = "list-unstyled" > < li class = "mb-2" > < a href = "https://github.com/twbs/bootstrap/issues" target = "_blank" rel = "noopener" > Issues< / a > < / li > < li class = "mb-2" > < a href = "https://github.com/twbs/bootstrap/discussions" target = "_blank" rel = "noopener" > Discussions< / a > < / li > < li class = "mb-2" > < a href = "https://github.com/sponsors/twbs" target = "_blank" rel = "noopener" > Corporate sponsors< / a > < / li > < li class = "mb-2" > < a href = "https://opencollective.com/bootstrap" target = "_blank" rel = "noopener" > Open Collective< / a > < / li > < li class = "mb-2" > < a href = "https://stackoverflow.com/questions/tagged/bootstrap-5" target = "_blank" rel = "noopener" > Stack Overflow< / a > < / li > < / ul > < / div > < / div > < / div > < / footer > < / body > < / html >
