mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-23 15:52:21 +01:00
Add v5.0.0-beta1 docs. (#32256)
This commit is contained in:
XhmikosR
GitHub
parent
aea779239a
commit
694cd40c77
173
404.html
Normal file
173
404.html
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>404 - File not found · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/404.html">
|
||||||
|
|
||||||
|
<meta name="robots" content="noindex,follow">
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="404 - File not found">
|
||||||
|
<meta name="twitter:description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/404.html">
|
||||||
|
<meta property="og:title" content="404 - File not found">
|
||||||
|
<meta property="og:description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 class="d-flex flex-column min-vh-100">
|
||||||
|
<div class="skippy overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<main class="my-auto p-5" id="content">
|
||||||
|
<div class="text-center py-5">
|
||||||
|
<h1 class="display-1">404</h1>
|
||||||
|
<h2>File not found</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,11 +1,12 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en-US">
|
<html lang="en">
|
||||||
<meta charset="utf-8">
|
<head>
|
||||||
<title>Redirecting…</title>
|
<meta charset="utf-8">
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/overview/">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<script>location="https://getbootstrap.com/docs/4.5/about/overview/"</script>
|
<title>https://getbootstrap.com/docs/5.0/about/overview/</title>
|
||||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.5/about/overview/">
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/about/overview/">
|
||||||
<meta name="robots" content="noindex">
|
<meta name="robots" content="noindex">
|
||||||
<h1>Redirecting…</h1>
|
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/5.0/about/overview/">
|
||||||
<a href="https://getbootstrap.com/docs/4.5/about/overview/">Click here if you are not redirected.</a>
|
</head>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 7.5 KiB |
@ -1,11 +1,12 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en-US">
|
<html lang="en">
|
||||||
<meta charset="utf-8">
|
<head>
|
||||||
<title>Redirecting…</title>
|
<meta charset="utf-8">
|
||||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/alerts/">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<script>location="https://getbootstrap.com/docs/4.5/components/alerts/"</script>
|
<title>https://getbootstrap.com/docs/5.0/components/accordion/</title>
|
||||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.5/components/alerts/">
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/accordion/">
|
||||||
<meta name="robots" content="noindex">
|
<meta name="robots" content="noindex">
|
||||||
<h1>Redirecting…</h1>
|
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/5.0/components/accordion/">
|
||||||
<a href="https://getbootstrap.com/docs/4.5/components/alerts/">Click here if you are not redirected.</a>
|
</head>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
469
docs/5.0/about/brand/index.html
Normal file
469
docs/5.0/about/brand/index.html
Normal file
@ -0,0 +1,469 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Brand guidelines · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/about/brand/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Brand guidelines">
|
||||||
|
<meta name="twitter:description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/about/brand/">
|
||||||
|
<meta property="og:title" content="Brand guidelines">
|
||||||
|
<meta property="og:description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="false">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded active" aria-current="page">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/about/brand.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Brand guidelines</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">Documentation and examples for Bootstrap’s logo and brand usage guidelines.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#logo">Logo</a></li>
|
||||||
|
<li><a href="#name">Name</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<p>Have a need for Bootstrap’s brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well.</p>
|
||||||
|
<h2 id="logo">Logo</h2>
|
||||||
|
<p>When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap’s branding for your own open or closed source projects. <strong>Do not use the Twitter name or logo</strong> in association with Bootstrap.</p>
|
||||||
|
<div class="bd-brand-item px-2 py-5 mb-3 bg-light rounded-lg">
|
||||||
|
<img class="d-block img-fluid mx-auto" src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="256" height="204">
|
||||||
|
</div>
|
||||||
|
<p>Our logo mark is also available in black and white. All rules for our primary logo apply to these as well.</p>
|
||||||
|
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
|
||||||
|
<div class="bd-brand-item w-100 px-2 py-5">
|
||||||
|
<img src="/docs/5.0/assets/brand/bootstrap-logo-black.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="bd-brand-item w-100 px-2 py-5 inverse">
|
||||||
|
<img src="/docs/5.0/assets/brand/bootstrap-logo-white.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 id="name">Name</h2>
|
||||||
|
<p>Bootstrap should always be referred to as just <strong>Bootstrap</strong>. No Twitter before it and no capital <em>s</em>.</p>
|
||||||
|
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
|
||||||
|
<div class="bd-brand-item w-100 p-3">
|
||||||
|
<div class="h3">Bootstrap</div>
|
||||||
|
<strong class="text-success">Correct</strong>
|
||||||
|
</div>
|
||||||
|
<div class="bd-brand-item w-100 p-3">
|
||||||
|
<div class="h3 text-muted">BootStrap</div>
|
||||||
|
<strong class="text-danger">Incorrect</strong>
|
||||||
|
</div>
|
||||||
|
<div class="bd-brand-item w-100 p-3">
|
||||||
|
<div class="h3 text-muted">Twitter Bootstrap</div>
|
||||||
|
<strong class="text-danger">Incorrect</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
docs/5.0/about/index.html
Normal file
12
docs/5.0/about/index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>https://getbootstrap.com/docs/5.0/about/overview/</title>
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/about/overview/">
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/5.0/about/overview/">
|
||||||
|
</head>
|
||||||
|
</html>
|
||||||
|
|
||||||
454
docs/5.0/about/license/index.html
Normal file
454
docs/5.0/about/license/index.html
Normal file
@ -0,0 +1,454 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>License FAQs · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/about/license/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="License FAQs">
|
||||||
|
<meta name="twitter:description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/about/license/">
|
||||||
|
<meta property="og:title" content="License FAQs">
|
||||||
|
<meta property="og:description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="false">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded active" aria-current="page">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/about/license.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">License FAQs</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">Commonly asked questions about Bootstrap’s open source license.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<p>Bootstrap is released under the MIT license and is copyright 2020 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
|
||||||
|
<h2 id="it-requires-you-to">It requires you to:</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Keep the license and copyright notice included in Bootstrap’s CSS and JavaScript files when you use them in your works</li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="it-permits-you-to">It permits you to:</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes</li>
|
||||||
|
<li>Use Bootstrap in packages or distributions that you create</li>
|
||||||
|
<li>Modify the source code</li>
|
||||||
|
<li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="it-forbids-you-to">It forbids you to:</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Hold the authors and license owners liable for damages as Bootstrap is provided without warranty</li>
|
||||||
|
<li>Hold the creators or copyright holders of Bootstrap liable</li>
|
||||||
|
<li>Redistribute any piece of Bootstrap without proper attribution</li>
|
||||||
|
<li>Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution</li>
|
||||||
|
<li>Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question</li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="it-does-not-require-you-to">It does not require you to:</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li>
|
||||||
|
<li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
|
||||||
|
</ul>
|
||||||
|
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/v5.0.0-beta1/LICENSE">in the project repository</a> for more information.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
438
docs/5.0/about/overview/index.html
Normal file
438
docs/5.0/about/overview/index.html
Normal file
@ -0,0 +1,438 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>About · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/about/overview/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="About">
|
||||||
|
<meta name="twitter:description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/about/overview/">
|
||||||
|
<meta property="og:title" content="About">
|
||||||
|
<meta property="og:description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="false">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded active" aria-current="page">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/about/overview.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">About</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="team">Team</h2>
|
||||||
|
<p>Bootstrap is maintained by a <a href="https://github.com/orgs/twbs/people">small team of developers</a> on GitHub. We’re actively looking to grow this team and would love to hear from you if you’re excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.</p>
|
||||||
|
<h2 id="history">History</h2>
|
||||||
|
<p>Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p>
|
||||||
|
<p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/engineering/en_us/a/2010/hack-week.html">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
|
||||||
|
<p>Originally <a href="https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter.html">released</a> on <time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>, we’ve since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
|
||||||
|
<p>With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS’s flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.</p>
|
||||||
|
<p>Our latest release, Bootstrap 5 (currently in development), focuses on improving v4’s codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.</p>
|
||||||
|
<h2 id="get-involved">Get involved</h2>
|
||||||
|
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v5.0.0-beta1/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
496
docs/5.0/about/team/index.html
Normal file
496
docs/5.0/about/team/index.html
Normal file
@ -0,0 +1,496 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="An overview of the founding team and core contributors to Bootstrap.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Team · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/about/team/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Team">
|
||||||
|
<meta name="twitter:description" content="An overview of the founding team and core contributors to Bootstrap.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/about/team/">
|
||||||
|
<meta property="og:title" content="Team">
|
||||||
|
<meta property="og:description" content="An overview of the founding team and core contributors to Bootstrap.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="false">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded active" aria-current="page">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/about/team.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Team</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">An overview of the founding team and core contributors to Bootstrap.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
|
||||||
|
|
||||||
|
<div class="list-group mb-3">
|
||||||
|
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/mdo">
|
||||||
|
<img src="https://github.com/mdo.png" alt="@mdo" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||||
|
<span>
|
||||||
|
<strong>Mark Otto</strong> @mdo
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
|
||||||
|
<img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||||
|
<span>
|
||||||
|
<strong>Jacob Thornton</strong> @fat
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
|
||||||
|
<img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||||
|
<span>
|
||||||
|
<strong>XhmikosR</strong> @xhmikosr
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
|
||||||
|
<img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||||
|
<span>
|
||||||
|
<strong>Patrick H. Lauke</strong> @patrickhlauke
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
|
||||||
|
<img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||||
|
<span>
|
||||||
|
<strong>Gleb Mazovetskiy</strong> @glebm
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
|
||||||
|
<img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||||
|
<span>
|
||||||
|
<strong>Johann-S</strong> @johann-s
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
|
||||||
|
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||||
|
<span>
|
||||||
|
<strong>Martijn Cuppens</strong> @martijncuppens
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/ysds">
|
||||||
|
<img src="https://github.com/ysds.png" alt="@ysds" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||||
|
<span>
|
||||||
|
<strong>Shohei Yoshida</strong> @ysds
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/ffoodd">
|
||||||
|
<img src="https://github.com/ffoodd.png" alt="@ffoodd" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||||
|
<span>
|
||||||
|
<strong>Gaël Poupard</strong> @ffoodd
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v5.0.0-beta1/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
440
docs/5.0/about/translations/index.html
Normal file
440
docs/5.0/about/translations/index.html
Normal file
@ -0,0 +1,440 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Links to community-translated Bootstrap documentation sites.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Translations · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/about/translations/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Translations">
|
||||||
|
<meta name="twitter:description" content="Links to community-translated Bootstrap documentation sites.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/about/translations/">
|
||||||
|
<meta property="og:title" content="Translations">
|
||||||
|
<meta property="og:description" content="Links to community-translated Bootstrap documentation sites.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="false">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded active" aria-current="page">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/about/translations.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Translations</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">Links to community-translated Bootstrap documentation sites.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<p>Community members have translated Bootstrap’s documentation into various languages. None are officially supported and they may not always be up to date.</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://bootstrap.hexschool.com/" hreflang="zh-tw">Bootstrap 4 繁體中文手冊 (中文(繁體))</a></li>
|
||||||
|
<li><a href="https://code.z01.com/v4/" hreflang="zh">Bootstrap 4 · 全球最流行的 HTML、CSS 和 JS 工具库。 (Chinese)</a></li>
|
||||||
|
<li><a href="https://getbootstrap.com.br/v4/" hreflang="pt-BR">Bootstrap 4 Português do Brasil (Brazilian Portuguese)</a></li>
|
||||||
|
<li><a href="https://getbootstrap.jp/" hreflang="ja">Bootstrap 4 日本語リファレンス (Japanese)</a></li>
|
||||||
|
<li><a href="https://getbootstrap.su/" hreflang="ru">Bootstrap 5 на русском (Russian)</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><strong>We don’t help organize or host translations, we just link to them.</strong></p>
|
||||||
|
<p>Finished a new or better translation? Open a pull request to add it to our list.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
docs/5.0/assets/brand/bootstrap-logo-black.svg
Normal file
1
docs/5.0/assets/brand/bootstrap-logo-black.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408"><path d="M106.342 0c-29.214 0-50.827 25.58-49.86 53.32.927 26.647-.278 61.165-8.966 89.31C38.802 170.862 24.07 188.707 0 191v26c24.069 2.293 38.802 20.138 47.516 48.37 8.688 28.145 9.893 62.663 8.965 89.311C55.515 382.42 77.128 408 106.342 408h299.353c29.214 0 50.827-25.58 49.861-53.319-.928-26.648.277-61.166 8.964-89.311 8.715-28.232 23.411-46.077 47.48-48.37v-26c-24.069-2.293-38.765-20.138-47.48-48.37-8.687-28.145-9.892-62.663-8.964-89.31C456.522 25.58 434.909 0 405.695 0H106.342zm236.559 251.102c0 38.197-28.501 61.355-75.798 61.355h-87.202a2 2 0 01-2-2v-213a2 2 0 012-2h86.74c39.439 0 65.322 21.354 65.322 54.138 0 23.008-17.409 43.61-39.594 47.219v1.203c30.196 3.309 50.532 24.212 50.532 53.085zm-84.58-128.125h-45.91v64.814h38.669c29.888 0 46.373-12.03 46.373-33.535 0-20.151-14.174-31.279-39.132-31.279zm-45.91 90.53v71.431h47.605c31.12 0 47.605-12.482 47.605-35.941 0-23.46-16.947-35.49-49.608-35.49h-45.602z"/></svg>
|
||||||
|
After Width: | Height: | Size: 995 B |
BIN
docs/5.0/assets/brand/bootstrap-logo-shadow.png
Normal file
BIN
docs/5.0/assets/brand/bootstrap-logo-shadow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
1
docs/5.0/assets/brand/bootstrap-logo-white.svg
Normal file
1
docs/5.0/assets/brand/bootstrap-logo-white.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408" fill="#fff"><path d="M106.342 0c-29.214 0-50.827 25.58-49.86 53.32.927 26.647-.278 61.165-8.966 89.31C38.802 170.862 24.07 188.707 0 191v26c24.069 2.293 38.802 20.138 47.516 48.37 8.688 28.145 9.893 62.663 8.965 89.311C55.515 382.42 77.128 408 106.342 408h299.353c29.214 0 50.827-25.58 49.861-53.319-.928-26.648.277-61.166 8.964-89.311 8.715-28.232 23.411-46.077 47.48-48.37v-26c-24.069-2.293-38.765-20.138-47.48-48.37-8.687-28.145-9.892-62.663-8.964-89.31C456.522 25.58 434.909 0 405.695 0H106.342zm236.559 251.102c0 38.197-28.501 61.355-75.798 61.355h-87.202a2 2 0 01-2-2v-213a2 2 0 012-2h86.74c39.439 0 65.322 21.354 65.322 54.138 0 23.008-17.409 43.61-39.594 47.219v1.203c30.196 3.309 50.532 24.212 50.532 53.085zm-84.58-128.125h-45.91v64.814h38.669c29.888 0 46.373-12.03 46.373-33.535 0-20.151-14.174-31.279-39.132-31.279zm-45.91 90.53v71.431h47.605c31.12 0 47.605-12.482 47.605-35.941 0-23.46-16.947-35.49-49.608-35.49h-45.602z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1007 B |
1
docs/5.0/assets/brand/bootstrap-logo.svg
Normal file
1
docs/5.0/assets/brand/bootstrap-logo.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408"><defs><linearGradient id="bs-logo-a" x1="76.079" x2="523.48" y1="10.798" y2="365.945" gradientUnits="userSpaceOnUse"><stop stop-color="#9013fe"/><stop offset="1" stop-color="#6610f2"/></linearGradient><linearGradient id="bs-logo-b" x1="193.508" x2="293.514" y1="109.74" y2="278.872" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#f1e5fc"/></linearGradient><filter xmlns="http://www.w3.org/2000/svg" id="bs-logo-c" width="197" height="249" x="161.901" y="83.457" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs><path fill="url(#bs-logo-a)" d="M56.481 53.32C55.515 25.58 77.128 0 106.342 0h299.353c29.214 0 50.827 25.58 49.861 53.32-.928 26.647.277 61.165 8.964 89.31 8.715 28.232 23.411 46.077 47.48 48.37v26c-24.069 2.293-38.765 20.138-47.48 48.37-8.687 28.145-9.892 62.663-8.964 89.311.966 27.739-20.647 53.319-49.861 53.319H106.342c-29.214 0-50.827-25.58-49.86-53.319.927-26.648-.278-61.166-8.966-89.311C38.802 237.138 24.07 219.293 0 217v-26c24.069-2.293 38.802-20.138 47.516-48.37 8.688-28.145 9.893-62.663 8.965-89.31z"/><path fill="url(#bs-logo-b)" filter="url(#bs-logo-c)" stroke="#fff" d="M267.103 312.457c47.297 0 75.798-23.158 75.798-61.355 0-28.873-20.336-49.776-50.532-53.085v-1.203c22.185-3.609 39.594-24.211 39.594-47.219 0-32.783-25.882-54.138-65.322-54.138h-88.74v217h89.202zm-54.692-189.48h45.911c24.958 0 39.131 11.128 39.131 31.279 0 21.505-16.484 33.535-46.372 33.535h-38.67v-64.814zm0 161.961v-71.431h45.602c32.661 0 49.608 12.03 49.608 35.49 0 23.459-16.484 35.941-47.605 35.941h-47.605z"/></svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
BIN
docs/5.0/assets/brand/bootstrap-social-logo.png
Normal file
BIN
docs/5.0/assets/brand/bootstrap-social-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
docs/5.0/assets/brand/bootstrap-social.png
Normal file
BIN
docs/5.0/assets/brand/bootstrap-social.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
7
docs/5.0/assets/css/docs.css
Normal file
7
docs/5.0/assets/css/docs.css
Normal file
File diff suppressed because one or more lines are too long
BIN
docs/5.0/assets/img/bootstrap-icons.png
Normal file
BIN
docs/5.0/assets/img/bootstrap-icons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
docs/5.0/assets/img/bootstrap-icons@2x.png
Normal file
BIN
docs/5.0/assets/img/bootstrap-icons@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
docs/5.0/assets/img/bootstrap-themes-collage.png
Normal file
BIN
docs/5.0/assets/img/bootstrap-themes-collage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
docs/5.0/assets/img/bootstrap-themes-collage@2x.png
Normal file
BIN
docs/5.0/assets/img/bootstrap-themes-collage@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
BIN
docs/5.0/assets/img/bootstrap-themes.png
Normal file
BIN
docs/5.0/assets/img/bootstrap-themes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
docs/5.0/assets/img/bootstrap-themes@2x.png
Normal file
BIN
docs/5.0/assets/img/bootstrap-themes@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
BIN
docs/5.0/assets/img/examples/album-rtl.png
Normal file
BIN
docs/5.0/assets/img/examples/album-rtl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
docs/5.0/assets/img/examples/album-rtl@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/album-rtl@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
docs/5.0/assets/img/examples/album.png
Normal file
BIN
docs/5.0/assets/img/examples/album.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
docs/5.0/assets/img/examples/album@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/album@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/5.0/assets/img/examples/blog-rtl.png
Normal file
BIN
docs/5.0/assets/img/examples/blog-rtl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/5.0/assets/img/examples/blog-rtl@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/blog-rtl@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
docs/5.0/assets/img/examples/blog.png
Normal file
BIN
docs/5.0/assets/img/examples/blog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
docs/5.0/assets/img/examples/blog@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/blog@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
docs/5.0/assets/img/examples/carousel-rtl.png
Normal file
BIN
docs/5.0/assets/img/examples/carousel-rtl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
docs/5.0/assets/img/examples/carousel-rtl@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/carousel-rtl@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/5.0/assets/img/examples/carousel.png
Normal file
BIN
docs/5.0/assets/img/examples/carousel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
docs/5.0/assets/img/examples/carousel@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/carousel@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
docs/5.0/assets/img/examples/cheatsheet-rtl.png
Normal file
BIN
docs/5.0/assets/img/examples/cheatsheet-rtl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
docs/5.0/assets/img/examples/cheatsheet-rtl@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/cheatsheet-rtl@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/5.0/assets/img/examples/cheatsheet.png
Normal file
BIN
docs/5.0/assets/img/examples/cheatsheet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
docs/5.0/assets/img/examples/cheatsheet@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/cheatsheet@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
docs/5.0/assets/img/examples/checkout-rtl.png
Normal file
BIN
docs/5.0/assets/img/examples/checkout-rtl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
docs/5.0/assets/img/examples/checkout-rtl@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/checkout-rtl@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
docs/5.0/assets/img/examples/checkout.png
Normal file
BIN
docs/5.0/assets/img/examples/checkout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
docs/5.0/assets/img/examples/checkout@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/checkout@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
docs/5.0/assets/img/examples/cover.png
Normal file
BIN
docs/5.0/assets/img/examples/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
docs/5.0/assets/img/examples/cover@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/cover@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/5.0/assets/img/examples/dashboard-rtl.png
Normal file
BIN
docs/5.0/assets/img/examples/dashboard-rtl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
docs/5.0/assets/img/examples/dashboard-rtl@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/dashboard-rtl@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
docs/5.0/assets/img/examples/dashboard.png
Normal file
BIN
docs/5.0/assets/img/examples/dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/5.0/assets/img/examples/dashboard@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/dashboard@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
docs/5.0/assets/img/examples/grid.png
Normal file
BIN
docs/5.0/assets/img/examples/grid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
docs/5.0/assets/img/examples/grid@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/grid@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
docs/5.0/assets/img/examples/jumbotron.png
Normal file
BIN
docs/5.0/assets/img/examples/jumbotron.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
docs/5.0/assets/img/examples/jumbotron@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/jumbotron@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
docs/5.0/assets/img/examples/masonry.png
Normal file
BIN
docs/5.0/assets/img/examples/masonry.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
docs/5.0/assets/img/examples/masonry@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/masonry@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
docs/5.0/assets/img/examples/navbar-bottom.png
Normal file
BIN
docs/5.0/assets/img/examples/navbar-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
docs/5.0/assets/img/examples/navbar-bottom@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/navbar-bottom@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/5.0/assets/img/examples/navbar-fixed.png
Normal file
BIN
docs/5.0/assets/img/examples/navbar-fixed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
docs/5.0/assets/img/examples/navbar-fixed@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/navbar-fixed@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/5.0/assets/img/examples/navbar-static.png
Normal file
BIN
docs/5.0/assets/img/examples/navbar-static.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
docs/5.0/assets/img/examples/navbar-static@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/navbar-static@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
docs/5.0/assets/img/examples/navbars.png
Normal file
BIN
docs/5.0/assets/img/examples/navbars.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
docs/5.0/assets/img/examples/navbars@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/navbars@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
docs/5.0/assets/img/examples/offcanvas.png
Normal file
BIN
docs/5.0/assets/img/examples/offcanvas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
docs/5.0/assets/img/examples/offcanvas@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/offcanvas@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
docs/5.0/assets/img/examples/pricing.png
Normal file
BIN
docs/5.0/assets/img/examples/pricing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/5.0/assets/img/examples/pricing@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/pricing@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
docs/5.0/assets/img/examples/product.png
Normal file
BIN
docs/5.0/assets/img/examples/product.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/5.0/assets/img/examples/product@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/product@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
docs/5.0/assets/img/examples/sign-in.png
Normal file
BIN
docs/5.0/assets/img/examples/sign-in.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
docs/5.0/assets/img/examples/sign-in@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/sign-in@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
docs/5.0/assets/img/examples/starter-template.png
Normal file
BIN
docs/5.0/assets/img/examples/starter-template.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
docs/5.0/assets/img/examples/starter-template@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/starter-template@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/5.0/assets/img/examples/sticky-footer-navbar.png
Normal file
BIN
docs/5.0/assets/img/examples/sticky-footer-navbar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/5.0/assets/img/examples/sticky-footer-navbar@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/sticky-footer-navbar@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
docs/5.0/assets/img/examples/sticky-footer.png
Normal file
BIN
docs/5.0/assets/img/examples/sticky-footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
docs/5.0/assets/img/examples/sticky-footer@2x.png
Normal file
BIN
docs/5.0/assets/img/examples/sticky-footer@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
docs/5.0/assets/img/favicons/android-chrome-192x192.png
Normal file
BIN
docs/5.0/assets/img/favicons/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
docs/5.0/assets/img/favicons/android-chrome-512x512.png
Normal file
BIN
docs/5.0/assets/img/favicons/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
docs/5.0/assets/img/favicons/apple-touch-icon.png
Normal file
BIN
docs/5.0/assets/img/favicons/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
docs/5.0/assets/img/favicons/favicon-16x16.png
Normal file
BIN
docs/5.0/assets/img/favicons/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 529 B |
BIN
docs/5.0/assets/img/favicons/favicon-32x32.png
Normal file
BIN
docs/5.0/assets/img/favicons/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
docs/5.0/assets/img/favicons/favicon.ico
Normal file
BIN
docs/5.0/assets/img/favicons/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
20
docs/5.0/assets/img/favicons/manifest.json
Normal file
20
docs/5.0/assets/img/favicons/manifest.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "Bootstrap",
|
||||||
|
"short_name": "Bootstrap",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "android-chrome-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "android-chrome-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "/?utm_source=a2hs",
|
||||||
|
"theme_color": "#7952b3",
|
||||||
|
"background_color": "#7952b3",
|
||||||
|
"display": "standalone"
|
||||||
|
}
|
||||||
1
docs/5.0/assets/img/favicons/safari-pinned-tab.svg
Normal file
1
docs/5.0/assets/img/favicons/safari-pinned-tab.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="none"><path fill="#000" fill-rule="evenodd" d="M39.878 20c-10.955 0-19.06 9.59-18.698 19.988.349 9.99-.104 22.93-3.361 33.48C14.55 84.052 9.026 90.756 0 91.615v9.719c9.026.86 14.55 7.563 17.819 18.147 3.257 10.551 3.71 23.491 3.361 33.48-.362 10.399 7.743 19.988 18.698 19.988h112.258c10.955 0 19.06-9.589 18.697-19.988-.348-9.989.104-22.929 3.362-33.48 3.268-10.584 8.779-17.287 17.805-18.147v-9.719c-9.026-.86-14.537-7.563-17.805-18.147-3.258-10.55-3.71-23.49-3.362-33.48C171.196 29.589 163.091 20 152.136 20H39.878zm88.665 94.15c0 14.32-10.68 23.002-28.404 23.002H68.713a2 2 0 01-2-2V57.797a2 2 0 012-2h31.253c14.779 0 24.478 8.006 24.478 20.296 0 8.626-6.524 16.35-14.837 17.703v.451c11.315 1.24 18.936 9.078 18.936 19.903zM96.848 66.114H79.644v24.3h14.491c11.2 0 17.377-4.51 17.377-12.573 0-7.555-5.311-11.727-14.664-11.727zm-17.204 33.941v26.78h17.84c11.661 0 17.838-4.68 17.838-13.475s-6.35-13.305-18.59-13.305H79.645z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
60
docs/5.0/assets/js/docs.min.js
vendored
Normal file
60
docs/5.0/assets/js/docs.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
20
docs/5.0/assets/js/validate-forms.js
Normal file
20
docs/5.0/assets/js/validate-forms.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
||||||
|
(function () {
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||||
|
var forms = document.querySelectorAll('.needs-validation')
|
||||||
|
|
||||||
|
// Loop over them and prevent submission
|
||||||
|
Array.prototype.slice.call(forms)
|
||||||
|
.forEach(function (form) {
|
||||||
|
form.addEventListener('submit', function (event) {
|
||||||
|
if (!form.checkValidity()) {
|
||||||
|
event.preventDefault()
|
||||||
|
event.stopPropagation()
|
||||||
|
}
|
||||||
|
|
||||||
|
form.classList.add('was-validated')
|
||||||
|
}, false)
|
||||||
|
})
|
||||||
|
})()
|
||||||
597
docs/5.0/components/accordion/index.html
Normal file
597
docs/5.0/components/accordion/index.html
Normal file
@ -0,0 +1,597 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Accordion · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/accordion/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Accordion">
|
||||||
|
<meta name="twitter:description" content="Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/accordion/">
|
||||||
|
<meta property="og:title" content="Accordion">
|
||||||
|
<meta property="og:description" content="Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded active" aria-current="page">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/accordion.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Accordion</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#how-it-works">How it works</a></li>
|
||||||
|
<li><a href="#example">Example</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#flush">Flush</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#accessibility">Accessibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="how-it-works">How it works</h2>
|
||||||
|
<p>The accordion uses <a href="/docs/5.0/components/collapse/">collapse</a> internally to make it collapsible. To render an accordion that’s expanded, add the <code>.open</code> class on the <code>.accordion</code>.</p>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
The animation effect of this component is dependent on the <code>prefers-reduced-motion</code> media query. See the <a href="/docs/5.0/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="example">Example</h2>
|
||||||
|
<p>Click the accordions below to expand/collapse the accordion content.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="accordion" id="accordionExample">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingOne">
|
||||||
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||||
|
Accordion Item #1
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingTwo">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||||
|
Accordion Item #2
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="headingThree">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||||
|
Accordion Item #3
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion"</span> <span class="na">id</span><span class="o">=</span><span class="s">"accordionExample"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-item"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-header"</span> <span class="na">id</span><span class="o">=</span><span class="s">"headingOne"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-button"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#collapseOne"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"true"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"collapseOne"</span><span class="p">></span>
|
||||||
|
Accordion Item #1
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"collapseOne"</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-collapse collapse show"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"headingOne"</span> <span class="na">data-bs-parent</span><span class="o">=</span><span class="s">"#accordionExample"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-body"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">strong</span><span class="p">></span>This is the first item's accordion body.<span class="p"></</span><span class="nt">strong</span><span class="p">></span> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <span class="p"><</span><span class="nt">code</span><span class="p">></span>.accordion-body<span class="p"></</span><span class="nt">code</span><span class="p">></span>, though the transition does limit overflow.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-item"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-header"</span> <span class="na">id</span><span class="o">=</span><span class="s">"headingTwo"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-button collapsed"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#collapseTwo"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"collapseTwo"</span><span class="p">></span>
|
||||||
|
Accordion Item #2
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"collapseTwo"</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-collapse collapse"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"headingTwo"</span> <span class="na">data-bs-parent</span><span class="o">=</span><span class="s">"#accordionExample"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-body"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">strong</span><span class="p">></span>This is the second item's accordion body.<span class="p"></</span><span class="nt">strong</span><span class="p">></span> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <span class="p"><</span><span class="nt">code</span><span class="p">></span>.accordion-body<span class="p"></</span><span class="nt">code</span><span class="p">></span>, though the transition does limit overflow.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-item"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-header"</span> <span class="na">id</span><span class="o">=</span><span class="s">"headingThree"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-button collapsed"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#collapseThree"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"collapseThree"</span><span class="p">></span>
|
||||||
|
Accordion Item #3
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"collapseThree"</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-collapse collapse"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"headingThree"</span> <span class="na">data-bs-parent</span><span class="o">=</span><span class="s">"#accordionExample"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-body"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">strong</span><span class="p">></span>This is the third item's accordion body.<span class="p"></</span><span class="nt">strong</span><span class="p">></span> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <span class="p"><</span><span class="nt">code</span><span class="p">></span>.accordion-body<span class="p"></</span><span class="nt">code</span><span class="p">></span>, though the transition does limit overflow.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="flush">Flush</h3>
|
||||||
|
<p>Add <code>.accordion-flush</code> to remove the default <code>background-color</code>, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>
|
||||||
|
<div class="bd-example bg-light">
|
||||||
|
<div class="accordion accordion-flush" id="accordionFlushExample">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="flush-headingOne">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
|
||||||
|
Accordion Item #1
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
|
||||||
|
<div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="flush-headingTwo">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
|
||||||
|
Accordion Item #2
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
|
||||||
|
<div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="flush-headingThree">
|
||||||
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
|
||||||
|
Accordion Item #3
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
|
||||||
|
<div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion accordion-flush"</span> <span class="na">id</span><span class="o">=</span><span class="s">"accordionFlushExample"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-item"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-header"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flush-headingOne"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-button collapsed"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#flush-collapseOne"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"flush-collapseOne"</span><span class="p">></span>
|
||||||
|
Accordion Item #1
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"flush-collapseOne"</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-collapse collapse"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"flush-headingOne"</span> <span class="na">data-bs-parent</span><span class="o">=</span><span class="s">"#accordionFlushExample"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-body"</span><span class="p">></span>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-item"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-header"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flush-headingTwo"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-button collapsed"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#flush-collapseTwo"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"flush-collapseTwo"</span><span class="p">></span>
|
||||||
|
Accordion Item #2
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"flush-collapseTwo"</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-collapse collapse"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"flush-headingTwo"</span> <span class="na">data-bs-parent</span><span class="o">=</span><span class="s">"#accordionFlushExample"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-body"</span><span class="p">></span>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-item"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-header"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flush-headingThree"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-button collapsed"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#flush-collapseThree"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"flush-collapseThree"</span><span class="p">></span>
|
||||||
|
Accordion Item #3
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"flush-collapseThree"</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-collapse collapse"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"flush-headingThree"</span> <span class="na">data-bs-parent</span><span class="o">=</span><span class="s">"#accordionFlushExample"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"accordion-body"</span><span class="p">></span>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="accessibility">Accessibility</h2>
|
||||||
|
<p>Please read the <a href="/docs/5.0/components/collapse/#accessibility">collapse accessibility section</a> for more information.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
678
docs/5.0/components/alerts/index.html
Normal file
678
docs/5.0/components/alerts/index.html
Normal file
@ -0,0 +1,678 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Alerts · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/alerts/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Alerts">
|
||||||
|
<meta name="twitter:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/alerts/">
|
||||||
|
<meta property="og:title" content="Alerts">
|
||||||
|
<meta property="og:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded active" aria-current="page">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/alerts.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Alerts</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#examples">Examples</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#link-color">Link color</a></li>
|
||||||
|
<li><a href="#additional-content">Additional content</a></li>
|
||||||
|
<li><a href="#dismissing">Dismissing</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#javascript-behavior">JavaScript behavior</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#triggers">Triggers</a></li>
|
||||||
|
<li><a href="#methods">Methods</a></li>
|
||||||
|
<li><a href="#events">Events</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="examples">Examples</h2>
|
||||||
|
<p>Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code>.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts JavaScript plugin</a>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
|
||||||
|
<div class="alert alert-primary" role="alert">
|
||||||
|
A simple primary alert—check it out!
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-secondary" role="alert">
|
||||||
|
A simple secondary alert—check it out!
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-success" role="alert">
|
||||||
|
A simple success alert—check it out!
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-danger" role="alert">
|
||||||
|
A simple danger alert—check it out!
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-warning" role="alert">
|
||||||
|
A simple warning alert—check it out!
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info" role="alert">
|
||||||
|
A simple info alert—check it out!
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-light" role="alert">
|
||||||
|
A simple light alert—check it out!
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-dark" role="alert">
|
||||||
|
A simple dark alert—check it out!
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-primary"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple primary alert—check it out!
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-secondary"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple secondary alert—check it out!
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-success"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple success alert—check it out!
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-danger"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple danger alert—check it out!
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-warning"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple warning alert—check it out!
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-info"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple info alert—check it out!
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-light"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple light alert—check it out!
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-dark"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple dark alert—check it out!
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</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="link-color">Link color</h3>
|
||||||
|
<p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
|
||||||
|
<div class="alert alert-primary" role="alert">
|
||||||
|
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-secondary" role="alert">
|
||||||
|
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-success" role="alert">
|
||||||
|
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-danger" role="alert">
|
||||||
|
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-warning" role="alert">
|
||||||
|
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info" role="alert">
|
||||||
|
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-light" role="alert">
|
||||||
|
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-dark" role="alert">
|
||||||
|
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-primary"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple primary alert with <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">"alert-link"</span><span class="p">></span>an example link<span class="p"></</span><span class="nt">a</span><span class="p">></span>. Give it a click if you like.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-secondary"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple secondary alert with <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">"alert-link"</span><span class="p">></span>an example link<span class="p"></</span><span class="nt">a</span><span class="p">></span>. Give it a click if you like.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-success"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple success alert with <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">"alert-link"</span><span class="p">></span>an example link<span class="p"></</span><span class="nt">a</span><span class="p">></span>. Give it a click if you like.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-danger"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple danger alert with <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">"alert-link"</span><span class="p">></span>an example link<span class="p"></</span><span class="nt">a</span><span class="p">></span>. Give it a click if you like.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-warning"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple warning alert with <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">"alert-link"</span><span class="p">></span>an example link<span class="p"></</span><span class="nt">a</span><span class="p">></span>. Give it a click if you like.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-info"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple info alert with <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">"alert-link"</span><span class="p">></span>an example link<span class="p"></</span><span class="nt">a</span><span class="p">></span>. Give it a click if you like.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-light"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple light alert with <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">"alert-link"</span><span class="p">></span>an example link<span class="p"></</span><span class="nt">a</span><span class="p">></span>. Give it a click if you like.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-dark"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
A simple dark alert with <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">"alert-link"</span><span class="p">></span>an example link<span class="p"></</span><span class="nt">a</span><span class="p">></span>. Give it a click if you like.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="additional-content">Additional content</h3>
|
||||||
|
<p>Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="alert alert-success" role="alert">
|
||||||
|
<h4 class="alert-heading">Well done!</h4>
|
||||||
|
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||||
|
<hr>
|
||||||
|
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-success"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h4</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert-heading"</span><span class="p">></span>Well done!<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span><span class="p">></span>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">hr</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="dismissing">Dismissing</h3>
|
||||||
|
<p>Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.</li>
|
||||||
|
<li>Add a <a href="/docs/5.0/components/close-button/">close button</a> and the <code>.alert-dismissible</code> class, which adds extra padding to the right of the alert and positions the close button.</li>
|
||||||
|
<li>On the close button, add the <code>data-bs-dismiss="alert"</code> attribute, which triggers the JavaScript functionality. Be sure to use the <code><button></code> element with it for proper behavior across all devices.</li>
|
||||||
|
<li>To animate alerts when dismissing them, be sure to add the <code>.fade</code> and <code>.show</code> classes.</li>
|
||||||
|
</ul>
|
||||||
|
<p>You can see this in action with a live demo:</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||||
|
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-warning alert-dismissible fade show"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">strong</span><span class="p">></span>Holy guacamole!<span class="p"></</span><span class="nt">strong</span><span class="p">></span> You should check in on some of those fields below.
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-callout bd-callout-warning">
|
||||||
|
When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the <code>closed.bs.alert</code> event and programmatically sets <code>focus()</code> to the most appropriate location in the page. If you’re planning to move focus to a non-interactive element that normally does not receive focus, make sure to add <code>tabindex="-1"</code> to the element.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="javascript-behavior">JavaScript behavior</h2>
|
||||||
|
<h3 id="triggers">Triggers</h3>
|
||||||
|
<p>Enable dismissal of an alert via JavaScript:</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">alertList</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.alert'</span><span class="p">)</span>
|
||||||
|
<span class="nx">alertList</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">alert</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Alert</span><span class="p">(</span><span class="nx">alert</span><span class="p">)</span>
|
||||||
|
<span class="p">})</span>
|
||||||
|
</code></pre></div><p>Or with <code>data</code> attributes on a button <strong>within the alert</strong>, as demonstrated above:</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">"alert"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
</code></pre></div><p>Note that closing an alert will remove it from the DOM.</p>
|
||||||
|
<h3 id="methods">Methods</h3>
|
||||||
|
<p>You can create an alert instance with the alert constructor, for example:</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myAlert</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myAlert'</span><span class="p">)</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">bsAlert</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Alert</span><span class="p">(</span><span class="nx">myAlert</span><span class="p">)</span>
|
||||||
|
</code></pre></div><p>This makes an alert listen for click events on descendant elements which have the <code>data-bs-dismiss="alert"</code> attribute. (Not necessary when using the data-api’s auto-initialization.)</p>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Method</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>close</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Closes an alert by removing it from the DOM. If the <code>.fade</code> and <code>.show</code> classes are present on the element, the alert will fade out before it is removed.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>dispose</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Destroys an element's alert. (Removes stored data on the DOM element)
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>getInstance</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: <code>bootstrap.Alert.getInstance(alert)</code>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">alertNode</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.alert'</span><span class="p">)</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">alert</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Alert</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">alertNode</span><span class="p">)</span>
|
||||||
|
<span class="nx">alert</span><span class="p">.</span><span class="nx">close</span><span class="p">()</span>
|
||||||
|
</code></pre></div><h3 id="events">Events</h3>
|
||||||
|
<p>Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.</p>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Event</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>close.bs.alert</code></td>
|
||||||
|
<td>
|
||||||
|
Fires immediately when the <code>close</code> instance method is called.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>closed.bs.alert</code></td>
|
||||||
|
<td>
|
||||||
|
Fired when the alert has been closed and CSS transitions have completed.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myAlert</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myAlert'</span><span class="p">)</span>
|
||||||
|
<span class="nx">myAlert</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'closed.bs.alert'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||||
|
<span class="c1">// do something, for instance, explicitly move focus to the most appropriate element,
|
||||||
|
</span><span class="c1"></span> <span class="c1">// so it doesn't get lost/reset to the start of the page
|
||||||
|
</span><span class="c1"></span> <span class="c1">// document.getElementById('...').focus()
|
||||||
|
</span><span class="c1"></span><span class="p">})</span>
|
||||||
|
</code></pre></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
518
docs/5.0/components/badge/index.html
Normal file
518
docs/5.0/components/badge/index.html
Normal file
@ -0,0 +1,518 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Badges · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/badge/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Badges">
|
||||||
|
<meta name="twitter:description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/badge/">
|
||||||
|
<meta property="og:title" content="Badges">
|
||||||
|
<meta property="og:description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded active" aria-current="page">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/badge.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Badges</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#example">Example</a></li>
|
||||||
|
<li><a href="#background-colors">Background colors</a></li>
|
||||||
|
<li><a href="#pill-badges">Pill badges</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="example">Example</h2>
|
||||||
|
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units. As of v5, badges no longer have focus or hover styles for links.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
|
||||||
|
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
|
||||||
|
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
|
||||||
|
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
|
||||||
|
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
|
||||||
|
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Example heading <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>New<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">h1</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>Example heading <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>New<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">h2</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h3</span><span class="p">></span>Example heading <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>New<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">h3</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h4</span><span class="p">></span>Example heading <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>New<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">h4</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h5</span><span class="p">></span>Example heading <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>New<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">h5</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h6</span><span class="p">></span>Example heading <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>New<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">h6</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>Badges can be used as part of links or buttons to provide a counter.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<button type="button" class="btn btn-primary">
|
||||||
|
Notifications <span class="badge bg-secondary">4</span>
|
||||||
|
</button>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>
|
||||||
|
Notifications <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>4<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p>
|
||||||
|
<p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<button type="button" class="btn btn-primary">
|
||||||
|
Profile <span class="badge bg-secondary">9</span>
|
||||||
|
<span class="visually-hidden">unread messages</span>
|
||||||
|
</button>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>
|
||||||
|
Profile <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>9<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>unread messages<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="background-colors">Background colors</h2>
|
||||||
|
<p>Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap’s default <code>.bg-light</code>, you’ll likely need a text color utility like <code>.text-dark</code> for proper styling. This is because background utilities do not set anything but <code>background-color</code>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
|
||||||
|
<span class="badge bg-primary">Primary</span>
|
||||||
|
<span class="badge bg-secondary">Secondary</span>
|
||||||
|
<span class="badge bg-success">Success</span>
|
||||||
|
<span class="badge bg-danger">Danger</span>
|
||||||
|
<span class="badge bg-warning text-dark">Warning</span>
|
||||||
|
<span class="badge bg-info text-dark">Info</span>
|
||||||
|
<span class="badge bg-light text-dark">Light</span>
|
||||||
|
<span class="badge bg-dark">Dark</span>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-primary"</span><span class="p">></span>Primary<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-secondary"</span><span class="p">></span>Secondary<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-success"</span><span class="p">></span>Success<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-danger"</span><span class="p">></span>Danger<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-warning text-dark"</span><span class="p">></span>Warning<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-info text-dark"</span><span class="p">></span>Info<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-light text-dark"</span><span class="p">></span>Light<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-dark"</span><span class="p">></span>Dark<span class="p"></</span><span class="nt">span</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</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>
|
||||||
|
|
||||||
|
<h2 id="pill-badges">Pill badges</h2>
|
||||||
|
<p>Use the <code>.rounded-pill</code> utility class to make badges more rounded with a larger <code>border-radius</code>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
|
||||||
|
<span class="badge rounded-pill bg-primary">Primary</span>
|
||||||
|
<span class="badge rounded-pill bg-secondary">Secondary</span>
|
||||||
|
<span class="badge rounded-pill bg-success">Success</span>
|
||||||
|
<span class="badge rounded-pill bg-danger">Danger</span>
|
||||||
|
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
|
||||||
|
<span class="badge rounded-pill bg-info text-dark">Info</span>
|
||||||
|
<span class="badge rounded-pill bg-light text-dark">Light</span>
|
||||||
|
<span class="badge rounded-pill bg-dark">Dark</span>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge rounded-pill bg-primary"</span><span class="p">></span>Primary<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge rounded-pill bg-secondary"</span><span class="p">></span>Secondary<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge rounded-pill bg-success"</span><span class="p">></span>Success<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge rounded-pill bg-danger"</span><span class="p">></span>Danger<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge rounded-pill bg-warning text-dark"</span><span class="p">></span>Warning<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge rounded-pill bg-info text-dark"</span><span class="p">></span>Info<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge rounded-pill bg-light text-dark"</span><span class="p">></span>Light<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge rounded-pill bg-dark"</span><span class="p">></span>Dark<span class="p"></</span><span class="nt">span</span><span class="p">></span></code></pre></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
532
docs/5.0/components/breadcrumb/index.html
Normal file
532
docs/5.0/components/breadcrumb/index.html
Normal file
@ -0,0 +1,532 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Breadcrumb · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/breadcrumb/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Breadcrumb">
|
||||||
|
<meta name="twitter:description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/breadcrumb/">
|
||||||
|
<meta property="og:title" content="Breadcrumb">
|
||||||
|
<meta property="og:description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded active" aria-current="page">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/breadcrumb.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Breadcrumb</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#example">Example</a></li>
|
||||||
|
<li><a href="#dividers">Dividers</a></li>
|
||||||
|
<li><a href="#accessibility">Accessibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="example">Example</h2>
|
||||||
|
<p>Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<nav aria-label="breadcrumb">
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item active" aria-current="page">Home</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav aria-label="breadcrumb">
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||||
|
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav aria-label="breadcrumb">
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||||
|
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||||
|
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"breadcrumb"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ol</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">nav</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">nav</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"breadcrumb"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item"</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span><span class="p">></span>Library<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ol</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">nav</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">nav</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"breadcrumb"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item"</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item"</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Library<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span><span class="p">></span>Data<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ol</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="dividers">Dividers</h2>
|
||||||
|
<p>Dividers are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code>content</code></a>. They can be changed by modifying a local CSS custom property <code>--bs-breadcrumb-divider</code>, or through the <code>$breadcrumb-divider</code> Sass variable — and <code>$breadcrumb-divider-flipped</code> for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||||
|
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">style</span><span class="o">=</span><span class="s">"--bs-breadcrumb-divider: '>';"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"breadcrumb"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item"</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span><span class="p">></span>Library<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ol</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>When modifying via Sass, the <a href="https://sass-lang.com/documentation/modules/string#quote">quote</a> function is required to generate the quotes around a string. For example, using <code>></code> as the divider, you can use this:</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$breadcrumb-divider</span><span class="o">:</span> <span class="nf">quote</span><span class="p">(</span><span class="s2">">"</span><span class="p">);</span>
|
||||||
|
</code></pre></div><p>It’s also possible to use an <strong>embedded SVG icon</strong>. Apply it via our CSS custom property, or use the Sass variable.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" aria-label="breadcrumb">
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||||
|
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">style</span><span class="o">=</span><span class="s">"--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"breadcrumb"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item"</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span><span class="p">></span>Library<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ol</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$breadcrumb-divider</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E")</span><span class="p">;</span>
|
||||||
|
</code></pre></div><p>You can also remove the divider setting <code>--bs-breadcrumb-divider: '';</code> (empty strings in CSS custom properties counts as a value), or setting the Sass variable to <code>$breadcrumb-divider: none;</code>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||||
|
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">style</span><span class="o">=</span><span class="s">"--bs-breadcrumb-divider: '';"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"breadcrumb"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item"</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span><span class="p">></span>Library<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ol</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$breadcrumb-divider</span><span class="o">:</span> <span class="no">none</span><span class="p">;</span>
|
||||||
|
</code></pre></div><h2 id="accessibility">Accessibility</h2>
|
||||||
|
<p>Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as <code>aria-label="breadcrumb"</code> to describe the type of navigation provided in the <code><nav></code> element, as well as applying an <code>aria-current="page"</code> to the last item of the set to indicate that it represents the current page.</p>
|
||||||
|
<p>For more information, see the <a href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb">WAI-ARIA Authoring Practices for the breadcrumb pattern</a>.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
755
docs/5.0/components/button-group/index.html
Normal file
755
docs/5.0/components/button-group/index.html
Normal file
@ -0,0 +1,755 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Group a series of buttons together on a single line or stack them in a vertical column.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Button group · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/button-group/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Button group">
|
||||||
|
<meta name="twitter:description" content="Group a series of buttons together on a single line or stack them in a vertical column.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/button-group/">
|
||||||
|
<meta property="og:title" content="Button group">
|
||||||
|
<meta property="og:description" content="Group a series of buttons together on a single line or stack them in a vertical column.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded active" aria-current="page">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/button-group.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Button group</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">Group a series of buttons together on a single line or stack them in a vertical column.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#basic-example">Basic example</a></li>
|
||||||
|
<li><a href="#mixed-styles">Mixed styles</a></li>
|
||||||
|
<li><a href="#outlined-styles">Outlined styles</a></li>
|
||||||
|
<li><a href="#checkbox-and-radio-button-groups">Checkbox and radio button groups</a></li>
|
||||||
|
<li><a href="#button-toolbar">Button toolbar</a></li>
|
||||||
|
<li><a href="#sizing">Sizing</a></li>
|
||||||
|
<li><a href="#nesting">Nesting</a></li>
|
||||||
|
<li><a href="#vertical-variation">Vertical variation</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="basic-example">Basic example</h2>
|
||||||
|
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group" role="group" aria-label="Basic example">
|
||||||
|
<button type="button" class="btn btn-primary">Left</button>
|
||||||
|
<button type="button" class="btn btn-primary">Middle</button>
|
||||||
|
<button type="button" class="btn btn-primary">Right</button>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Basic example"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Left<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Middle<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Right<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-callout bd-callout-warning">
|
||||||
|
<h5 id="ensure-correct-role-and-provide-a-label">Ensure correct <code>role</code> and provide a label</h5>
|
||||||
|
<p>In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
|
||||||
|
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>These classes can also be added to groups of links, as an alternative to the <a href="/docs/5.0/components/navs-tabs/"><code>.nav</code> navigation components</a>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group">
|
||||||
|
<a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
|
||||||
|
<a href="#" class="btn btn-primary">Link</a>
|
||||||
|
<a href="#" class="btn btn-primary">Link</a>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||||
|
<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 active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span><span class="p">></span>Active link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="mixed-styles">Mixed styles</h2>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
|
||||||
|
<button type="button" class="btn btn-danger">Left</button>
|
||||||
|
<button type="button" class="btn btn-warning">Middle</button>
|
||||||
|
<button type="button" class="btn btn-success">Right</button>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Basic mixed styles example"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-danger"</span><span class="p">></span>Left<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-warning"</span><span class="p">></span>Middle<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-success"</span><span class="p">></span>Right<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="outlined-styles">Outlined styles</h2>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group" role="group" aria-label="Basic outlined example">
|
||||||
|
<button type="button" class="btn btn-outline-primary">Left</button>
|
||||||
|
<button type="button" class="btn btn-outline-primary">Middle</button>
|
||||||
|
<button type="button" class="btn btn-outline-primary">Right</button>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Basic outlined example"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-primary"</span><span class="p">></span>Left<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-primary"</span><span class="p">></span>Middle<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-primary"</span><span class="p">></span>Right<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="checkbox-and-radio-button-groups">Checkbox and radio button groups</h2>
|
||||||
|
<p>Combine button-like checkbox and radio <a href="/docs/5.0/forms/checks-radios/">toggle buttons</a> into a seamless looking button group.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
|
||||||
|
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
|
||||||
|
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
|
||||||
|
|
||||||
|
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
|
||||||
|
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
|
||||||
|
|
||||||
|
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
|
||||||
|
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Basic checkbox toggle button group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-check"</span> <span class="na">id</span><span class="o">=</span><span class="s">"btncheck1"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"off"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-primary"</span> <span class="na">for</span><span class="o">=</span><span class="s">"btncheck1"</span><span class="p">></span>Checkbox 1<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-check"</span> <span class="na">id</span><span class="o">=</span><span class="s">"btncheck2"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"off"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-primary"</span> <span class="na">for</span><span class="o">=</span><span class="s">"btncheck2"</span><span class="p">></span>Checkbox 2<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-check"</span> <span class="na">id</span><span class="o">=</span><span class="s">"btncheck3"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"off"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-primary"</span> <span class="na">for</span><span class="o">=</span><span class="s">"btncheck3"</span><span class="p">></span>Checkbox 3<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
||||||
|
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
|
||||||
|
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
|
||||||
|
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
|
||||||
|
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Basic radio toggle button group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-check"</span> <span class="na">name</span><span class="o">=</span><span class="s">"btnradio"</span> <span class="na">id</span><span class="o">=</span><span class="s">"btnradio1"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"off"</span> <span class="na">checked</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-primary"</span> <span class="na">for</span><span class="o">=</span><span class="s">"btnradio1"</span><span class="p">></span>Radio 1<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-check"</span> <span class="na">name</span><span class="o">=</span><span class="s">"btnradio"</span> <span class="na">id</span><span class="o">=</span><span class="s">"btnradio2"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"off"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-primary"</span> <span class="na">for</span><span class="o">=</span><span class="s">"btnradio2"</span><span class="p">></span>Radio 2<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-check"</span> <span class="na">name</span><span class="o">=</span><span class="s">"btnradio"</span> <span class="na">id</span><span class="o">=</span><span class="s">"btnradio3"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"off"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-primary"</span> <span class="na">for</span><span class="o">=</span><span class="s">"btnradio3"</span><span class="p">></span>Radio 3<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="button-toolbar">Button toolbar</h2>
|
||||||
|
<p>Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||||
|
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||||
|
<button type="button" class="btn btn-primary">1</button>
|
||||||
|
<button type="button" class="btn btn-primary">2</button>
|
||||||
|
<button type="button" class="btn btn-primary">3</button>
|
||||||
|
<button type="button" class="btn btn-primary">4</button>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group me-2" role="group" aria-label="Second group">
|
||||||
|
<button type="button" class="btn btn-secondary">5</button>
|
||||||
|
<button type="button" class="btn btn-secondary">6</button>
|
||||||
|
<button type="button" class="btn btn-secondary">7</button>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group" role="group" aria-label="Third group">
|
||||||
|
<button type="button" class="btn btn-info">8</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-toolbar"</span> <span class="na">role</span><span class="o">=</span><span class="s">"toolbar"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Toolbar with button groups"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group me-2"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"First group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>1<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>2<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>3<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>4<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group me-2"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Second group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>5<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>6<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>7<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Third group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-info"</span><span class="p">></span>8<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
|
||||||
|
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||||
|
<button type="button" class="btn btn-outline-secondary">1</button>
|
||||||
|
<button type="button" class="btn btn-outline-secondary">2</button>
|
||||||
|
<button type="button" class="btn btn-outline-secondary">3</button>
|
||||||
|
<button type="button" class="btn btn-outline-secondary">4</button>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-text" id="btnGroupAddon">@</div>
|
||||||
|
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
|
||||||
|
<div class="btn-group" role="group" aria-label="First group">
|
||||||
|
<button type="button" class="btn btn-outline-secondary">1</button>
|
||||||
|
<button type="button" class="btn btn-outline-secondary">2</button>
|
||||||
|
<button type="button" class="btn btn-outline-secondary">3</button>
|
||||||
|
<button type="button" class="btn btn-outline-secondary">4</button>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-text" id="btnGroupAddon2">@</div>
|
||||||
|
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-toolbar mb-3"</span> <span class="na">role</span><span class="o">=</span><span class="s">"toolbar"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Toolbar with button groups"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group me-2"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"First group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-secondary"</span><span class="p">></span>1<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-secondary"</span><span class="p">></span>2<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-secondary"</span><span class="p">></span>3<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-secondary"</span><span class="p">></span>4<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"input-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"input-group-text"</span> <span class="na">id</span><span class="o">=</span><span class="s">"btnGroupAddon"</span><span class="p">></span>@<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Input group example"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Input group example"</span> <span class="na">aria-describedby</span><span class="o">=</span><span class="s">"btnGroupAddon"</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-toolbar justify-content-between"</span> <span class="na">role</span><span class="o">=</span><span class="s">"toolbar"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Toolbar with button groups"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"First group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-secondary"</span><span class="p">></span>1<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-secondary"</span><span class="p">></span>2<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-secondary"</span><span class="p">></span>3<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-secondary"</span><span class="p">></span>4<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"input-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"input-group-text"</span> <span class="na">id</span><span class="o">=</span><span class="s">"btnGroupAddon2"</span><span class="p">></span>@<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Input group example"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Input group example"</span> <span class="na">aria-describedby</span><span class="o">=</span><span class="s">"btnGroupAddon2"</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="sizing">Sizing</h2>
|
||||||
|
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including each one when nesting multiple groups.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
|
||||||
|
<button type="button" class="btn btn-outline-dark">Left</button>
|
||||||
|
<button type="button" class="btn btn-outline-dark">Middle</button>
|
||||||
|
<button type="button" class="btn btn-outline-dark">Right</button>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="btn-group" role="group" aria-label="Default button group">
|
||||||
|
<button type="button" class="btn btn-outline-dark">Left</button>
|
||||||
|
<button type="button" class="btn btn-outline-dark">Middle</button>
|
||||||
|
<button type="button" class="btn btn-outline-dark">Right</button>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
|
||||||
|
<button type="button" class="btn btn-outline-dark">Left</button>
|
||||||
|
<button type="button" class="btn btn-outline-dark">Middle</button>
|
||||||
|
<button type="button" class="btn btn-outline-dark">Right</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group btn-group-lg"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group btn-group-sm"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div><h2 id="nesting">Nesting</h2>
|
||||||
|
<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||||
|
<button type="button" class="btn btn-primary">1</button>
|
||||||
|
<button type="button" class="btn btn-primary">2</button>
|
||||||
|
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||||
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Button group with nested dropdown"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>1<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>2<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">"btnGroupDrop1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary dropdown-toggle"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Dropdown
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"btnGroupDrop1"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Dropdown link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Dropdown link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="vertical-variation">Vertical variation</h2>
|
||||||
|
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong>Split button dropdowns are not supported here.</strong></p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||||
|
<button type="button" class="btn btn-dark">Button</button>
|
||||||
|
<button type="button" class="btn btn-dark">Button</button>
|
||||||
|
<button type="button" class="btn btn-dark">Button</button>
|
||||||
|
<button type="button" class="btn btn-dark">Button</button>
|
||||||
|
<button type="button" class="btn btn-dark">Button</button>
|
||||||
|
<button type="button" class="btn btn-dark">Button</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||||
|
<button type="button" class="btn btn-primary">Button</button>
|
||||||
|
<button type="button" class="btn btn-primary">Button</button>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||||
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary">Button</button>
|
||||||
|
<button type="button" class="btn btn-primary">Button</button>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
|
||||||
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||||
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||||
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
|
||||||
|
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
|
||||||
|
<label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
|
||||||
|
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
|
||||||
|
<label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
|
||||||
|
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
|
||||||
|
<label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group-vertical"</span><span class="p">></span>
|
||||||
|
...
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
652
docs/5.0/components/buttons/index.html
Normal file
652
docs/5.0/components/buttons/index.html
Normal file
@ -0,0 +1,652 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Buttons · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/buttons/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Buttons">
|
||||||
|
<meta name="twitter:description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/buttons/">
|
||||||
|
<meta property="og:title" content="Buttons">
|
||||||
|
<meta property="og:description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded active" aria-current="page">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/buttons.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Buttons</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#examples">Examples</a></li>
|
||||||
|
<li><a href="#disable-text-wrapping">Disable text wrapping</a></li>
|
||||||
|
<li><a href="#button-tags">Button tags</a></li>
|
||||||
|
<li><a href="#outline-buttons">Outline buttons</a></li>
|
||||||
|
<li><a href="#sizes">Sizes</a></li>
|
||||||
|
<li><a href="#disabled-state">Disabled state</a></li>
|
||||||
|
<li><a href="#block-buttons">Block buttons</a></li>
|
||||||
|
<li><a href="#button-plugin">Button plugin</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#toggle-states">Toggle states</a></li>
|
||||||
|
<li><a href="#methods">Methods</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="examples">Examples</h2>
|
||||||
|
<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-primary">Primary</button>
|
||||||
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||||
|
<button type="button" class="btn btn-success">Success</button>
|
||||||
|
<button type="button" class="btn btn-danger">Danger</button>
|
||||||
|
<button type="button" class="btn btn-warning">Warning</button>
|
||||||
|
<button type="button" class="btn btn-info">Info</button>
|
||||||
|
<button type="button" class="btn btn-light">Light</button>
|
||||||
|
<button type="button" class="btn btn-dark">Dark</button>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-link">Link</button>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Primary<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>Secondary<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-success"</span><span class="p">></span>Success<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-danger"</span><span class="p">></span>Danger<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-warning"</span><span class="p">></span>Warning<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-info"</span><span class="p">></span>Info<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-light"</span><span class="p">></span>Light<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-dark"</span><span class="p">></span>Dark<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-link"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</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>
|
||||||
|
|
||||||
|
<h2 id="disable-text-wrapping">Disable text wrapping</h2>
|
||||||
|
<p>If you don’t want the button text to wrap, you can add the <code>.text-nowrap</code> class to the button. In Sass, you can set <code>$btn-white-space: nowrap</code> to disable text wrapping for each button.</p>
|
||||||
|
<h2 id="button-tags">Button tags</h2>
|
||||||
|
<p>The <code>.btn</code> classes are designed to be used with the <code><button></code> element. However, you can also use these classes on <code><a></code> or <code><input></code> elements (though some browsers may apply a slightly different rendering).</p>
|
||||||
|
<p>When using button classes on <code><a></code> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a <code>role="button"</code> to appropriately convey their purpose to assistive technologies such as screen readers.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<a class="btn btn-primary" href="#" role="button">Link</a>
|
||||||
|
<button class="btn btn-primary" type="submit">Button</button>
|
||||||
|
<input class="btn btn-primary" type="button" value="Input">
|
||||||
|
<input class="btn btn-primary" type="submit" value="Submit">
|
||||||
|
<input class="btn btn-primary" type="reset" value="Reset">
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Input"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Submit"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"reset"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Reset"</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="outline-buttons">Outline buttons</h2>
|
||||||
|
<p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code>.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||||
|
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||||||
|
<button type="button" class="btn btn-outline-success">Success</button>
|
||||||
|
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||||||
|
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||||
|
<button type="button" class="btn btn-outline-info">Info</button>
|
||||||
|
<button type="button" class="btn btn-outline-light">Light</button>
|
||||||
|
<button type="button" class="btn btn-outline-dark">Dark</button>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-primary"</span><span class="p">></span>Primary<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-secondary"</span><span class="p">></span>Secondary<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-success"</span><span class="p">></span>Success<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-danger"</span><span class="p">></span>Danger<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-warning"</span><span class="p">></span>Warning<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-info"</span><span class="p">></span>Info<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-light"</span><span class="p">></span>Light<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-dark"</span><span class="p">></span>Dark<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="sizes">Sizes</h2>
|
||||||
|
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||||
|
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary btn-lg"</span><span class="p">></span>Large button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-lg"</span><span class="p">></span>Large button<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-example">
|
||||||
|
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||||
|
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary btn-sm"</span><span class="p">></span>Small button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="p">></span>Small button<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="disabled-state">Disabled state</h2>
|
||||||
|
<p>Make buttons look inactive by adding the <code>disabled</code> boolean attribute to any <code><button></code> element. Disabled buttons have <code>pointer-events: none</code> applied to, preventing hover and active states from triggering.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
|
||||||
|
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-lg btn-primary"</span> <span class="na">disabled</span><span class="p">></span>Primary button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-lg"</span> <span class="na">disabled</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>Disabled buttons using the <code><a></code> element behave a bit different:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code><a></code>s don’t support the <code>disabled</code> attribute, so you must add the <code>.disabled</code> class to make it visually appear disabled.</li>
|
||||||
|
<li>Some future-friendly styles are included to disable all <code>pointer-events</code> on anchor buttons.</li>
|
||||||
|
<li>Disabled buttons should include the <code>aria-disabled="true"</code> attribute to indicate the state of the element to assistive technologies.</li>
|
||||||
|
</ul>
|
||||||
|
<div class="bd-example">
|
||||||
|
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
|
||||||
|
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 btn-lg disabled"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Primary link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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-secondary btn-lg disabled"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-callout bd-callout-warning">
|
||||||
|
<h5 id="link-functionality-caveat">Link functionality caveat</h5>
|
||||||
|
<p>The <code>.disabled</code> class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, but that CSS property is not yet standardized. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to <code>aria-disabled="true"</code>, also include a <code>tabindex="-1"</code> attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="block-buttons">Block buttons</h2>
|
||||||
|
<p>Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="d-grid gap-2">
|
||||||
|
<button class="btn btn-primary" type="button">Button</button>
|
||||||
|
<button class="btn btn-primary" type="button">Button</button>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-grid gap-2"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>Here we create a responsive variation, starting with vertically stacked buttons until the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the <code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize your browser to see them change.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="d-grid gap-2 d-md-block">
|
||||||
|
<button class="btn btn-primary" type="button">Button</button>
|
||||||
|
<button class="btn btn-primary" type="button">Button</button>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-grid gap-2 d-md-block"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use <code>.col-6</code>. Center it horizontally with <code>.mx-auto</code>, too.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="d-grid gap-2 col-6 mx-auto">
|
||||||
|
<button class="btn btn-primary" type="button">Button</button>
|
||||||
|
<button class="btn btn-primary" type="button">Button</button>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-grid gap-2 col-6 mx-auto"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they’re no longer stacked.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||||
|
<button class="btn btn-primary me-md-2" type="button">Button</button>
|
||||||
|
<button class="btn btn-primary" type="button">Button</button>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-grid gap-2 d-md-flex justify-content-md-end"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary me-md-2"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="button-plugin">Button plugin</h2>
|
||||||
|
<p>The button plugin allows you to create simple on/off toggle buttons.</p>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
Visually, these toggle buttons are identical to the <a href="/docs/5.0/forms/checks-radios/#checkbox-toggle-buttons">checkbox toggle buttons</a>. However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 id="toggle-states">Toggle states</h3>
|
||||||
|
<p>Add <code>data-bs-toggle="button"</code> to toggle a button’s <code>active</code> state. If you’re pre-toggling a button, you must manually add the <code>.active</code> class <strong>and</strong> <code>aria-pressed="true"</code> to ensure that it is conveyed appropriately to assistive technologies.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
|
||||||
|
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
|
||||||
|
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"button"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"off"</span><span class="p">></span>Toggle button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary active"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"button"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"off"</span> <span class="na">aria-pressed</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Active toggle button<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">disabled</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"button"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"off"</span><span class="p">></span>Disabled toggle button<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-example">
|
||||||
|
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
|
||||||
|
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
|
||||||
|
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Toggle link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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 active"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-pressed</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Active toggle link<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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 disabled"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Disabled toggle link<span class="p"></</span><span class="nt">a</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="methods">Methods</h3>
|
||||||
|
<p>You can create a button instance with the button constructor, for example:</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myButton'</span><span class="p">)</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">bsButton</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Button</span><span class="p">(</span><span class="nx">button</span><span class="p">)</span>
|
||||||
|
</code></pre></div><table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Method</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>toggle</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Toggles push state. Gives the button the appearance that it has been activated.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>dispose</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Destroys an element's button. (Removes stored data on the DOM element)
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p>For example, to toggle all buttons</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">buttons</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.btn'</span><span class="p">)</span>
|
||||||
|
<span class="nx">buttons</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">button</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">button</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Button</span><span class="p">(</span><span class="nx">button</span><span class="p">)</span>
|
||||||
|
<span class="nx">button</span><span class="p">.</span><span class="nx">toggle</span><span class="p">()</span>
|
||||||
|
<span class="p">})</span>
|
||||||
|
</code></pre></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1780
docs/5.0/components/card/index.html
Normal file
1780
docs/5.0/components/card/index.html
Normal file
@ -0,0 +1,1780 @@
|
|||||||
|
<!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.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Cards · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/card/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Cards">
|
||||||
|
<meta name="twitter:description" content="Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/card/">
|
||||||
|
<meta property="og:title" content="Cards">
|
||||||
|
<meta property="og:description" content="Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded active" aria-current="page">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/card.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" 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-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="about">About</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</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.0/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">
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="content-types">Content types</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</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">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
This is some text within a card body.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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>
|
||||||
|
This is some text within a card body.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="titles-text-and-links">Titles, text, and links</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">
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="images">Images</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">
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="list-groups">List groups</h3>
|
||||||
|
<p>Create lists of content in a card with a flush list group.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="card" style="width: 18rem;">
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
|
<li class="list-group-item">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Vestibulum at eros</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Vestibulum at eros<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<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">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Vestibulum at eros</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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>
|
||||||
|
Featured
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Vestibulum at eros<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="card" style="width: 18rem;">
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
|
<li class="list-group-item">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Vestibulum at eros</li>
|
||||||
|
</ul>
|
||||||
|
<div class="card-footer">
|
||||||
|
Card footer
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Vestibulum at eros<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<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>
|
||||||
|
Card footer
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="kitchen-sink">Kitchen sink</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">
|
||||||
|
<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">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Vestibulum at eros</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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Vestibulum at eros<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="header-and-footer">Header and footer</h3>
|
||||||
|
<p>Add an optional header and/or footer within a card.</p>
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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>
|
||||||
|
Featured
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>Card headers can be styled by adding <code>.card-header</code> to <code><h*></code> elements.</p>
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
Quote
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<blockquote class="blockquote mb-0">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
|
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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>
|
||||||
|
Quote
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 class="p"><</span><span class="nt">p</span><span class="p">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<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 class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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>
|
||||||
|
Featured
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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>
|
||||||
|
2 days ago
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="sizing">Sizing</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</h3>
|
||||||
|
<p>Using the grid, wrap cards in columns and rows as needed.</p>
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="using-utilities">Using utilities</h3>
|
||||||
|
<p>Use our handful of <a href="/docs/5.0/utilities/sizing/">available sizing utilities</a> to quickly set a card’s width.</p>
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="using-custom-css">Using custom CSS</h3>
|
||||||
|
<p>Use custom CSS in your stylesheets or as inline styles to set a width.</p>
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="text-alignment">Text alignment</h2>
|
||||||
|
<p>You can quickly change the text alignment of any card—in its entirety or specific parts—with our <a href="/docs/5.0/utilities/text/#text-alignment">text align classes</a>.</p>
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="navigation">Navigation</h2>
|
||||||
|
<p>Add some navigation to a card’s header (or block) with Bootstrap’s <a href="/docs/5.0/components/navs-tabs/">nav components</a>.</p>
|
||||||
|
<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" href="#" tabindex="-1" aria-disabled="true">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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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 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 class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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 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="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<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" href="#" tabindex="-1" aria-disabled="true">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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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 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 class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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 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="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="images-1">Images</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</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">
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="image-overlays">Image overlays</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">
|
||||||
|
<div class="card bg-dark text-white">
|
||||||
|
<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">Last updated 3 mins ago</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card bg-dark text-white"</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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>Last updated 3 mins ago<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></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</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">
|
||||||
|
<div class="card mb-3" style="max-width: 540px;">
|
||||||
|
<div class="row g-0">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<svg class="bd-placeholder-img" 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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="card-styles">Card styles</h2>
|
||||||
|
<p>Cards include various options for customizing their backgrounds, borders, and color.</p>
|
||||||
|
<h3 id="background-and-color">Background and color</h3>
|
||||||
|
<p>Use <a href="/docs/5.0/utilities/colors/">text and background utilities</a> to change the appearance of a card.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
|
||||||
|
<div class="card text-white 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-white 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-white 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-white 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-dark 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-dark 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-dark 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-white 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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-white 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-white 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-white 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-white 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-dark 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-dark 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-dark 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card text-white 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</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</h3>
|
||||||
|
<p>Use <a href="/docs/5.0/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">
|
||||||
|
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="mixins-utilities">Mixins utilities</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">
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="card-layout">Card layout</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</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">
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>When using card groups with footers, their content will automatically line up.</p>
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="grid-cards">Grid cards</h3>
|
||||||
|
<p>Use the Bootstrap grid system and its <a href="/docs/5.0/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">
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>Change it to <code>.row-cols-3</code> and you’ll see the fourth card wrap.</p>
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></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">
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>Just like with card groups, card footers will automatically line up.</p>
|
||||||
|
<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="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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 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 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 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 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 class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 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="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="masonry">Masonry</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.0/examples/masonry/">demo example</a> to help you get started.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1016
docs/5.0/components/carousel/index.html
Normal file
1016
docs/5.0/components/carousel/index.html
Normal file
@ -0,0 +1,1016 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Carousel · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/carousel/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Carousel">
|
||||||
|
<meta name="twitter:description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/carousel/">
|
||||||
|
<meta property="og:title" content="Carousel">
|
||||||
|
<meta property="og:description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded active" aria-current="page">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/carousel.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Carousel</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#how-it-works">How it works</a></li>
|
||||||
|
<li><a href="#example">Example</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#slides-only">Slides only</a></li>
|
||||||
|
<li><a href="#with-controls">With controls</a></li>
|
||||||
|
<li><a href="#with-indicators">With indicators</a></li>
|
||||||
|
<li><a href="#with-captions">With captions</a></li>
|
||||||
|
<li><a href="#crossfade">Crossfade</a></li>
|
||||||
|
<li><a href="#individual-carousel-item-interval">Individual <code>.carousel-item</code> interval</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#dark-variant">Dark variant</a></li>
|
||||||
|
<li><a href="#usage">Usage</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#via-data-attributes">Via data attributes</a></li>
|
||||||
|
<li><a href="#via-javascript">Via JavaScript</a></li>
|
||||||
|
<li><a href="#options">Options</a></li>
|
||||||
|
<li><a href="#methods">Methods</a></li>
|
||||||
|
<li><a href="#events">Events</a></li>
|
||||||
|
<li><a href="#change-transition-duration">Change transition duration</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="how-it-works">How it works</h2>
|
||||||
|
<p>The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.</p>
|
||||||
|
<p>In browsers where the <a href="https://www.w3.org/TR/page-visibility/">Page Visibility API</a> is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).</p>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
The animation effect of this component is dependent on the <code>prefers-reduced-motion</code> media query. See the <a href="/docs/5.0/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.</p>
|
||||||
|
<h2 id="example">Example</h2>
|
||||||
|
<p>Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.</p>
|
||||||
|
<p><strong>The <code>.active</code> class needs to be added to one of the slides</strong> otherwise the carousel will not be visible. Also be sure to set a unique id on the <code>.carousel</code> for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a <code>data-bs-target</code> attribute (or <code>href</code> for links) that matches the id of the <code>.carousel</code> element.</p>
|
||||||
|
<h3 id="slides-only">Slides only</h3>
|
||||||
|
<p>Here’s a carousel with slides only. Note the presence of the <code>.d-block</code> and <code>.w-100</code> on carousel images to prevent browser default image alignment.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"carouselExampleSlidesOnly"</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel slide"</span> <span class="na">data-bs-ride</span><span class="o">=</span><span class="s">"carousel"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-inner"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item active"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="with-controls">With controls</h3>
|
||||||
|
<p>Adding in the previous and next controls:</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
|
||||||
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Previous</span>
|
||||||
|
</a>
|
||||||
|
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
|
||||||
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Next</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"carouselExampleControls"</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel slide"</span> <span class="na">data-bs-ride</span><span class="o">=</span><span class="s">"carousel"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-inner"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item active"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#carouselExampleControls"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Previous<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#carouselExampleControls"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Next<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="with-indicators">With indicators</h3>
|
||||||
|
<p>You can also add the indicators to the carousel, alongside the controls, too.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
|
||||||
|
<ol class="carousel-indicators">
|
||||||
|
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
|
||||||
|
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
|
||||||
|
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
|
||||||
|
</ol>
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
|
||||||
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Previous</span>
|
||||||
|
</a>
|
||||||
|
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
|
||||||
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Next</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"carouselExampleIndicators"</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel slide"</span> <span class="na">data-bs-ride</span><span class="o">=</span><span class="s">"carousel"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-indicators"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-bs-slide-to</span><span class="o">=</span><span class="s">"0"</span> <span class="na">class</span><span class="o">=</span><span class="s">"active"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-bs-slide-to</span><span class="o">=</span><span class="s">"1"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-bs-slide-to</span><span class="o">=</span><span class="s">"2"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ol</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-inner"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item active"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Previous<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Next<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="with-captions">With captions</h3>
|
||||||
|
<p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.carousel-item</code>. They can be easily hidden on smaller viewports, as shown below, with optional <a href="/docs/5.0/utilities/display/">display utilities</a>. We hide them initially with <code>.d-none</code> and bring them back on medium-sized devices with <code>.d-md-block</code>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
||||||
|
<ol class="carousel-indicators">
|
||||||
|
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
|
||||||
|
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
|
||||||
|
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
|
||||||
|
</ol>
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
|
||||||
|
|
||||||
|
<div class="carousel-caption d-none d-md-block">
|
||||||
|
<h5>First slide label</h5>
|
||||||
|
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
|
||||||
|
|
||||||
|
<div class="carousel-caption d-none d-md-block">
|
||||||
|
<h5>Second slide label</h5>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
|
||||||
|
|
||||||
|
<div class="carousel-caption d-none d-md-block">
|
||||||
|
<h5>Third slide label</h5>
|
||||||
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
|
||||||
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Previous</span>
|
||||||
|
</a>
|
||||||
|
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
|
||||||
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Next</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"carouselExampleCaptions"</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel slide"</span> <span class="na">data-bs-ride</span><span class="o">=</span><span class="s">"carousel"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-indicators"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-bs-slide-to</span><span class="o">=</span><span class="s">"0"</span> <span class="na">class</span><span class="o">=</span><span class="s">"active"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-bs-slide-to</span><span class="o">=</span><span class="s">"1"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-bs-slide-to</span><span class="o">=</span><span class="s">"2"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ol</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-inner"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item active"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h5</span><span class="p">></span>First slide label<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span><span class="p">></span>Nulla vitae elit libero, a pharetra augue mollis interdum.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h5</span><span class="p">></span>Second slide label<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span><span class="p">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h5</span><span class="p">></span>Third slide label<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span><span class="p">></span>Praesent commodo cursus magna, vel scelerisque nisl consectetur.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Previous<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Next<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="crossfade">Crossfade</h3>
|
||||||
|
<p>Add <code>.carousel-fade</code> to your carousel to animate slides with a fade transition instead of a slide.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev">
|
||||||
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Previous</span>
|
||||||
|
</a>
|
||||||
|
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
|
||||||
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Next</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"carouselExampleFade"</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel slide carousel-fade"</span> <span class="na">data-bs-ride</span><span class="o">=</span><span class="s">"carousel"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-inner"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item active"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#carouselExampleFade"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Previous<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#carouselExampleFade"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Next<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="individual-carousel-item-interval">Individual <code>.carousel-item</code> interval</h3>
|
||||||
|
<p>Add <code>data-bs-interval=""</code> to a <code>.carousel-item</code> to change the amount of time to delay between automatically cycling to the next item.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active" data-bs-interval="10000">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item" data-bs-interval="2000">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-bs-slide="prev">
|
||||||
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Previous</span>
|
||||||
|
</a>
|
||||||
|
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-bs-slide="next">
|
||||||
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Next</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"carouselExampleInterval"</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel slide"</span> <span class="na">data-bs-ride</span><span class="o">=</span><span class="s">"carousel"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-inner"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item active"</span> <span class="na">data-bs-interval</span><span class="o">=</span><span class="s">"10000"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span> <span class="na">data-bs-interval</span><span class="o">=</span><span class="s">"2000"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#carouselExampleInterval"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Previous<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#carouselExampleInterval"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Next<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="dark-variant">Dark variant</h2>
|
||||||
|
<p>Add <code>.carousel-dark</code> to the <code>.carousel</code> for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the <code>filter</code> CSS property. Captions and controls have additional Sass variables that customize the <code>color</code> and <code>background-color</code>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
|
||||||
|
<ol class="carousel-indicators">
|
||||||
|
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li>
|
||||||
|
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
|
||||||
|
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
|
||||||
|
</ol>
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active" data-bs-interval="10000">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#f5f5f5"/><text x="50%" y="50%" fill="#aaa" dy=".3em">First slide</text></svg>
|
||||||
|
|
||||||
|
<div class="carousel-caption d-none d-md-block">
|
||||||
|
<h5>First slide label</h5>
|
||||||
|
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item" data-bs-interval="2000">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#bbb" dy=".3em">Second slide</text></svg>
|
||||||
|
|
||||||
|
<div class="carousel-caption d-none d-md-block">
|
||||||
|
<h5>Second slide label</h5>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#e5e5e5"/><text x="50%" y="50%" fill="#999" dy=".3em">Third slide</text></svg>
|
||||||
|
|
||||||
|
<div class="carousel-caption d-none d-md-block">
|
||||||
|
<h5>Third slide label</h5>
|
||||||
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
|
||||||
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Previous</span>
|
||||||
|
</a>
|
||||||
|
<a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next">
|
||||||
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||||
|
<span class="visually-hidden">Next</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"carouselExampleDark"</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel carousel-dark slide"</span> <span class="na">data-bs-ride</span><span class="o">=</span><span class="s">"carousel"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ol</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-indicators"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleDark"</span> <span class="na">data-bs-slide-to</span><span class="o">=</span><span class="s">"0"</span> <span class="na">class</span><span class="o">=</span><span class="s">"active"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleDark"</span> <span class="na">data-bs-slide-to</span><span class="o">=</span><span class="s">"1"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#carouselExampleDark"</span> <span class="na">data-bs-slide-to</span><span class="o">=</span><span class="s">"2"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ol</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-inner"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item active"</span> <span class="na">data-bs-interval</span><span class="o">=</span><span class="s">"10000"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h5</span><span class="p">></span>First slide label<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span><span class="p">></span>Nulla vitae elit libero, a pharetra augue mollis interdum.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span> <span class="na">data-bs-interval</span><span class="o">=</span><span class="s">"2000"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h5</span><span class="p">></span>Second slide label<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span><span class="p">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-item"</span><span class="p">></span>
|
||||||
|
<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">"d-block w-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h5</span><span class="p">></span>Third slide label<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span><span class="p">></span>Praesent commodo cursus magna, vel scelerisque nisl consectetur.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#carouselExampleDark"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"prev"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Previous<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#carouselExampleDark"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-slide</span><span class="o">=</span><span class="s">"next"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Next<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="usage">Usage</h2>
|
||||||
|
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||||
|
<p>Use data attributes to easily control the position of the carousel. <code>data-bs-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-bs-slide-to</code> to pass a raw slide index to the carousel <code>data-bs-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p>
|
||||||
|
<p>The <code>data-bs-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load. If you don’t use <code>data-bs-ride="carousel"</code> to initialize your carousel, you have to initialize it yourself. <strong>It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.</strong></p>
|
||||||
|
<h3 id="via-javascript">Via JavaScript</h3>
|
||||||
|
<p>Call carousel manually with:</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myCarousel</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">)</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Carousel</span><span class="p">(</span><span class="nx">myCarousel</span><span class="p">)</span>
|
||||||
|
</code></pre></div><h3 id="options">Options</h3>
|
||||||
|
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-bs-</code>, as in <code>data-bs-interval=""</code>.</p>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 100px;">Name</th>
|
||||||
|
<th style="width: 50px;">Type</th>
|
||||||
|
<th style="width: 50px;">Default</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>interval</code></td>
|
||||||
|
<td>number</td>
|
||||||
|
<td><code>5000</code></td>
|
||||||
|
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>keyboard</code></td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td><code>true</code></td>
|
||||||
|
<td>Whether the carousel should react to keyboard events.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>pause</code></td>
|
||||||
|
<td>string | boolean</td>
|
||||||
|
<td><code>"hover"</code></td>
|
||||||
|
<td><p>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p>
|
||||||
|
<p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>slide</code></td>
|
||||||
|
<td>string | boolean</td>
|
||||||
|
<td><code>false</code></td>
|
||||||
|
<td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>wrap</code></td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td><code>true</code></td>
|
||||||
|
<td>Whether the carousel should cycle continuously or have hard stops.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>touch</code></td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td><code>true</code></td>
|
||||||
|
<td>Whether the carousel should support left/right swipe interactions on touchscreen devices.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<h3 id="methods">Methods</h3>
|
||||||
|
<div class="bd-callout bd-callout-danger">
|
||||||
|
<h4 id="asynchronous-methods-and-transitions">Asynchronous methods and transitions</h4>
|
||||||
|
<p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They return to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p>
|
||||||
|
<p><a href="/docs/5.0/getting-started/javascript/#asynchronous-functions-and-transitions">See our JavaScript documentation for more information</a>.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myCarousel</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">)</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Carousel</span><span class="p">(</span><span class="nx">myCarousel</span><span class="p">,</span> <span class="p">{</span>
|
||||||
|
<span class="nx">interval</span><span class="o">:</span> <span class="mi">2000</span><span class="p">,</span>
|
||||||
|
<span class="nx">wrap</span><span class="o">:</span> <span class="kc">false</span>
|
||||||
|
<span class="p">})</span>
|
||||||
|
</code></pre></div><table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Method</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>cycle</code></td>
|
||||||
|
<td>Cycles through the carousel items from left to right.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>pause</code></td>
|
||||||
|
<td>Stops the carousel from cycling through items.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>prev</code></td>
|
||||||
|
<td>Cycles to the previous item. <strong>Returns to the caller before the previous item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>next</code></td>
|
||||||
|
<td>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>nextWhenVisible</code></td>
|
||||||
|
<td>Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. <strong>Returns to the caller before the target item has been shown</strong>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>to</code></td>
|
||||||
|
<td>Cycles the carousel to a particular frame (0 based, similar to an array). <strong>Returns to the caller before the target item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>dispose</code></td>
|
||||||
|
<td>Destroys an element's carousel. (Removes stored data on the DOM element)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>getInstance</code></td>
|
||||||
|
<td>Static method which allows you to get the carousel instance associated with a DOM element.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<h3 id="events">Events</h3>
|
||||||
|
<p>Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>direction</code>: The direction in which the carousel is sliding (either <code>"left"</code> or <code>"right"</code>).</li>
|
||||||
|
<li><code>relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
|
||||||
|
<li><code>from</code>: The index of the current item</li>
|
||||||
|
<li><code>to</code>: The index of the next item</li>
|
||||||
|
</ul>
|
||||||
|
<p>All carousel events are fired at the carousel itself (i.e. at the <code><div class="carousel"></code>).</p>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 150px;">Event type</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>slide.bs.carousel</code></td>
|
||||||
|
<td>Fires immediately when the <code>slide</code> instance method is invoked.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>slid.bs.carousel</code></td>
|
||||||
|
<td>Fired when the carousel has completed its slide transition.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myCarousel</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myCarousel'</span><span class="p">)</span>
|
||||||
|
|
||||||
|
<span class="nx">myCarousel</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'slide.bs.carousel'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||||
|
<span class="c1">// do something...
|
||||||
|
</span><span class="c1"></span><span class="p">})</span>
|
||||||
|
</code></pre></div><h3 id="change-transition-duration">Change transition duration</h3>
|
||||||
|
<p>The transition duration of <code>.carousel-item</code> can be changed with the <code>$carousel-transition</code> Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. <code>transition: transform 2s ease, opacity .5s ease-out</code>).</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
456
docs/5.0/components/close-button/index.html
Normal file
456
docs/5.0/components/close-button/index.html
Normal file
@ -0,0 +1,456 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="A generic close button for dismissing content like modals and alerts.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Close button · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/close-button/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Close button">
|
||||||
|
<meta name="twitter:description" content="A generic close button for dismissing content like modals and alerts.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/close-button/">
|
||||||
|
<meta property="og:title" content="Close button">
|
||||||
|
<meta property="og:description" content="A generic close button for dismissing content like modals and alerts.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded active" aria-current="page">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/close-button.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Close button</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">A generic close button for dismissing content like modals and alerts.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#example">Example</a></li>
|
||||||
|
<li><a href="#disabled-state">Disabled state</a></li>
|
||||||
|
<li><a href="#white-variant">White variant</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="example">Example</h2>
|
||||||
|
<p>Provide an option to dismiss or close a component with <code>.btn-close</code>. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default <code>background-image</code>. <strong>Be sure to include text for screen readers</strong>, as we’ve done with <code>aria-label</code>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<button type="button" class="btn-close" aria-label="Close"></button>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="disabled-state">Disabled state</h2>
|
||||||
|
<p>Disabled close buttons change their <code>opacity</code>. We’ve also applied <code>pointer-events: none</code> and <code>user-select: none</code> to preventing hover and active states from triggering.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<button type="button" class="btn-close" disabled aria-label="Close"></button>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close"</span> <span class="na">disabled</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="white-variant">White variant</h2>
|
||||||
|
<p>Change the default <code>.btn-close</code> to be white with the <code>.btn-close-white</code> class. This class uses the <code>filter</code> property to invert the <code>background-image</code>.</p>
|
||||||
|
<div class="bd-example bg-dark">
|
||||||
|
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
|
||||||
|
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close btn-close-white"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-close btn-close-white"</span> <span class="na">disabled</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></</span><span class="nt">button</span><span class="p">></span></code></pre></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
659
docs/5.0/components/collapse/index.html
Normal file
659
docs/5.0/components/collapse/index.html
Normal file
@ -0,0 +1,659 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Collapse · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/collapse/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Collapse">
|
||||||
|
<meta name="twitter:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/collapse/">
|
||||||
|
<meta property="og:title" content="Collapse">
|
||||||
|
<meta property="og:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded active" aria-current="page">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/collapse.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Collapse</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">Toggle the visibility of content across your project with a few classes and our JavaScript plugins.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#how-it-works">How it works</a></li>
|
||||||
|
<li><a href="#example">Example</a></li>
|
||||||
|
<li><a href="#multiple-targets">Multiple targets</a></li>
|
||||||
|
<li><a href="#accessibility">Accessibility</a></li>
|
||||||
|
<li><a href="#usage">Usage</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#via-data-attributes">Via data attributes</a></li>
|
||||||
|
<li><a href="#via-javascript">Via JavaScript</a></li>
|
||||||
|
<li><a href="#options">Options</a></li>
|
||||||
|
<li><a href="#methods">Methods</a></li>
|
||||||
|
<li><a href="#events">Events</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="how-it-works">How it works</h2>
|
||||||
|
<p>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code>height</code> from its current value to <code>0</code>. Given how CSS handles animations, you cannot use <code>padding</code> on a <code>.collapse</code> element. Instead, use the class as an independent wrapping element.</p>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
The animation effect of this component is dependent on the <code>prefers-reduced-motion</code> media query. See the <a href="/docs/5.0/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="example">Example</h2>
|
||||||
|
<p>Click the buttons below to show and hide another element via class changes:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>.collapse</code> hides content</li>
|
||||||
|
<li><code>.collapsing</code> is applied during transitions</li>
|
||||||
|
<li><code>.collapse.show</code> shows content</li>
|
||||||
|
</ul>
|
||||||
|
<p>You can use a link with the <code>href</code> attribute, or a button with the <code>data-bs-target</code> attribute. In both cases, the <code>data-bs-toggle="collapse"</code> is required.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||||
|
Link with href
|
||||||
|
</a>
|
||||||
|
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||||
|
Button with data-bs-target
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
<div class="collapse" id="collapseExample">
|
||||||
|
<div class="card card-body">
|
||||||
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#collapseExample"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"collapseExample"</span><span class="p">></span>
|
||||||
|
Link with href
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"collapseExample"</span><span class="p">></span>
|
||||||
|
Button with data-bs-target
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">id</span><span class="o">=</span><span class="s">"collapseExample"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card card-body"</span><span class="p">></span>
|
||||||
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="multiple-targets">Multiple targets</h2>
|
||||||
|
<p>A <code><button></code> or <code><a></code> can show and hide multiple elements by referencing them with a selector in its <code>href</code> or <code>data-bs-target</code> attribute.
|
||||||
|
Multiple <code><button></code> or <code><a></code> can show and hide an element if they each reference it with their <code>href</code> or <code>data-bs-target</code> attribute</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||||
|
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||||
|
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||||
|
</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="collapse multi-collapse" id="multiCollapseExample1">
|
||||||
|
<div class="card card-body">
|
||||||
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="collapse multi-collapse" id="multiCollapseExample2">
|
||||||
|
<div class="card card-body">
|
||||||
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#multiCollapseExample1"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"multiCollapseExample1"</span><span class="p">></span>Toggle first element<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#multiCollapseExample2"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"multiCollapseExample2"</span><span class="p">></span>Toggle second element<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">".multi-collapse"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"multiCollapseExample1 multiCollapseExample2"</span><span class="p">></span>Toggle both elements<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<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 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 class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"collapse multi-collapse"</span> <span class="na">id</span><span class="o">=</span><span class="s">"multiCollapseExample1"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card card-body"</span><span class="p">></span>
|
||||||
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<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 class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"collapse multi-collapse"</span> <span class="na">id</span><span class="o">=</span><span class="s">"multiCollapseExample2"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card card-body"</span><span class="p">></span>
|
||||||
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="accessibility">Accessibility</h2>
|
||||||
|
<p>Be sure to add <code>aria-expanded</code> to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of <code>aria-expanded="false"</code>. If you’ve set the collapsible element to be open by default using the <code>show</code> class, set <code>aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element’s HTML element is not a button (e.g., an <code><a></code> or <code><div></code>), the attribute <code>role="button"</code> should be added to the element.</p>
|
||||||
|
<p>If your control element is targeting a single collapsible element – i.e. the <code>data-bs-target</code> attribute is pointing to an <code>id</code> selector – you should add the <code>aria-controls</code> attribute to the control element, containing the <code>id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
|
||||||
|
<p>Note that Bootstrap’s current implementation does not cover the various <em>optional</em> keyboard interactions described in the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#accordion">WAI-ARIA Authoring Practices 1.1 accordion pattern</a> - you will need to include these yourself with custom JavaScript.</p>
|
||||||
|
<h2 id="usage">Usage</h2>
|
||||||
|
<p>The collapse plugin utilizes a few classes to handle the heavy lifting:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>.collapse</code> hides the content</li>
|
||||||
|
<li><code>.collapse.show</code> shows the content</li>
|
||||||
|
<li><code>.collapsing</code> is added when the transition starts, and removed when it finishes</li>
|
||||||
|
</ul>
|
||||||
|
<p>These classes can be found in <code>_transitions.scss</code>.</p>
|
||||||
|
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||||
|
<p>Just add <code>data-bs-toggle="collapse"</code> and a <code>data-bs-target</code> to the element to automatically assign control of one or more collapsible elements. The <code>data-bs-target</code> attribute accepts a CSS selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you’d like it to default open, add the additional class <code>show</code>.</p>
|
||||||
|
<p>To add accordion-like group management to a collapsible area, add the data attribute <code>data-bs-parent="#selector"</code>. Refer to the demo to see this in action.</p>
|
||||||
|
<h3 id="via-javascript">Via JavaScript</h3>
|
||||||
|
<p>Enable manually with:</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">collapseElementList</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.collapse'</span><span class="p">))</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">collapseList</span> <span class="o">=</span> <span class="nx">collapseElementList</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">collapseEl</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="k">return</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Collapse</span><span class="p">(</span><span class="nx">collapseEl</span><span class="p">)</span>
|
||||||
|
<span class="p">})</span>
|
||||||
|
</code></pre></div><h3 id="options">Options</h3>
|
||||||
|
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-bs-</code>, as in <code>data-bs-parent=""</code>.</p>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 100px;">Name</th>
|
||||||
|
<th style="width: 50px;">Type</th>
|
||||||
|
<th style="width: 50px;">Default</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>parent</code></td>
|
||||||
|
<td>selector | jQuery object | DOM element </td>
|
||||||
|
<td><code>false</code></td>
|
||||||
|
<td>If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>toggle</code></td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td><code>true</code></td>
|
||||||
|
<td>Toggles the collapsible element on invocation</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<h3 id="methods">Methods</h3>
|
||||||
|
<div class="bd-callout bd-callout-danger">
|
||||||
|
<h4 id="asynchronous-methods-and-transitions">Asynchronous methods and transitions</h4>
|
||||||
|
<p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They return to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p>
|
||||||
|
<p><a href="/docs/5.0/getting-started/javascript/#asynchronous-functions-and-transitions">See our JavaScript documentation for more information</a>.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.</p>
|
||||||
|
<p>You can create a collapse instance with the constructor, for example:</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myCollapse</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myCollapse'</span><span class="p">)</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">bsCollapse</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Collapse</span><span class="p">(</span><span class="nx">myCollapse</span><span class="p">,</span> <span class="p">{</span>
|
||||||
|
<span class="nx">toggle</span><span class="o">:</span> <span class="kc">false</span>
|
||||||
|
<span class="p">})</span>
|
||||||
|
</code></pre></div><table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Method</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>toggle</code></td>
|
||||||
|
<td>Toggles a collapsible element to shown or hidden. <strong>Returns to the caller before the collapsible element has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.collapse</code> or <code>hidden.bs.collapse</code> event occurs).</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>show</code></td>
|
||||||
|
<td>Shows a collapsible element. <strong>Returns to the caller before the collapsible element has actually been shown</strong> (e.g., before the <code>shown.bs.collapse</code> event occurs). </td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>hide</code></td>
|
||||||
|
<td>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (e.g., before the <code>hidden.bs.collapse</code> event occurs).</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>dispose</code></td>
|
||||||
|
<td>Destroys an element's collapse. (Removes stored data on the DOM element)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>getInstance</code></td>
|
||||||
|
<td>Static method which allows you to get the collapse instance associated with a DOM element.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<h3 id="events">Events</h3>
|
||||||
|
<p>Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.</p>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 150px;">Event type</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>show.bs.collapse</code></td>
|
||||||
|
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>shown.bs.collapse</code></td>
|
||||||
|
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>hide.bs.collapse</code></td>
|
||||||
|
<td>This event is fired immediately when the <code>hide</code> method has been called.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>hidden.bs.collapse</code></td>
|
||||||
|
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myCollapsible</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myCollapsible'</span><span class="p">)</span>
|
||||||
|
<span class="nx">myCollapsible</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'hidden.bs.collapse'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||||
|
<span class="c1">// do something...
|
||||||
|
</span><span class="c1"></span><span class="p">})</span>
|
||||||
|
</code></pre></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1546
docs/5.0/components/dropdowns/index.html
Normal file
1546
docs/5.0/components/dropdowns/index.html
Normal file
@ -0,0 +1,1546 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>Dropdowns · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/dropdowns/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="Dropdowns">
|
||||||
|
<meta name="twitter:description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/dropdowns/">
|
||||||
|
<meta property="og:title" content="Dropdowns">
|
||||||
|
<meta property="og:description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded active" aria-current="page">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/dropdowns.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">Dropdowns</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#overview">Overview</a></li>
|
||||||
|
<li><a href="#accessibility">Accessibility</a></li>
|
||||||
|
<li><a href="#examples">Examples</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#single-button">Single button</a></li>
|
||||||
|
<li><a href="#split-button">Split button</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#sizing">Sizing</a></li>
|
||||||
|
<li><a href="#dark-dropdowns">Dark dropdowns</a></li>
|
||||||
|
<li><a href="#directions">Directions</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#dropup">Dropup</a></li>
|
||||||
|
<li><a href="#dropright">Dropright</a></li>
|
||||||
|
<li><a href="#dropleft">Dropleft</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#menu-items">Menu items</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#active">Active</a></li>
|
||||||
|
<li><a href="#disabled">Disabled</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#menu-alignment">Menu alignment</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#responsive-alignment">Responsive alignment</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#menu-content">Menu content</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#headers">Headers</a></li>
|
||||||
|
<li><a href="#dividers">Dividers</a></li>
|
||||||
|
<li><a href="#text">Text</a></li>
|
||||||
|
<li><a href="#forms">Forms</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#dropdown-options">Dropdown options</a></li>
|
||||||
|
<li><a href="#usage">Usage</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#via-data-attributes">Via data attributes</a></li>
|
||||||
|
<li><a href="#via-javascript">Via JavaScript</a></li>
|
||||||
|
<li><a href="#options">Options</a></li>
|
||||||
|
<li><a href="#methods">Methods</a></li>
|
||||||
|
<li><a href="#events">Events</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="overview">Overview</h2>
|
||||||
|
<p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is <a href="https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision</a>.</p>
|
||||||
|
<p>Dropdowns are built on a third party library, <a href="https://popper.js.org/">Popper</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js">popper.min.js</a> before Bootstrap’s JavaScript or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.</p>
|
||||||
|
<h2 id="accessibility">Accessibility</h2>
|
||||||
|
<p>The <a href="https://www.w3.org/TR/wai-aria/"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr></a> standard defines an actual <a href="https://www.w3.org/WAI/PF/aria/roles#menu"><code>role="menu"</code> widget</a>, but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.</p>
|
||||||
|
<p>Bootstrap’s dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the <code>role</code> and <code>aria-</code> attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus. Authors will have to include these more specific attributes themselves.</p>
|
||||||
|
<p>However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual <code>.dropdown-item</code> elements using the cursor keys and close the menu with the <kbd>ESC</kbd> key.</p>
|
||||||
|
<h2 id="examples">Examples</h2>
|
||||||
|
<p>Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Dropdowns can be triggered from <code><a></code> or <code><button></code> elements to better fit your potential needs. The examples shown here use semantic <code><ul></code> elements where appropriate, but custom markup is supported.</p>
|
||||||
|
<h3 id="single-button">Single button</h3>
|
||||||
|
<p>Any single <code>.btn</code> can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <code><button></code> elements:</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown button
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Dropdown button
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>And with <code><a></code> elements:</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="dropdown">
|
||||||
|
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown link
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuLink"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Dropdown link
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuLink"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>The best part is you can do this with any button variant, too:</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Example single danger button --></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-danger dropdown-toggle"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Action
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">hr</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-divider"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Separated link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div><h3 id="split-button">Split button</h3>
|
||||||
|
<p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>.dropdown-toggle-split</code> for proper spacing around the dropdown caret.</p>
|
||||||
|
<p>We use this extra class to reduce the horizontal <code>padding</code> on either side of the caret by 25% and remove the <code>margin-left</code> that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary">Primary</button>
|
||||||
|
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-success">Success</button>
|
||||||
|
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-info">Info</button>
|
||||||
|
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-warning">Warning</button>
|
||||||
|
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-danger">Danger</button>
|
||||||
|
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Example split danger button --></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-danger"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-danger dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Toggle Dropdown<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">hr</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-divider"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Separated link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div><h2 id="sizing">Sizing</h2>
|
||||||
|
<p>Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Large button
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-lg btn-secondary">Large split button</button>
|
||||||
|
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Large button groups (default and split) --></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-lg dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Large button
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
...
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-lg"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>
|
||||||
|
Large split button
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Toggle Dropdown<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
...
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div><div class="bd-example">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Small button
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary">Small split button</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-sm dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Small button
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
...
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-sm"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>
|
||||||
|
Small split button
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Toggle Dropdown<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
...
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div><h2 id="dark-dropdowns">Dark dropdowns</h2>
|
||||||
|
<p>Opt into darker dropdowns to match a dark navbar or custom style by adding <code>.dropdown-menu-dark</code> onto an existing <code>.dropdown-menu</code>. No changes are required to the dropdown items.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown button
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
|
||||||
|
<li><a class="dropdown-item active" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuButton2"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Dropdown button
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu dropdown-menu-dark"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuButton2"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item active"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">hr</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-divider"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Separated link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>And putting it to use in a navbar:</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-expand-lg navbar-dark bg-dark"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"container-fluid"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-brand"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Navbar<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-toggler"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#navbarNavDarkDropdown"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"navbarNavDarkDropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Toggle navigation"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-toggler-icon"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id</span><span class="o">=</span><span class="s">"navbarNavDarkDropdown"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-nav"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item dropdown"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">id</span><span class="o">=</span><span class="s">"navbarDarkDropdownMenuLink"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Dropdown
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu dropdown-menu-dark"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"navbarDarkDropdownMenuLink"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="directions">Directions</h2>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
<h4 id="rtl">RTL</h4>
|
||||||
|
<p>Directions are mirrored when using Bootstrap in RTL, meaning <code>.dropstart</code> will appear on the right side.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 id="dropup">Dropup</h3>
|
||||||
|
<p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent element.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group dropup">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropup
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group dropup">
|
||||||
|
<button type="button" class="btn btn-secondary">
|
||||||
|
Split dropup
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Default dropup button --></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group dropup"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Dropup
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="c"><!-- Dropdown menu links --></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="c"><!-- Split dropup button --></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group dropup"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>
|
||||||
|
Split dropup
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Toggle Dropdown<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="c"><!-- Dropdown menu links --></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div><h3 id="dropright">Dropright</h3>
|
||||||
|
<p>Trigger dropdown menus at the right of the elements by adding <code>.dropend</code> to the parent element.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group dropend">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropright
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group dropend">
|
||||||
|
<button type="button" class="btn btn-secondary">
|
||||||
|
Split dropend
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropright</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Default dropend button --></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group dropend"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Dropright
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="c"><!-- Dropdown menu links --></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="c"><!-- Split dropend button --></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group dropend"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>
|
||||||
|
Split dropend
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Toggle Dropright<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="c"><!-- Dropdown menu links --></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div><h3 id="dropleft">Dropleft</h3>
|
||||||
|
<p>Trigger dropdown menus at the left of the elements by adding <code>.dropstart</code> to the parent element.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group dropstart">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropleft
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<div class="btn-group dropstart" role="group">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropleft</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-secondary">
|
||||||
|
Split dropstart
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Default dropstart button --></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group dropstart"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Dropstart
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="c"><!-- Dropdown menu links --></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="c"><!-- Split dropstart button --></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group dropstart"</span> <span class="na">role</span><span class="o">=</span><span class="s">"group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Toggle Dropstart<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="c"><!-- Dropdown menu links --></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>
|
||||||
|
Split dropstart
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div><h2 id="menu-items">Menu items</h2>
|
||||||
|
<p>Historically dropdown menu contents <em>had</em> to be links, but that’s no longer the case with v4. Now you can optionally use <code><button></code> elements in your dropdowns instead of just <code><a></code>s.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
||||||
|
<li><button class="dropdown-item" type="button">Action</button></li>
|
||||||
|
<li><button class="dropdown-item" type="button">Another action</button></li>
|
||||||
|
<li><button class="dropdown-item" type="button">Something else here</button></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenu2"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Dropdown
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenu2"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">button</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">button</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">button</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>You can also create non-interactive dropdown items with <code>.dropdown-item-text</code>. Feel free to style further with custom CSS or text utilities.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><span class="dropdown-item-text">Dropdown item text</span></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item-text"</span><span class="p">></span>Dropdown item text<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="active">Active</h3>
|
||||||
|
<p>Add <code>.active</code> to items in the dropdown to <strong>style them as active</strong>. To convey the active state to assistive technologies, use the <code>aria-current</code> attribute — using the <code>page</code> value for the current page, or <code>true</code> for the current item in a set.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Regular link</a></li>
|
||||||
|
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Regular link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item active"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Active link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="disabled">Disabled</h3>
|
||||||
|
<p>Add <code>.disabled</code> to items in the dropdown to <strong>style them as disabled</strong>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Regular link</a></li>
|
||||||
|
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Regular link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="menu-alignment">Menu alignment</h2>
|
||||||
|
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-end</code> to a <code>.dropdown-menu</code> to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning <code>.dropdown-menu-end</code> will appear on the left side.</p>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
<strong>Heads up!</strong> Dropdowns are positioned thanks to Popper (except when they are contained in a navbar).
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Right-aligned menu example
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end">
|
||||||
|
<li><button class="dropdown-item" type="button">Action</button></li>
|
||||||
|
<li><button class="dropdown-item" type="button">Another action</button></li>
|
||||||
|
<li><button class="dropdown-item" type="button">Something else here</button></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Right-aligned menu example
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu dropdown-menu-end"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">button</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">button</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">button</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="responsive-alignment">Responsive alignment</h3>
|
||||||
|
<p>If you want to use responsive alignment, disable dynamic positioning by adding the <code>data-bs-display="static"</code> attribute and use the responsive variation classes.</p>
|
||||||
|
<p>To align <strong>right</strong> the dropdown menu with the given breakpoint or larger, add <code>.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end</code>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
||||||
|
Left-aligned but right aligned when large screen
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-lg-end">
|
||||||
|
<li><button class="dropdown-item" type="button">Action</button></li>
|
||||||
|
<li><button class="dropdown-item" type="button">Another action</button></li>
|
||||||
|
<li><button class="dropdown-item" type="button">Something else here</button></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">data-bs-display</span><span class="o">=</span><span class="s">"static"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Left-aligned but right aligned when large screen
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu dropdown-menu-lg-end"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">button</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">button</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">button</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>To align <strong>left</strong> the dropdown menu with the given breakpoint or larger, add <code>.dropdown-menu-end</code> and <code>.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start</code>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
||||||
|
Right-aligned but left aligned when large screen
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
|
||||||
|
<li><button class="dropdown-item" type="button">Action</button></li>
|
||||||
|
<li><button class="dropdown-item" type="button">Another action</button></li>
|
||||||
|
<li><button class="dropdown-item" type="button">Something else here</button></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">data-bs-display</span><span class="o">=</span><span class="s">"static"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Right-aligned but left aligned when large screen
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu dropdown-menu-end dropdown-menu-lg-start"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">button</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">button</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">button</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>Note that you don’t need to add a <code>data-bs-display="static"</code> attribute to dropdown buttons in navbars, since Popper isn’t used in navbars.</p>
|
||||||
|
<h2 id="menu-content">Menu content</h2>
|
||||||
|
<h3 id="headers">Headers</h3>
|
||||||
|
<p>Add a header to label sections of actions in any dropdown menu.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><h6 class="dropdown-header">Dropdown header</h6></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">h6</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-header"</span><span class="p">></span>Dropdown header<span class="p"></</span><span class="nt">h6</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="dividers">Dividers</h3>
|
||||||
|
<p>Separate groups of related menu items with a divider.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">hr</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-divider"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Separated link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="text">Text</h3>
|
||||||
|
<p>Place any freeform text within a dropdown menu with text and use <a href="/docs/5.0/utilities/spacing/">spacing utilities</a>. Note that you’ll likely need additional sizing styles to constrain the menu width.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
|
||||||
|
<p>
|
||||||
|
Some example text that's free-flowing within the dropdown menu.
|
||||||
|
</p>
|
||||||
|
<p class="mb-0">
|
||||||
|
And this is more example text.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu p-4 text-muted"</span> <span class="na">style</span><span class="o">=</span><span class="s">"max-width: 200px;"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
Some example text that's free-flowing within the dropdown menu.
|
||||||
|
<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>
|
||||||
|
And this is more example text.
|
||||||
|
<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h3 id="forms">Forms</h3>
|
||||||
|
<p>Put a form within a dropdown menu, or make it into a dropdown menu, and use <a href="/docs/5.0/utilities/spacing/">margin or padding utilities</a> to give it the negative space you require.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<form class="px-4 py-3">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
|
||||||
|
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
|
||||||
|
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="form-check">
|
||||||
|
<input type="checkbox" class="form-check-input" id="dropdownCheck">
|
||||||
|
<label class="form-check-label" for="dropdownCheck">
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||||
|
</form>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#">New around here? Sign up</a>
|
||||||
|
<a class="dropdown-item" href="#">Forgot password?</a>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">form</span> <span class="na">class</span><span class="o">=</span><span class="s">"px-4 py-3"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-3"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"exampleDropdownFormEmail1"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-label"</span><span class="p">></span>Email address<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"email"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleDropdownFormEmail1"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"email@example.com"</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-3"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"exampleDropdownFormPassword1"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-label"</span><span class="p">></span>Password<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"password"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleDropdownFormPassword1"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Password"</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-3"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownCheck"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"dropdownCheck"</span><span class="p">></span>
|
||||||
|
Remember me
|
||||||
|
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Sign in<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">form</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-divider"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>New around here? Sign up<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Forgot password?<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-example">
|
||||||
|
<form class="dropdown-menu p-4">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
|
||||||
|
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
|
||||||
|
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="form-check">
|
||||||
|
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
|
||||||
|
<label class="form-check-label" for="dropdownCheck2">
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||||
|
</form>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">form</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu p-4"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-3"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"exampleDropdownFormEmail2"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-label"</span><span class="p">></span>Email address<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"email"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleDropdownFormEmail2"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"email@example.com"</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-3"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"exampleDropdownFormPassword2"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-label"</span><span class="p">></span>Password<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"password"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleDropdownFormPassword2"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Password"</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-3"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownCheck2"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"dropdownCheck2"</span><span class="p">></span>
|
||||||
|
Remember me
|
||||||
|
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Sign in<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">form</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="dropdown-options">Dropdown options</h2>
|
||||||
|
<p>Use <code>data-bs-offset</code> or <code>data-bs-reference</code> to change the location of the dropdown.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="dropdown me-1">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
|
||||||
|
Offset
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-secondary">Reference</button>
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown me-1"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuOffset"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">data-bs-offset</span><span class="o">=</span><span class="s">"10,20"</span><span class="p">></span>
|
||||||
|
Offset
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuOffset"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>Reference<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuReference"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">data-bs-reference</span><span class="o">=</span><span class="s">"parent"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>Toggle Dropdown<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuReference"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">hr</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-divider"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Separated link<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="usage">Usage</h2>
|
||||||
|
<p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.show</code> class on the parent <code>.dropdown-menu</code>. The <code>data-bs-toggle="dropdown"</code> attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.</p>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
On touch-enabled devices, opening a dropdown adds empty <code>mouseover</code> handlers to the immediate children of the <code><body></code> element. This admittedly ugly hack is necessary to work around a <a href="https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html">quirk in iOS' event delegation</a>, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty <code>mouseover</code> handlers are removed.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||||
|
<p>Add <code>data-bs-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">"dLabel"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
|
||||||
|
Dropdown trigger
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dLabel"</span><span class="p">></span>
|
||||||
|
...
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div><h3 id="via-javascript">Via JavaScript</h3>
|
||||||
|
<p>Call the dropdowns via JavaScript:</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">dropdownElementList</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.dropdown-toggle'</span><span class="p">))</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">dropdownList</span> <span class="o">=</span> <span class="nx">dropdownElementList</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">dropdownToggleEl</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="k">return</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Dropdown</span><span class="p">(</span><span class="nx">dropdownToggleEl</span><span class="p">)</span>
|
||||||
|
<span class="p">})</span>
|
||||||
|
</code></pre></div><div class="bd-callout bd-callout-info">
|
||||||
|
<h5 id="data-bs-toggledropdown-still-required"><code>data-bs-toggle="dropdown"</code> still required</h5>
|
||||||
|
<p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code>data-bs-toggle="dropdown"</code> is always required to be present on the dropdown’s trigger element.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 id="options">Options</h3>
|
||||||
|
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-bs-</code>, as in <code>data-bs-offset=""</code>.</p>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 100px;">Name</th>
|
||||||
|
<th style="width: 100px;">Type</th>
|
||||||
|
<th style="width: 50px;">Default</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>flip</code></td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td><code>true</code></td>
|
||||||
|
<td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/">flip docs</a>.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>boundary</code></td>
|
||||||
|
<td>string | element</td>
|
||||||
|
<td><code>'scrollParent'</code></td>
|
||||||
|
<td>Overflow constraint boundary of the dropdown menu. By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">preventOverflow docs</a>.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>reference</code></td>
|
||||||
|
<td>string | element</td>
|
||||||
|
<td><code>'toggle'</code></td>
|
||||||
|
<td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper's <a href="https://popper.js.org/docs/v2/constructors/#createpopper">constructor docs</a>.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>display</code></td>
|
||||||
|
<td>string</td>
|
||||||
|
<td><code>'dynamic'</code></td>
|
||||||
|
<td>By default, we use Popper for dynamic positioning. Disable this with <code>static</code>.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>popperConfig</code></td>
|
||||||
|
<td>null | object</td>
|
||||||
|
<td><code>null</code></td>
|
||||||
|
<td>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper's configuration</a></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p>Note when <code>boundary</code> is set to any value other than <code>'scrollParent'</code>, the style <code>position: static</code> is applied to the <code>.dropdown</code> container.</p>
|
||||||
|
<h3 id="methods">Methods</h3>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Method</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>toggle</code></td>
|
||||||
|
<td>
|
||||||
|
Toggles the dropdown menu of a given navbar or tabbed navigation.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>show</code></td>
|
||||||
|
<td>
|
||||||
|
Shows the dropdown menu of a given navbar or tabbed navigation.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>hide</code></td>
|
||||||
|
<td>
|
||||||
|
Hides the dropdown menu of a given navbar or tabbed navigation.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>update</code></td>
|
||||||
|
<td>
|
||||||
|
Updates the position of an element's dropdown.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>dispose</code></td>
|
||||||
|
<td>
|
||||||
|
Destroys an element's dropdown. (Removes stored data on the DOM element)
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>getInstance</code></td>
|
||||||
|
<td>
|
||||||
|
Static method which allows you to get the dropdown instance associated with a DOM element.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<h3 id="events">Events</h3>
|
||||||
|
<p>All dropdown events are fired at the <code>.dropdown-menu</code>’s parent element and have a <code>relatedTarget</code> property, whose value is the toggling anchor element.
|
||||||
|
<code>hide.bs.dropdown</code> and <code>hidden.bs.dropdown</code> events have a <code>clickEvent</code> property (only when the original Event type is <code>click</code>) that contains an Event Object for the click event.</p>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Method</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>show.bs.dropdown</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Fires immediately when the show instance method is called.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>shown.bs.dropdown</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Fired when the dropdown has been made visible to the user and CSS transitions have completed.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>hide.bs.dropdown</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Fires immediately when the hide instance method has been called.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>hidden.bs.dropdown</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myDropdown</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myDropdown'</span><span class="p">)</span>
|
||||||
|
<span class="nx">myDropdown</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'show.bs.dropdown'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||||
|
<span class="c1">// do something...
|
||||||
|
</span><span class="c1"></span><span class="p">})</span>
|
||||||
|
</code></pre></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
docs/5.0/components/index.html
Normal file
12
docs/5.0/components/index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>https://getbootstrap.com/docs/5.0/components/accordion/</title>
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/accordion/">
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/5.0/components/accordion/">
|
||||||
|
</head>
|
||||||
|
</html>
|
||||||
|
|
||||||
1041
docs/5.0/components/list-group/index.html
Normal file
1041
docs/5.0/components/list-group/index.html
Normal file
@ -0,0 +1,1041 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.79.0">
|
||||||
|
|
||||||
|
<meta name="docsearch:language" content="en">
|
||||||
|
<meta name="docsearch:version" content="5.0">
|
||||||
|
|
||||||
|
<title>List group · Bootstrap v5.0</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/list-group/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||||
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||||
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@getbootstrap">
|
||||||
|
<meta name="twitter:creator" content="@getbootstrap">
|
||||||
|
<meta name="twitter:title" content="List group">
|
||||||
|
<meta name="twitter:description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
|
||||||
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/list-group/">
|
||||||
|
<meta property="og:title" content="List group">
|
||||||
|
<meta property="og:description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
|
||||||
|
<meta property="og:type" content="article">
|
||||||
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
|
<meta property="og:image:width" content="1000">
|
||||||
|
<meta property="og:image:height" content="500">
|
||||||
|
|
||||||
|
<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 overflow-hidden">
|
||||||
|
<div class="container-xl">
|
||||||
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||||
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||||
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||||
|
<a class="navbar-brand p-0 me-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>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-auto">
|
||||||
|
<a class="nav-link p-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-md-none text-white-50">
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">GitHub</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Twitter</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||||
|
<small class="d-md-none ms-2">Slack</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" 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-md-none ms-2">Open Collective</small>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||||
|
<div class="container-xxl d-flex align-items-md-center">
|
||||||
|
<form class="bd-search position-relative me-auto">
|
||||||
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="dropdown ms-3">
|
||||||
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||||
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||||
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-xxl my-md-4 bd-layout">
|
||||||
|
<aside class="bd-sidebar">
|
||||||
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||||
|
Getting started
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="getting-started-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||||
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||||
|
Customize
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="customize-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||||
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||||
|
Layout
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="layout-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||||
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||||||
|
Content
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="content-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||||
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||||
|
Forms
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="forms-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||||
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1 active">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<div class="collapse show" id="components-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded active" aria-current="page">List group</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||||
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||||
|
Helpers
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="helpers-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||||
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||||
|
Utilities
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="utilities-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||||
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||||
|
Extend
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="extend-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||||
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mb-1">
|
||||||
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||||
|
About
|
||||||
|
</button>
|
||||||
|
<div class="collapse" id="about-collapse">
|
||||||
|
<ul class="list-unstyled fw-normal pb-1 small">
|
||||||
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||||
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="my-3 mx-4 border-top"></li>
|
||||||
|
<li>
|
||||||
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||||||
|
Migration
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="bd-main order-1">
|
||||||
|
<div class="bd-intro ps-lg-4">
|
||||||
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||||
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/list-group.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
|
<h1 class="bd-title" id="content">List group</h1>
|
||||||
|
</div>
|
||||||
|
<p class="bd-lead">List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.</p>
|
||||||
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||||
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#basic-example">Basic example</a></li>
|
||||||
|
<li><a href="#active-items">Active items</a></li>
|
||||||
|
<li><a href="#disabled-items">Disabled items</a></li>
|
||||||
|
<li><a href="#links-and-buttons">Links and buttons</a></li>
|
||||||
|
<li><a href="#flush">Flush</a></li>
|
||||||
|
<li><a href="#horizontal">Horizontal</a></li>
|
||||||
|
<li><a href="#contextual-classes">Contextual classes</a></li>
|
||||||
|
<li><a href="#with-badges">With badges</a></li>
|
||||||
|
<li><a href="#custom-content">Custom content</a></li>
|
||||||
|
<li><a href="#checkboxes-and-radios">Checkboxes and radios</a></li>
|
||||||
|
<li><a href="#javascript-behavior">JavaScript behavior</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#using-data-attributes">Using data attributes</a></li>
|
||||||
|
<li><a href="#via-javascript">Via JavaScript</a></li>
|
||||||
|
<li><a href="#fade-effect">Fade effect</a></li>
|
||||||
|
<li><a href="#methods">Methods</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#constructor">constructor</a></li>
|
||||||
|
<li><a href="#show">show</a></li>
|
||||||
|
<li><a href="#dispose">dispose</a></li>
|
||||||
|
<li><a href="#getinstance">getInstance</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#events">Events</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-content ps-lg-4">
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="basic-example">Basic example</h2>
|
||||||
|
<p>The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Morbi leo risus</li>
|
||||||
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||||
|
<li class="list-group-item">Vestibulum at eros</li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span>
|
||||||
|
<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>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Morbi leo risus<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Porta ac consectetur ac<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Vestibulum at eros<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="active-items">Active items</h2>
|
||||||
|
<p>Add <code>.active</code> to a <code>.list-group-item</code> to indicate the current active selection.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item active" aria-current="true">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Morbi leo risus</li>
|
||||||
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||||
|
<li class="list-group-item">Vestibulum at eros</li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Morbi leo risus<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Porta ac consectetur ac<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Vestibulum at eros<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="disabled-items">Disabled items</h2>
|
||||||
|
<p>Add <code>.disabled</code> to a <code>.list-group-item</code> to make it <em>appear</em> disabled. Note that some elements with <code>.disabled</code> will also require custom JavaScript to fully disable their click events (e.g., links).</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Morbi leo risus</li>
|
||||||
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||||
|
<li class="list-group-item">Vestibulum at eros</li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item disabled"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Morbi leo risus<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Porta ac consectetur ac<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Vestibulum at eros<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="links-and-buttons">Links and buttons</h2>
|
||||||
|
<p>Use <code><a></code>s or <code><button></code>s to create <em>actionable</em> list group items with hover, disabled, and active states by adding <code>.list-group-item-action</code>. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <code><li></code>s or <code><div></code>s) don’t provide a click or tap affordance.</p>
|
||||||
|
<p>Be sure to <strong>not use the standard <code>.btn</code> classes here</strong>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="list-group">
|
||||||
|
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
|
||||||
|
Cras justo odio
|
||||||
|
</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
||||||
|
Cras justo odio
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action"</span><span class="p">></span>Dapibus ac facilisis in<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action"</span><span class="p">></span>Morbi leo risus<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action"</span><span class="p">></span>Porta ac consectetur ac<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action disabled"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Vestibulum at eros<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>With <code><button></code>s, you can also make use of the <code>disabled</code> attribute instead of the <code>.disabled</code> class. Sadly, <code><a></code>s don’t support the disabled attribute.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="list-group">
|
||||||
|
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
|
||||||
|
Cras justo odio
|
||||||
|
</button>
|
||||||
|
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
|
||||||
|
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
|
||||||
|
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
|
||||||
|
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
||||||
|
Cras justo odio
|
||||||
|
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span><span class="p">></span>Dapibus ac facilisis in<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span><span class="p">></span>Morbi leo risus<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span><span class="p">></span>Porta ac consectetur ac<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">disabled</span><span class="p">></span>Vestibulum at eros<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="flush">Flush</h2>
|
||||||
|
<p>Add <code>.list-group-flush</code> to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
|
<li class="list-group-item">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Morbi leo risus</li>
|
||||||
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||||
|
<li class="list-group-item">Vestibulum at eros</li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 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>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Morbi leo risus<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Porta ac consectetur ac<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Vestibulum at eros<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="horizontal">Horizontal</h2>
|
||||||
|
<p>Add <code>.list-group-horizontal</code> to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant <code>.list-group-horizontal-{sm|md|lg|xl|xxl}</code> to make a list group horizontal starting at that breakpoint’s <code>min-width</code>. Currently <strong>horizontal list groups cannot be combined with flush list groups.</strong></p>
|
||||||
|
<p><strong>ProTip:</strong> Want equal-width list group items when horizontal? Add <code>.flex-fill</code> to each list group item.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
|
||||||
|
<ul class="list-group list-group-horizontal">
|
||||||
|
<li class="list-group-item">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Morbi leo risus</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="list-group list-group-horizontal-sm">
|
||||||
|
<li class="list-group-item">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Morbi leo risus</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="list-group list-group-horizontal-md">
|
||||||
|
<li class="list-group-item">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Morbi leo risus</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="list-group list-group-horizontal-lg">
|
||||||
|
<li class="list-group-item">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Morbi leo risus</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="list-group list-group-horizontal-xl">
|
||||||
|
<li class="list-group-item">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Morbi leo risus</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="list-group list-group-horizontal-xxl">
|
||||||
|
<li class="list-group-item">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Morbi leo risus</li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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-horizontal"</span><span class="p">></span>
|
||||||
|
<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>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Morbi leo risus<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<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-horizontal-sm"</span><span class="p">></span>
|
||||||
|
<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>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Morbi leo risus<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<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-horizontal-md"</span><span class="p">></span>
|
||||||
|
<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>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Morbi leo risus<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<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-horizontal-lg"</span><span class="p">></span>
|
||||||
|
<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>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Morbi leo risus<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<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-horizontal-xl"</span><span class="p">></span>
|
||||||
|
<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>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Morbi leo risus<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||||
|
<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-horizontal-xxl"</span><span class="p">></span>
|
||||||
|
<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>Cras justo odio<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>Morbi leo risus<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="contextual-classes">Contextual classes</h2>
|
||||||
|
<p>Use contextual classes to style list items with a stateful background and color.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
|
||||||
|
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
|
||||||
|
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
|
||||||
|
<li class="list-group-item list-group-item-success">A simple success list group item</li>
|
||||||
|
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
|
||||||
|
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
|
||||||
|
<li class="list-group-item list-group-item-info">A simple info list group item</li>
|
||||||
|
<li class="list-group-item list-group-item-light">A simple light list group item</li>
|
||||||
|
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span>
|
||||||
|
<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>Dapibus ac facilisis in<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="p">></span>A simple primary list group item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="p">></span>A simple secondary list group item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-success"</span><span class="p">></span>A simple success list group item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-danger"</span><span class="p">></span>A simple danger list group item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-warning"</span><span class="p">></span>A simple warning list group item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-info"</span><span class="p">></span>A simple info list group item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-light"</span><span class="p">></span>A simple light list group item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-dark"</span><span class="p">></span>A simple dark list group item<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>Contextual classes also work with <code>.list-group-item-action</code>. Note the addition of the hover styles here not present in the previous example. Also supported is the <code>.active</code> state; apply it to indicate an active selection on a contextual list group item.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="list-group">
|
||||||
|
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||||
|
|
||||||
|
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action"</span><span class="p">></span>Dapibus ac facilisis in<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
|
||||||
|
<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">"list-group-item list-group-item-action list-group-item-primary"</span><span class="p">></span>A simple primary list group item<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="p">></span>A simple secondary list group item<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action list-group-item-success"</span><span class="p">></span>A simple success list group item<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action list-group-item-danger"</span><span class="p">></span>A simple danger list group item<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action list-group-item-warning"</span><span class="p">></span>A simple warning list group item<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action list-group-item-info"</span><span class="p">></span>A simple info list group item<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action list-group-item-light"</span><span class="p">></span>A simple light list group item<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action list-group-item-dark"</span><span class="p">></span>A simple dark list group item<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<div class="bd-callout bd-callout-info">
|
||||||
|
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</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>
|
||||||
|
|
||||||
|
<h2 id="with-badges">With badges</h2>
|
||||||
|
<p>Add badges to any list group item to show unread counts, activity, and more with the help of some <a href="/docs/5.0/utilities/flex/">utilities</a>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||||
|
Cras justo odio
|
||||||
|
<span class="badge bg-primary rounded-pill">14</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||||
|
Dapibus ac facilisis in
|
||||||
|
<span class="badge bg-primary rounded-pill">2</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||||
|
Morbi leo risus
|
||||||
|
<span class="badge bg-primary rounded-pill">1</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item d-flex justify-content-between align-items-center"</span><span class="p">></span>
|
||||||
|
Cras justo odio
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-primary rounded-pill"</span><span class="p">></span>14<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item d-flex justify-content-between align-items-center"</span><span class="p">></span>
|
||||||
|
Dapibus ac facilisis in
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-primary rounded-pill"</span><span class="p">></span>2<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item d-flex justify-content-between align-items-center"</span><span class="p">></span>
|
||||||
|
Morbi leo risus
|
||||||
|
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"badge bg-primary rounded-pill"</span><span class="p">></span>1<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="custom-content">Custom content</h2>
|
||||||
|
<p>Add nearly any HTML within, even for linked list groups like the one below, with the help of <a href="/docs/5.0/utilities/flex/">flexbox utilities</a>.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="list-group">
|
||||||
|
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
|
||||||
|
<div class="d-flex w-100 justify-content-between">
|
||||||
|
<h5 class="mb-1">List group item heading</h5>
|
||||||
|
<small>3 days ago</small>
|
||||||
|
</div>
|
||||||
|
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||||
|
<small>Donec id elit non mi porta.</small>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action">
|
||||||
|
<div class="d-flex w-100 justify-content-between">
|
||||||
|
<h5 class="mb-1">List group item heading</h5>
|
||||||
|
<small class="text-muted">3 days ago</small>
|
||||||
|
</div>
|
||||||
|
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||||
|
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action">
|
||||||
|
<div class="d-flex w-100 justify-content-between">
|
||||||
|
<h5 class="mb-1">List group item heading</h5>
|
||||||
|
<small class="text-muted">3 days ago</small>
|
||||||
|
</div>
|
||||||
|
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||||
|
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex w-100 justify-content-between"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-1"</span><span class="p">></span>List group item heading<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">small</span><span class="p">></span>3 days ago<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-1"</span><span class="p">></span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">small</span><span class="p">></span>Donec id elit non mi porta.<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex w-100 justify-content-between"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-1"</span><span class="p">></span>List group item heading<span class="p"></</span><span class="nt">h5</span><span class="p">></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>3 days ago<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-1"</span><span class="p">></span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="p"></</span><span class="nt">p</span><span class="p">></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>Donec id elit non mi porta.<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<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">"list-group-item list-group-item-action"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex w-100 justify-content-between"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-1"</span><span class="p">></span>List group item heading<span class="p"></</span><span class="nt">h5</span><span class="p">></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>3 days ago<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-1"</span><span class="p">></span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="p"></</span><span class="nt">p</span><span class="p">></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>Donec id elit non mi porta.<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="checkboxes-and-radios">Checkboxes and radios</h2>
|
||||||
|
<p>Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <code><label></code>s, but please remember to include an <code>aria-label</code> attribute and value for accessibility.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item">
|
||||||
|
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||||||
|
Cras justo odio
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||||||
|
Dapibus ac facilisis in
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||||||
|
Morbi leo risus
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||||||
|
Porta ac consectetur ac
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
|
||||||
|
Vestibulum at eros
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span>
|
||||||
|
<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>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input me-1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
Cras justo odio
|
||||||
|
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input me-1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
Dapibus ac facilisis in
|
||||||
|
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input me-1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
Morbi leo risus
|
||||||
|
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input me-1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
Porta ac consectetur ac
|
||||||
|
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<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>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input me-1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||||
|
Vestibulum at eros
|
||||||
|
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||||
|
<p>And if you want <code><label></code>s as the <code>.list-group-item</code> for large hit areas, you can do that, too.</p>
|
||||||
|
<div class="bd-example">
|
||||||
|
<div class="list-group">
|
||||||
|
<label class="list-group-item">
|
||||||
|
<input class="form-check-input me-1" type="checkbox" value="">
|
||||||
|
Cras justo odio
|
||||||
|
</label>
|
||||||
|
<label class="list-group-item">
|
||||||
|
<input class="form-check-input me-1" type="checkbox" value="">
|
||||||
|
Dapibus ac facilisis in
|
||||||
|
</label>
|
||||||
|
<label class="list-group-item">
|
||||||
|
<input class="form-check-input me-1" type="checkbox" value="">
|
||||||
|
Morbi leo risus
|
||||||
|
</label>
|
||||||
|
<label class="list-group-item">
|
||||||
|
<input class="form-check-input me-1" type="checkbox" value="">
|
||||||
|
Porta ac consectetur ac
|
||||||
|
</label>
|
||||||
|
<label class="list-group-item">
|
||||||
|
<input class="form-check-input me-1" type="checkbox" value="">
|
||||||
|
Vestibulum at eros
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input me-1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span><span class="p">></span>
|
||||||
|
Cras justo odio
|
||||||
|
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input me-1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span><span class="p">></span>
|
||||||
|
Dapibus ac facilisis in
|
||||||
|
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input me-1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span><span class="p">></span>
|
||||||
|
Morbi leo risus
|
||||||
|
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input me-1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span><span class="p">></span>
|
||||||
|
Porta ac consectetur ac
|
||||||
|
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input me-1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span><span class="p">></span>
|
||||||
|
Vestibulum at eros
|
||||||
|
<span class="p"></</span><span class="nt">label</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||||
|
<h2 id="javascript-behavior">JavaScript behavior</h2>
|
||||||
|
<p>Use the tab JavaScript plugin—include it individually or through the compiled <code>bootstrap.js</code> file—to extend our list group to create tabbable panes of local content.</p>
|
||||||
|
<div class="bd-example" role="tabpanel">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="list-group" id="list-tab" role="tablist">
|
||||||
|
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a>
|
||||||
|
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
|
||||||
|
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
|
||||||
|
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-8">
|
||||||
|
<div class="tab-content" id="nav-tabContent">
|
||||||
|
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
|
||||||
|
<p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
|
||||||
|
<p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
|
||||||
|
<p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.</p>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
|
||||||
|
<p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><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 class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-4"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-tab"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tablist"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-home-list"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-home"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"home"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-profile-list"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-profile"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"profile"</span><span class="p">></span>Profile<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-messages-list"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-messages"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"messages"</span><span class="p">></span>Messages<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-settings-list"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-settings"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"settings"</span><span class="p">></span>Settings<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-8"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-content"</span> <span class="na">id</span><span class="o">=</span><span class="s">"nav-tabContent"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-home"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"list-home-list"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-profile"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"list-profile-list"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-messages"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"list-messages-list"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-settings"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"list-settings-list"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div><h3 id="using-data-attributes">Using data attributes</h3>
|
||||||
|
<p>You can activate a list group navigation without writing any JavaScript by simply specifying <code>data-bs-toggle="list"</code> or on an element. Use these data attributes on <code>.list-group-item</code>.</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>
|
||||||
|
<span class="c"><!-- List group --></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span> <span class="na">id</span><span class="o">=</span><span class="s">"myList"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tablist"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#home"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#profile"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span><span class="p">></span>Profile<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#messages"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span><span class="p">></span>Messages<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#settings"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span><span class="p">></span>Settings<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="c"><!-- Tab panes --></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-content"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane active"</span> <span class="na">id</span><span class="o">=</span><span class="s">"home"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane"</span> <span class="na">id</span><span class="o">=</span><span class="s">"profile"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane"</span> <span class="na">id</span><span class="o">=</span><span class="s">"messages"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane"</span> <span class="na">id</span><span class="o">=</span><span class="s">"settings"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div><h3 id="via-javascript">Via JavaScript</h3>
|
||||||
|
<p>Enable tabbable list item via JavaScript (each list item needs to be activated individually):</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerTabList</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'#myTab a'</span><span class="p">))</span>
|
||||||
|
<span class="nx">triggerTabList</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">tabTrigger</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span>
|
||||||
|
|
||||||
|
<span class="nx">triggerEl</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span>
|
||||||
|
<span class="nx">tabTrigger</span><span class="p">.</span><span class="nx">show</span><span class="p">()</span>
|
||||||
|
<span class="p">})</span>
|
||||||
|
<span class="p">})</span>
|
||||||
|
</code></pre></div><p>You can activate individual list item in several ways:</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#myTab a[href="#profile"]'</span><span class="p">)</span>
|
||||||
|
<span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">).</span><span class="nx">show</span><span class="p">()</span> <span class="c1">// Select tab by name
|
||||||
|
</span><span class="c1"></span>
|
||||||
|
<span class="kd">var</span> <span class="nx">triggerFirstTabEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#myTab li:first-child a'</span><span class="p">)</span>
|
||||||
|
<span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">triggerFirstTabEl</span><span class="p">).</span><span class="nx">show</span><span class="p">()</span> <span class="c1">// Select first tab
|
||||||
|
</span></code></pre></div><h3 id="fade-effect">Fade effect</h3>
|
||||||
|
<p>To make tabs panel fade in, add <code>.fade</code> to each <code>.tab-pane</code>. The first tab pane must also have <code>.show</code> to make the initial content visible.</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-content"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id</span><span class="o">=</span><span class="s">"home"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"profile"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"messages"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"settings"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
</code></pre></div><h3 id="methods">Methods</h3>
|
||||||
|
<h4 id="constructor">constructor</h4>
|
||||||
|
<p>Activates a list item element and content container. Tab should have either a <code>data-bs-target</code> or an <code>href</code> targeting a container node in the DOM.</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span> <span class="na">id</span><span class="o">=</span><span class="s">"myList"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tablist"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#home"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span><span class="p">></span>Home<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#profile"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span><span class="p">></span>Profile<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#messages"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span><span class="p">></span>Messages<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"list"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#settings"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span><span class="p">></span>Settings<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-content"</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane active"</span> <span class="na">id</span><span class="o">=</span><span class="s">"home"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane"</span> <span class="na">id</span><span class="o">=</span><span class="s">"profile"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane"</span> <span class="na">id</span><span class="o">=</span><span class="s">"messages"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"tab-pane"</span> <span class="na">id</span><span class="o">=</span><span class="s">"settings"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||||
|
|
||||||
|
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
||||||
|
<span class="kd">var</span> <span class="nx">firstTabEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#myTab a:last-child'</span><span class="p">)</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">firstTab</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">(</span><span class="nx">firstTabEl</span><span class="p">)</span>
|
||||||
|
|
||||||
|
<span class="nx">firstTab</span><span class="p">.</span><span class="nx">show</span><span class="p">()</span>
|
||||||
|
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
||||||
|
</code></pre></div><h4 id="show">show</h4>
|
||||||
|
<p>Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. <strong>Returns to the caller before the tab pane has actually been shown</strong> (for example, before the <code>shown.bs.tab</code> event occurs).</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"> <span class="kd">var</span> <span class="nx">someListItemEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#someListItem'</span><span class="p">)</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">(</span><span class="nx">someListItemEl</span><span class="p">)</span>
|
||||||
|
|
||||||
|
<span class="nx">tab</span><span class="p">.</span><span class="nx">show</span><span class="p">()</span>
|
||||||
|
</code></pre></div><h4 id="dispose">dispose</h4>
|
||||||
|
<p>Destroys an element’s tab.</p>
|
||||||
|
<h4 id="getinstance">getInstance</h4>
|
||||||
|
<p><em>Static</em> method which allows you to get the tab instance associated with a DOM element</p>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#trigger'</span><span class="p">)</span>
|
||||||
|
<span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tab instance
|
||||||
|
</span></code></pre></div><h3 id="events">Events</h3>
|
||||||
|
<p>When showing a new tab, the events fire in the following order:</p>
|
||||||
|
<ol>
|
||||||
|
<li><code>hide.bs.tab</code> (on the current active tab)</li>
|
||||||
|
<li><code>show.bs.tab</code> (on the to-be-shown tab)</li>
|
||||||
|
<li><code>hidden.bs.tab</code> (on the previous active tab, the same one as for the <code>hide.bs.tab</code> event)</li>
|
||||||
|
<li><code>shown.bs.tab</code> (on the newly-active just-shown tab, the same one as for the <code>show.bs.tab</code> event)</li>
|
||||||
|
</ol>
|
||||||
|
<p>If no tab was already active, the <code>hide.bs.tab</code> and <code>hidden.bs.tab</code> events will not be fired.</p>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 150px;">Event type</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>show.bs.tab</code></td>
|
||||||
|
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>shown.bs.tab</code></td>
|
||||||
|
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>hide.bs.tab</code></td>
|
||||||
|
<td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>hidden.bs.tab</code></td>
|
||||||
|
<td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">tabEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'a[data-bs-toggle="list"]'</span><span class="p">)</span>
|
||||||
|
<span class="nx">tabEl</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'shown.bs.tab'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||||
|
<span class="nx">event</span><span class="p">.</span><span class="nx">target</span> <span class="c1">// newly activated tab
|
||||||
|
</span><span class="c1"></span> <span class="nx">event</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab
|
||||||
|
</span><span class="c1"></span><span class="p">})</span>
|
||||||
|
</code></pre></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="bd-footer-links ps-0 mb-3">
|
||||||
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||||||
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||||
|
<p class="mb-0">Currently v5.0.0-beta1. 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>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||||
|
|
||||||
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user