mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-26 23:54:23 +01:00
87498ceeb2
* Change newer version label of v3.3 * Change newer version label of v3.4 * Change newer version label of v4.0/v4.1/v4.2 * Add newer version alert for v4.3 * Add newer version alert for v4.4 * Add newer version alert for v4.5/v4.6 (using `.skippy` bg color) * Add newer version alert for v5.0 (using `.skippy` bg color) * Add newer version alert for v5.1 (using `.skippy` bg color) * Add newer version alert for v5.2 (using `.skippy` bg color) * Change some copy - v4 gets 'Bootstrap 5 is here' - v5 gets 'Theres a newer version of Bootstrap 5' * Unique message: 'There\'s a newer version of Bootstrap!' * Change HTML structure for focus visible --------- Co-authored-by: Mark Otto <markdotto@gmail.com>
2360 lines
281 KiB
HTML
2360 lines
281 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<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="Hugo 0.104.2">
|
||
|
||
<meta name="docsearch:language" content="en">
|
||
<meta name="docsearch:version" content="5.2">
|
||
|
||
<title>Cards · Bootstrap v5.2</title>
|
||
|
||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/components/card/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||
|
||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||
|
||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||
|
||
<!-- Favicons -->
|
||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||
<link rel="icon" href="/docs/5.2/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="/docs/5.2/assets/brand/bootstrap-social.png">
|
||
|
||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/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:type" content="image/png">
|
||
<meta property="og:image:width" content="1000">
|
||
<meta property="og:image:height" content="500">
|
||
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
|
||
|
||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||
|
||
<script>
|
||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||
ga('set', 'anonymizeIp', true);
|
||
ga('send', 'pageview');
|
||
</script>
|
||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||
|
||
|
||
</head>
|
||
<body>
|
||
<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" style="display: none;">
|
||
<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 8z"/>
|
||
</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"/>
|
||
</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"/>
|
||
</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"/>
|
||
</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"/>
|
||
</symbol>
|
||
<symbol id="check2" viewBox="0 0 16 16">
|
||
<title>Check</title>
|
||
<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"/>
|
||
</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"/>
|
||
</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 d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||
</symbol>
|
||
<symbol id="code" viewBox="0 0 16 16">
|
||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||
</symbol>
|
||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||
</symbol>
|
||
<symbol id="globe2" viewBox="0 0 16 16">
|
||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||
</symbol>
|
||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||
</symbol>
|
||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||
</symbol>
|
||
<symbol id="list" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||
</symbol>
|
||
<symbol id="magic" viewBox="0 0 16 16">
|
||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||
</symbol>
|
||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||
</symbol>
|
||
<symbol id="palette2" viewBox="0 0 16 16">
|
||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||
</symbol>
|
||
<symbol id="plugin" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||
</symbol>
|
||
<symbol id="plus" viewBox="0 0 16 16">
|
||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||
</symbol>
|
||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||
</symbol>
|
||
<symbol id="tools" viewBox="0 0 16 16">
|
||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||
</symbol>
|
||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||
</symbol>
|
||
</svg>
|
||
|
||
|
||
<div class="d-block px-3 py-2 text-center text-bold skippy">
|
||
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
|
||
</div>
|
||
|
||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||
<div class="bd-navbar-toggle">
|
||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||
</svg>
|
||
|
||
<span class="d-none fs-6 pe-1">Browse</span>
|
||
</button>
|
||
</div>
|
||
|
||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><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"/></svg>
|
||
</a>
|
||
|
||
<div class="d-flex">
|
||
|
||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||
|
||
|
||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
|
||
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||
<div class="offcanvas-header px-4 pb-0">
|
||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||
</div>
|
||
|
||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||
<hr class="d-lg-none text-white-50">
|
||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||
<li class="nav-item col-6 col-lg-auto">
|
||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">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.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', '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/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" 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/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" 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/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" 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" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><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"/></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" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><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"/></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" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><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 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"/></svg>
|
||
<small class="d-lg-none ms-2">Open Collective</small>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item py-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 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.2 <span class="visually-hidden">(switch to other versions)</span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end">
|
||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||
<li>
|
||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/components/card/">
|
||
Latest (5.2.x)
|
||
</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>
|
||
|
||
</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.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||
<li><a href="/docs/5.2/getting-started/vite/" class="bd-links-link d-inline-block rounded">Vite</a></li>
|
||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||
<li><a href="/docs/5.2/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.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||
<li><a href="/docs/5.2/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.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</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-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||
Content
|
||
</strong>
|
||
|
||
<ul class="list-unstyled fw-normal pb-2 small">
|
||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</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-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||
Forms
|
||
</strong>
|
||
|
||
<ul class="list-unstyled fw-normal pb-2 small">
|
||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</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-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||
Components
|
||
</strong>
|
||
|
||
<ul class="list-unstyled fw-normal pb-2 small">
|
||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded active" aria-current="page">Card</a></li>
|
||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</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-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||
Helpers
|
||
</strong>
|
||
|
||
<ul class="list-unstyled fw-normal pb-2 small">
|
||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</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-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||
Utilities
|
||
</strong>
|
||
|
||
<ul class="list-unstyled fw-normal pb-2 small">
|
||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</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-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||
Extend
|
||
</strong>
|
||
|
||
<ul class="list-unstyled fw-normal pb-2 small">
|
||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</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-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||
About
|
||
</strong>
|
||
|
||
<ul class="list-unstyled fw-normal pb-2 small">
|
||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||
<li class="bd-links-span-all">
|
||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||
Migration
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="bd-main order-1">
|
||
<div class="bd-intro pt-2 ps-lg-2">
|
||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.2.3/site/content/docs/5.2/components/card.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||
View on GitHub
|
||
</a>
|
||
<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 ps-xl-3 mb-lg-5 text-muted">
|
||
<button class="btn btn-link link-dark 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">On this page</strong>
|
||
<hr class="d-none d-md-block my-2">
|
||
<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>
|
||
<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>
|
||
<li><a href="#sizing">Sizing</a>
|
||
<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>
|
||
<li><a href="#text-alignment">Text alignment</a></li>
|
||
<li><a href="#navigation">Navigation</a></li>
|
||
<li><a href="#images-1">Images</a>
|
||
<ul>
|
||
<li><a href="#image-caps">Image caps</a></li>
|
||
<li><a href="#image-overlays">Image overlays</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#horizontal">Horizontal</a></li>
|
||
<li><a href="#card-styles">Card styles</a>
|
||
<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>
|
||
<li><a href="#card-layout">Card layout</a>
|
||
<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>
|
||
<li><a href="#css">CSS</a>
|
||
<ul>
|
||
<li><a href="#variables">Variables</a></li>
|
||
<li><a href="#sass-variables">Sass variables</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="bd-content ps-lg-2">
|
||
|
||
|
||
<h2 id="about">About <a class="anchor-link" href="#about" aria-label="Link to this section: 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" aria-label="Link to this section: 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.2/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">
|
||
<div class="card" style="width: 18rem;">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h2 id="content-types">Content types <a class="anchor-link" href="#content-types" aria-label="Link to this section: 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" aria-label="Link to this section: Body"></a></h3>
|
||
<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>
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> This is some text within a card body.
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></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" aria-label="Link to this section: Titles, text, and links"></a></h3>
|
||
<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>
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<div class="card" style="width: 18rem;">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<h6 class="card-subtitle mb-2 text-muted">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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h6</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-subtitle mb-2 text-muted"</span><span class="p">></span>Card subtitle<span class="p"></</span><span class="nt">h6</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-link"</span><span class="p">></span>Card link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-link"</span><span class="p">></span>Another link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h3 id="images">Images <a class="anchor-link" href="#images" aria-label="Link to this section: Images"></a></h3>
|
||
<p><code>.card-img-top</code> places an image to the top of the card. 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">
|
||
<div class="card" style="width: 18rem;">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h3 id="list-groups">List groups <a class="anchor-link" href="#list-groups" aria-label="Link to this section: List groups"></a></h3>
|
||
<p>Create lists of content in a card with a flush list group.</p>
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group list-group-flush"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>An item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>A second item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>A third item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> Featured
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group list-group-flush"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>An item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>A second item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>A third item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group list-group-flush"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>An item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>A second item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>A third item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-footer"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> Card footer
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h3 id="kitchen-sink">Kitchen sink <a class="anchor-link" href="#kitchen-sink" aria-label="Link to this section: Kitchen sink"></a></h3>
|
||
<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>
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<div class="card" style="width: 18rem;">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group list-group-flush"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>An item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>A second item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>A third item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-link"</span><span class="p">></span>Card link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-link"</span><span class="p">></span>Another link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h3 id="header-and-footer">Header and footer <a class="anchor-link" href="#header-and-footer" aria-label="Link to this section: Header and footer"></a></h3>
|
||
<p>Add an optional header and/or footer within a card.</p>
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> Featured
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Special title treatment<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<p>Card headers can be styled by adding <code>.card-header</code> to <code><h*></code> elements.</p>
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Featured<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Special title treatment<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> Quote
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote mb-0"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></</span><span class="nt">footer</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<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-muted">
|
||
2 days ago
|
||
</div>
|
||
</div>
|
||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-center"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> Featured
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Special title treatment<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-footer text-muted"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> 2 days ago
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h2 id="sizing">Sizing <a class="anchor-link" href="#sizing" aria-label="Link to this section: 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" aria-label="Link to this section: Using grid markup"></a></h3>
|
||
<p>Using the grid, wrap cards in columns and rows as needed.</p>
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<div class="row">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-6"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Special title treatment<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-6"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Special title treatment<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h3 id="using-utilities">Using utilities <a class="anchor-link" href="#using-utilities" aria-label="Link to this section: Using utilities"></a></h3>
|
||
<p>Use our handful of <a href="/docs/5.2/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">
|
||
<div class="card w-75">
|
||
<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 class="card w-50">
|
||
<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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card w-75"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card w-50"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h3 id="using-custom-css">Using custom CSS <a class="anchor-link" href="#using-custom-css" aria-label="Link to this section: Using custom CSS"></a></h3>
|
||
<p>Use custom CSS in your stylesheets or as inline styles to set a width.</p>
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Special title treatment<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h2 id="text-alignment">Text alignment <a class="anchor-link" href="#text-alignment" aria-label="Link to this section: 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.2/utilities/text/#text-alignment">text align classes</a>.</p>
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<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 class="card text-center" 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 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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Special title treatment<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-center"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Special title treatment<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl">
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-end"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Special title treatment<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h2 id="navigation">Navigation <a class="anchor-link" href="#navigation" aria-label="Link to this section: Navigation"></a></h2>
|
||
<p>Add some navigation to a card’s header (or block) with Bootstrap’s <a href="/docs/5.2/components/navs-tabs/">nav components</a>.</p>
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<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">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
</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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-center"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-tabs card-header-tabs"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"true"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Active<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Special title treatment<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<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">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
</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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-center"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills card-header-pills"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link active"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Active<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Special title treatment<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>With supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h2 id="images-1">Images <a class="anchor-link" href="#images-1" aria-label="Link to this section: Images"></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" aria-label="Link to this section: 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">
|
||
<div class="card mb-3">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<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-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
<svg class="bd-placeholder-img card-img-bottom" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card mb-3"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-bottom"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h3 id="image-overlays">Image overlays <a class="anchor-link" href="#image-overlays" aria-label="Link to this section: 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">
|
||
<div class="card text-bg-dark">
|
||
<svg class="bd-placeholder-img bd-placeholder-img-lg card-img" width="100%" height="270" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Card image" preserveAspectRatio="xMidYMid slice" focusable="false"><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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-bg-dark"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-overlay"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">><</span><span class="nt">small</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<div class="bd-callout bd-callout-info">
|
||
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.
|
||
</div>
|
||
|
||
<h2 id="horizontal">Horizontal <a class="anchor-link" href="#horizontal" aria-label="Link to this section: Horizontal"></a></h2>
|
||
<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>
|
||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||
<div class="card mb-3" style="max-width: 540px;">
|
||
<div class="row g-0">
|
||
<div class="col-md-4">
|
||
<svg class="bd-placeholder-img img-fluid rounded-start" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><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-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 540px;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row g-0"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-4"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-fluid rounded-start"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-8"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h2 id="card-styles">Card styles <a class="anchor-link" href="#card-styles" aria-label="Link to this section: Card styles"></a></h2>
|
||
<p>Cards include various options for customizing their backgrounds, borders, and color.</p>
|
||
<h3 id="background-and-color">Background and color <a class="anchor-link" href="#background-and-color" aria-label="Link to this section: Background and color"></a></h3>
|
||
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.2.0</small>
|
||
|
||
<p>Set a <code>background-color</code> with contrasting foreground <code>color</code> with <a href="/docs/5.2/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.2/utilities/colors/"><code>.text-{color}</code></a> and <a href="/docs/5.2/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">
|
||
|
||
<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>
|
||
</div>
|
||
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
|
||
<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>
|
||
</div>
|
||
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
|
||
<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>
|
||
</div>
|
||
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
|
||
<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>
|
||
</div>
|
||
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
|
||
<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>
|
||
</div>
|
||
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
|
||
<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>
|
||
</div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-bg-primary mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Primary card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-bg-secondary mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Secondary card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-bg-success mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Success card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-bg-danger mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Danger card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-bg-warning mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Warning card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-bg-info mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Info card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-bg-light mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Light card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-bg-dark mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Dark card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<div class="bd-callout bd-callout-info">
|
||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies <a class="anchor-link" href="#conveying-meaning-to-assistive-technologies" aria-label="Link to this section: Conveying meaning to assistive technologies"></a></h5>
|
||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.
|
||
</div>
|
||
|
||
<h3 id="border">Border <a class="anchor-link" href="#border" aria-label="Link to this section: Border"></a></h3>
|
||
<p>Use <a href="/docs/5.2/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">
|
||
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div class="card border-secondary mb-3" style="max-width: 18rem;">
|
||
<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>
|
||
</div>
|
||
<div class="card border-success mb-3" style="max-width: 18rem;">
|
||
<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>
|
||
</div>
|
||
<div class="card border-danger mb-3" style="max-width: 18rem;">
|
||
<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>
|
||
</div>
|
||
<div class="card border-warning mb-3" style="max-width: 18rem;">
|
||
<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>
|
||
</div>
|
||
<div class="card border-info mb-3" style="max-width: 18rem;">
|
||
<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>
|
||
</div>
|
||
<div class="card border-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>
|
||
</div>
|
||
</div>
|
||
<div class="card border-dark mb-3" style="max-width: 18rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body text-dark">
|
||
<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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card border-primary mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body text-primary"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Primary card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card border-secondary mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body text-secondary"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Secondary card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card border-success mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body text-success"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Success card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card border-danger mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body text-danger"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Danger card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card border-warning mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Warning card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card border-info mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Info card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card border-light mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Light card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card border-dark mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body text-dark"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Dark card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h3 id="mixins-utilities">Mixins utilities <a class="anchor-link" href="#mixins-utilities" aria-label="Link to this section: 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">
|
||
<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 bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card border-success mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 18rem;"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-header bg-transparent border-success"</span><span class="p">></span>Header<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body text-success"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Success card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-footer bg-transparent border-success"</span><span class="p">></span>Footer<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h2 id="card-layout">Card layout <a class="anchor-link" href="#card-layout" aria-label="Link to this section: 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" aria-label="Link to this section: 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">
|
||
<div class="card-group">
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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-muted">Last updated 3 mins ago</small></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-group"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>This card has supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></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">
|
||
<div class="card-group">
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-group"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-footer"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>This card has supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-footer"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-footer"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h3 id="grid-cards">Grid cards <a class="anchor-link" href="#grid-cards" aria-label="Link to this section: Grid cards"></a></h3>
|
||
<p>Use the Bootstrap grid system and its <a href="/docs/5.2/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">
|
||
<div class="row row-cols-1 row-cols-md-2 g-4">
|
||
<div class="col">
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row row-cols-1 row-cols-md-2 g-4"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>This is a longer card with supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></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">
|
||
<div class="row row-cols-1 row-cols-md-3 g-4">
|
||
<div class="col">
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row row-cols-1 row-cols-md-3 g-4"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>This is a longer card with supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></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">
|
||
<div class="row row-cols-1 row-cols-md-3 g-4">
|
||
<div class="col">
|
||
<div class="card h-100">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card h-100">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card h-100">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card h-100">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row row-cols-1 row-cols-md-3 g-4"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card h-100"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card h-100"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>This is a short card.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card h-100"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>This is a longer card with supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card h-100"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></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">
|
||
<div class="row row-cols-1 row-cols-md-3 g-4">
|
||
<div class="col">
|
||
<div class="card h-100">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card h-100">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card h-100">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><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-muted">Last updated 3 mins ago</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||
<small class="font-monospace text-muted 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" role="img" aria-label="Try it"><use xlink:href="#lightning-charge-fill"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||
<svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||
</button>
|
||
</div>
|
||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row row-cols-1 row-cols-md-3 g-4"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card h-100"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-footer"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card h-100"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>This card has supporting text below as a natural lead-in to additional content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-footer"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card h-100"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></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="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-footer"</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>Last updated 3 mins ago<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||
|
||
<h3 id="masonry">Masonry <a class="anchor-link" href="#masonry" aria-label="Link to this section: 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.2/examples/masonry/">demo example</a> to help you get started.</p>
|
||
<h2 id="css">CSS <a class="anchor-link" href="#css" aria-label="Link to this section: CSS"></a></h2>
|
||
<h3 id="variables">Variables <a class="anchor-link" href="#variables" aria-label="Link to this section: Variables"></a></h3>
|
||
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.2.0</small>
|
||
|
||
<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>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-spacer-y</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-spacer-y</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-spacer-x</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-spacer-x</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-title-spacer-y</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-title-spacer-y</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-border-width</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-border-width</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-border-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-border-color</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-border-radius</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-border-radius</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-box-shadow</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-box-shadow</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-inner-border-radius</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-inner-border-radius</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-cap-padding-y</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-cap-padding-y</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-cap-padding-x</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-cap-padding-x</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-cap-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-cap-bg</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-cap-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-cap-color</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-height</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-height</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-color</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-bg</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-img-overlay-padding</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-img-overlay-padding</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}card-group-margin</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$card-group-margin</span><span class="si">}</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||
<h3 id="sass-variables">Sass variables <a class="anchor-link" href="#sass-variables" aria-label="Link to this section: Sass variables"></a></h3>
|
||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$card-spacer-y</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-spacer-x</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-title-spacer-y</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-border-color</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$prefix</span><span class="si">}</span><span class="n">border-color-translucent</span><span class="p">);</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-box-shadow</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-inner-border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$card-border-radius</span><span class="o">,</span> <span class="nv">$card-border-width</span><span class="p">);</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-cap-padding-y</span><span class="o">:</span> <span class="nv">$card-spacer-y</span> <span class="o">*</span> <span class="mf">.5</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-cap-padding-x</span><span class="o">:</span> <span class="nv">$card-spacer-x</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-cap-bg</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.03</span><span class="p">);</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-cap-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-height</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-bg</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-img-overlay-padding</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||
</span></span><span class="line"><span class="cl"><span class="nv">$card-group-margin</span><span class="o">:</span> <span class="nv">$grid-gutter-width</span> <span class="o">*</span> <span class="mf">.5</span><span class="p">;</span>
|
||
</span></span></code></pre></div>
|
||
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
|
||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||
<div class="row">
|
||
<div class="col-lg-3 mb-3">
|
||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><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"/></svg>
|
||
<span class="fs-5">Bootstrap</span>
|
||
</a>
|
||
<ul class="list-unstyled small text-muted">
|
||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/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.2.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.2/">Docs</a></li>
|
||
<li class="mb-2"><a href="/docs/5.2/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">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.2/getting-started/">Getting started</a></li>
|
||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||
<li class="mb-2"><a href="/docs/5.2/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">Bootstrap 5</a></li>
|
||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</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">Issues</a></li>
|
||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
||
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||
|
||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||
|
||
<script>
|
||
|
||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||
btn.addEventListener('click', event => {
|
||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||
|
||
|
||
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
|
||
|
||
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
|
||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
|
||
})
|
||
})
|
||
|
||
StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
|
||
const markup = `<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||
<title>Bootstrap Example</title>
|
||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||
</head>
|
||
<body class="p-3 m-0 border-0 ${classes}">
|
||
|
||
<!-- Example Code -->
|
||
${htmlSnippet.replace(/^/gm, ' ')}
|
||
<!-- End Example Code -->
|
||
</body>
|
||
</html>`
|
||
|
||
const jsSnippetContent = jsSnippet ? '\/\/ NOTICE!!! Initially embedded in our docs this JavaScript\n\/\/ file contains elements that can help you create reproducible\n\/\/ use cases in StackBlitz for instance\.\n\/\/ In a real project please adapt this content to your needs\.\n\/\/ \u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\n\n\/\*!\n \* JavaScript for Bootstrap\u0027s docs \(https:\/\/getbootstrap\.com\/\)\n \* Copyright 2011\-2022 The Bootstrap Authors\n \* Copyright 2011\-2022 Twitter, Inc\.\n \* Licensed under the Creative Commons Attribution 3\.0 Unported License\.\n \* For details, see https:\/\/creativecommons\.org\/licenses\/by\/3\.0\/\.\n \*\/\n\n\/\* global bootstrap: false \*\/\n\n\(\(\) =\u003e \{\n \u0027use strict\u0027\n\n \/\/ \-\-\-\-\-\-\-\-\n \/\/ Tooltips\n \/\/ \-\-\-\-\-\-\-\-\n \/\/ Instantiate all tooltips in a docs or StackBlitz page\n document\.querySelectorAll\(\u0027\[data\-bs\-toggle=\u0022tooltip\u0022\]\u0027\)\n \.forEach\(tooltip =\u003e \{\n new bootstrap\.Tooltip\(tooltip\)\n \}\)\n\n \/\/ \-\-\-\-\-\-\-\-\n \/\/ Popovers\n \/\/ \-\-\-\-\-\-\-\-\n \/\/ Instantiate all popovers in a docs or StackBlitz page\n document\.querySelectorAll\(\u0027\[data\-bs\-toggle=\u0022popover\u0022\]\u0027\)\n \.forEach\(popover =\u003e \{\n new bootstrap\.Popover\(popover\)\n \}\)\n\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Toasts\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Used by \u0027Placement\u0027 example in docs or StackBlitz\n const toastPlacement = document\.getElementById\(\u0027toastPlacement\u0027\)\n if \(toastPlacement\) \{\n document\.getElementById\(\u0027selectToastPlacement\u0027\)\.addEventListener\(\u0027change\u0027, function \(\) \{\n if \(!toastPlacement\.dataset\.originalClass\) \{\n toastPlacement\.dataset\.originalClass = toastPlacement\.className\n \}\n\n toastPlacement\.className = `\$\{toastPlacement\.dataset\.originalClass\} \$\{this\.value\}`\n \}\)\n \}\n\n \/\/ Instantiate all toasts in a docs page only\n document\.querySelectorAll\(\u0027\.bd\-example \.toast\u0027\)\n \.forEach\(toastNode =\u003e \{\n const toast = new bootstrap\.Toast\(toastNode, \{\n autohide: false\n \}\)\n\n toast\.show\(\)\n \}\)\n\n \/\/ Instantiate all toasts in a docs page only\n const toastTrigger = document\.getElementById\(\u0027liveToastBtn\u0027\)\n const toastLiveExample = document\.getElementById\(\u0027liveToast\u0027\)\n if \(toastTrigger\) \{\n toastTrigger\.addEventListener\(\u0027click\u0027, \(\) =\u003e \{\n const toast = new bootstrap\.Toast\(toastLiveExample\)\n\n toast\.show\(\)\n \}\)\n \}\n\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Alerts\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Used in \u0027Show live toast\u0027 example in docs or StackBlitz\n const alertPlaceholder = document\.getElementById\(\u0027liveAlertPlaceholder\u0027\)\n const alertTrigger = document\.getElementById\(\u0027liveAlertBtn\u0027\)\n\n const appendAlert = \(message, type\) =\u003e \{\n const wrapper = document\.createElement\(\u0027div\u0027\)\n wrapper\.innerHTML = \[\n `\u003cdiv class=\u0022alert alert\-\$\{type\} alert\-dismissible\u0022 role=\u0022alert\u0022\u003e`,\n ` \u003cdiv\u003e\$\{message\}\u003c\/div\u003e`,\n \u0027 \u003cbutton type=\u0022button\u0022 class=\u0022btn\-close\u0022 data\-bs\-dismiss=\u0022alert\u0022 aria\-label=\u0022Close\u0022\u003e\u003c\/button\u003e\u0027,\n \u0027\u003c\/div\u003e\u0027\n \]\.join\(\u0027\u0027\)\n\n alertPlaceholder\.append\(wrapper\)\n \}\n\n if \(alertTrigger\) \{\n alertTrigger\.addEventListener\(\u0027click\u0027, \(\) =\u003e \{\n appendAlert\(\u0027Nice, you triggered this alert message!\u0027, \u0027success\u0027\)\n \}\)\n \}\n\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Checks \u0026 Radios\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Indeterminate checkbox example in docs and StackBlitz\n document\.querySelectorAll\(\u0027\.bd\-example\-indeterminate \[type=\u0022checkbox\u0022\]\u0027\)\n \.forEach\(checkbox =\u003e \{\n if \(checkbox\.id\.includes\(\u0027Indeterminate\u0027\)\) \{\n checkbox\.indeterminate = true\n \}\n \}\)\n\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Links\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Disable empty links in docs examples only\n document\.querySelectorAll\(\u0027\.bd\-content \[href=\u0022#\u0022\]\u0027\)\n \.forEach\(link =\u003e \{\n link\.addEventListener\(\u0027click\u0027, event =\u003e \{\n event\.preventDefault\(\)\n \}\)\n \}\)\n\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Modal\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Modal \u0027Varying modal content\u0027 example in docs and StackBlitz\n const exampleModal = document\.getElementById\(\u0027exampleModal\u0027\)\n if \(exampleModal\) \{\n exampleModal\.addEventListener\(\u0027show\.bs\.modal\u0027, event =\u003e \{\n \/\/ Button that triggered the modal\n const button = event\.relatedTarget\n \/\/ Extract info from data\-bs\-\* attributes\n const recipient = button\.getAttribute\(\u0027data\-bs\-whatever\u0027\)\n\n \/\/ Update the modal\u0027s content\.\n const modalTitle = exampleModal\.querySelector\(\u0027\.modal\-title\u0027\)\n const modalBodyInput = exampleModal\.querySelector\(\u0027\.modal\-body input\u0027\)\n\n modalTitle\.textContent = `New message to \$\{recipient\}`\n modalBodyInput\.value = recipient\n \}\)\n \}\n\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ Offcanvas\n \/\/ \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\n \/\/ \u0027Offcanvas components\u0027 example in docs only\n const myOffcanvas = document\.querySelectorAll\(\u0027\.bd\-example\-offcanvas \.offcanvas\u0027\)\n if \(myOffcanvas\) \{\n myOffcanvas\.forEach\(offcanvas =\u003e \{\n offcanvas\.addEventListener\(\u0027show\.bs\.offcanvas\u0027, event =\u003e \{\n event\.preventDefault\(\)\n \}, false\)\n \}\)\n \}\n\}\)\(\)\n' : null
|
||
const project = {
|
||
files: {
|
||
'index.html': markup,
|
||
'index.js': jsSnippetContent
|
||
},
|
||
title: 'Bootstrap Example',
|
||
description: `Official example from ${window.location.href}`,
|
||
template: jsSnippet ? 'javascript' : 'html',
|
||
tags: ['bootstrap']
|
||
}
|
||
|
||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
<div class="position-fixed"><input type="text" tabindex="-1"></div>
|
||
|
||
</body>
|
||
</html>
|