3687 lines
141 KiB
HTML
3687 lines
141 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-bs-theme="auto">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="" />
|
|
<meta
|
|
name="author"
|
|
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
|
/>
|
|
<meta name="generator" content="Astro v5.13.2" />
|
|
<title>Cheatsheet · Bootstrap v5.3</title>
|
|
<link
|
|
rel="canonical"
|
|
href="https://getbootstrap.com/docs/5.3/examples/cheatsheet/"
|
|
/>
|
|
<script src="../assets/js/color-modes.js"></script>
|
|
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
<meta name="theme-color" content="#712cf9" />
|
|
<link href="cheatsheet.css" rel="stylesheet" />
|
|
<style>
|
|
.bd-placeholder-img {
|
|
font-size: 1.125rem;
|
|
text-anchor: middle;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.bd-placeholder-img-lg {
|
|
font-size: 3.5rem;
|
|
}
|
|
}
|
|
.b-example-divider {
|
|
width: 100%;
|
|
height: 3rem;
|
|
background-color: #0000001a;
|
|
border: solid rgba(0, 0, 0, 0.15);
|
|
border-width: 1px 0;
|
|
box-shadow:
|
|
inset 0 0.5em 1.5em #0000001a,
|
|
inset 0 0.125em 0.5em #00000026;
|
|
}
|
|
.b-example-vr {
|
|
flex-shrink: 0;
|
|
width: 1.5rem;
|
|
height: 100vh;
|
|
}
|
|
.bi {
|
|
vertical-align: -0.125em;
|
|
fill: currentColor;
|
|
}
|
|
.nav-scroller {
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 2.75rem;
|
|
overflow-y: hidden;
|
|
}
|
|
.nav-scroller .nav {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
padding-bottom: 1rem;
|
|
margin-top: -1px;
|
|
overflow-x: auto;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.btn-bd-primary {
|
|
--bd-violet-bg: #712cf9;
|
|
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
|
--bs-btn-font-weight: 600;
|
|
--bs-btn-color: var(--bs-white);
|
|
--bs-btn-bg: var(--bd-violet-bg);
|
|
--bs-btn-border-color: var(--bd-violet-bg);
|
|
--bs-btn-hover-color: var(--bs-white);
|
|
--bs-btn-hover-bg: #6528e0;
|
|
--bs-btn-hover-border-color: #6528e0;
|
|
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
|
--bs-btn-active-color: var(--bs-btn-hover-color);
|
|
--bs-btn-active-bg: #5a23c8;
|
|
--bs-btn-active-border-color: #5a23c8;
|
|
}
|
|
.bd-mode-toggle {
|
|
z-index: 1500;
|
|
}
|
|
.bd-mode-toggle .bi {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
.bd-mode-toggle .dropdown-menu .active .bi {
|
|
display: block !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-body-tertiary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
|
<symbol id="check2" viewBox="0 0 16 16">
|
|
<path
|
|
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
|
></path>
|
|
</symbol>
|
|
<symbol id="circle-half" viewBox="0 0 16 16">
|
|
<path
|
|
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
|
></path>
|
|
</symbol>
|
|
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
|
<path
|
|
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
|
></path>
|
|
<path
|
|
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
|
></path>
|
|
</symbol>
|
|
<symbol id="sun-fill" viewBox="0 0 16 16">
|
|
<path
|
|
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
|
></path>
|
|
</symbol>
|
|
</svg>
|
|
<div
|
|
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
|
>
|
|
<button
|
|
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
|
id="bd-theme"
|
|
type="button"
|
|
aria-expanded="false"
|
|
data-bs-toggle="dropdown"
|
|
aria-label="Toggle theme (auto)"
|
|
>
|
|
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
|
<use href="#circle-half"></use>
|
|
</svg>
|
|
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
|
</button>
|
|
<ul
|
|
class="dropdown-menu dropdown-menu-end shadow"
|
|
aria-labelledby="bd-theme-text"
|
|
>
|
|
<li>
|
|
<button
|
|
type="button"
|
|
class="dropdown-item d-flex align-items-center"
|
|
data-bs-theme-value="light"
|
|
aria-pressed="false"
|
|
>
|
|
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
|
<use href="#sun-fill"></use>
|
|
</svg>
|
|
Light
|
|
<svg class="bi ms-auto d-none" aria-hidden="true">
|
|
<use href="#check2"></use>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button
|
|
type="button"
|
|
class="dropdown-item d-flex align-items-center"
|
|
data-bs-theme-value="dark"
|
|
aria-pressed="false"
|
|
>
|
|
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
|
<use href="#moon-stars-fill"></use>
|
|
</svg>
|
|
Dark
|
|
<svg class="bi ms-auto d-none" aria-hidden="true">
|
|
<use href="#check2"></use>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button
|
|
type="button"
|
|
class="dropdown-item d-flex align-items-center active"
|
|
data-bs-theme-value="auto"
|
|
aria-pressed="true"
|
|
>
|
|
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
|
<use href="#circle-half"></use>
|
|
</svg>
|
|
Auto
|
|
<svg class="bi ms-auto d-none" aria-hidden="true">
|
|
<use href="#check2"></use>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<header
|
|
class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark"
|
|
>
|
|
<div class="container-fluid d-flex align-items-center">
|
|
<h1 class="d-flex align-items-center fs-4 text-white mb-0">
|
|
<img
|
|
src="../assets/brand/bootstrap-logo-white.svg"
|
|
width="38"
|
|
height="30"
|
|
class="me-3"
|
|
alt="Bootstrap"
|
|
/>
|
|
Cheatsheet
|
|
</h1>
|
|
<a
|
|
href="../examples/cheatsheet-rtl/"
|
|
class="ms-auto link-light"
|
|
hreflang="ar"
|
|
>RTL cheatsheet</a
|
|
>
|
|
</div>
|
|
</header>
|
|
<aside
|
|
class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2"
|
|
>
|
|
<h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2>
|
|
<nav class="small" id="toc">
|
|
<ul class="list-unstyled">
|
|
<li class="my-2">
|
|
<button
|
|
type="button"
|
|
class="btn d-inline-flex align-items-center collapsed border-0"
|
|
data-bs-toggle="collapse"
|
|
aria-expanded="false"
|
|
data-bs-target="#contents-collapse"
|
|
aria-controls="contents-collapse"
|
|
>
|
|
Contents
|
|
</button>
|
|
<ul class="list-unstyled ps-3 collapse" id="contents-collapse">
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#typography"
|
|
>Typography</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#images"
|
|
>Images</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#tables"
|
|
>Tables</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#figures"
|
|
>Figures</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="my-2">
|
|
<button
|
|
type="button"
|
|
class="btn d-inline-flex align-items-center collapsed border-0"
|
|
data-bs-toggle="collapse"
|
|
aria-expanded="false"
|
|
data-bs-target="#forms-collapse"
|
|
aria-controls="forms-collapse"
|
|
>
|
|
Forms
|
|
</button>
|
|
<ul class="list-unstyled ps-3 collapse" id="forms-collapse">
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#overview"
|
|
>Overview</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#disabled-forms"
|
|
>Disabled forms</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#sizing"
|
|
>Sizing</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#input-group"
|
|
>Input group</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#floating-labels"
|
|
>Floating labels</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#validation"
|
|
>Validation</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="my-2">
|
|
<button
|
|
type="button"
|
|
class="btn d-inline-flex align-items-center collapsed border-0"
|
|
data-bs-toggle="collapse"
|
|
aria-expanded="false"
|
|
data-bs-target="#components-collapse"
|
|
aria-controls="components-collapse"
|
|
>
|
|
Components
|
|
</button>
|
|
<ul class="list-unstyled ps-3 collapse" id="components-collapse">
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#accordion"
|
|
>Accordion</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#alerts"
|
|
>Alerts</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#badge"
|
|
>Badge</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#breadcrumb"
|
|
>Breadcrumb</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#buttons"
|
|
>Buttons</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#button-group"
|
|
>Button group</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#card"
|
|
>Card</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#carousel"
|
|
>Carousel</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#dropdowns"
|
|
>Dropdowns</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#list-group"
|
|
>List group</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#modal"
|
|
>Modal</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#navs"
|
|
>Navs</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#navbar"
|
|
>Navbar</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#pagination"
|
|
>Pagination</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#popovers"
|
|
>Popovers</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#progress"
|
|
>Progress</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#scrollspy"
|
|
>Scrollspy</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#spinners"
|
|
>Spinners</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#toasts"
|
|
>Toasts</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="d-inline-flex align-items-center rounded text-decoration-none"
|
|
href="#tooltips"
|
|
>Tooltips</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
<main class="bd-cheatsheet container-fluid bg-body">
|
|
<section id="content">
|
|
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">
|
|
Contents
|
|
</h2>
|
|
<article class="my-3" id="typography">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Typography</h3>
|
|
<a class="d-flex align-items-center" href="../content/typography"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<p class="display-1">Display 1</p>
|
|
<p class="display-2">Display 2</p>
|
|
<p class="display-3">Display 3</p>
|
|
<p class="display-4">Display 4</p>
|
|
<p class="display-5">Display 5</p>
|
|
<p class="display-6">Display 6</p>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<p class="h1">Heading 1</p>
|
|
<p class="h2">Heading 2</p>
|
|
<p class="h3">Heading 3</p>
|
|
<p class="h4">Heading 4</p>
|
|
<p class="h5">Heading 5</p>
|
|
<p class="h6">Heading 6</p>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<p class="lead">
|
|
This is a lead paragraph. It stands out from regular
|
|
paragraphs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
|
<p>
|
|
<del
|
|
>This line of text is meant to be treated as deleted
|
|
text.</del
|
|
>
|
|
</p>
|
|
<p>
|
|
<s
|
|
>This line of text is meant to be treated as no longer
|
|
accurate.</s
|
|
>
|
|
</p>
|
|
<p>
|
|
<ins
|
|
>This line of text is meant to be treated as an addition to
|
|
the document.</ins
|
|
>
|
|
</p>
|
|
<p><u>This line of text will render as underlined.</u></p>
|
|
<p>
|
|
<small
|
|
>This line of text is meant to be treated as fine
|
|
print.</small
|
|
>
|
|
</p>
|
|
<p><strong>This line rendered as bold text.</strong></p>
|
|
<p><em>This line rendered as italicized text.</em></p>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<blockquote class="blockquote">
|
|
<p>A well-known quote, contained in a blockquote element.</p>
|
|
<footer class="blockquote-footer">
|
|
Someone famous in
|
|
<cite title="Source Title">Source Title</cite>
|
|
</footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<ul class="list-unstyled">
|
|
<li>This is a list.</li>
|
|
<li>It appears completely unstyled.</li>
|
|
<li>Structurally, it's still a list.</li>
|
|
<li>
|
|
However, this style only applies to immediate child
|
|
elements.
|
|
</li>
|
|
<li>
|
|
Nested lists:
|
|
<ul>
|
|
<li>are unaffected by this style</li>
|
|
<li>will still show a bullet</li>
|
|
<li>and have appropriate left margin</li>
|
|
</ul>
|
|
</li>
|
|
<li>This may still come in handy in some situations.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<ul class="list-inline">
|
|
<li class="list-inline-item">This is a list item.</li>
|
|
<li class="list-inline-item">And another one.</li>
|
|
<li class="list-inline-item">
|
|
But they're displayed inline.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="images">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Images</h3>
|
|
<a class="d-flex align-items-center" href="../content/images"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<svg
|
|
aria-label="Placeholder: Responsive image"
|
|
class="bd-placeholder-img bd-placeholder-img-lg img-fluid"
|
|
height="250"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
role="img"
|
|
width="100%"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<title>Placeholder</title>
|
|
<rect width="100%" height="100%" fill="#868e96" />
|
|
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
|
Responsive image
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<svg
|
|
aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200"
|
|
class="bd-placeholder-img img-thumbnail"
|
|
height="200"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
role="img"
|
|
width="200"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<title>
|
|
A generic square placeholder image with a white border
|
|
around it, making it resemble a photograph taken with an old
|
|
instant camera
|
|
</title>
|
|
<rect width="100%" height="100%" fill="#868e96" />
|
|
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="tables">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Tables</h3>
|
|
<a class="d-flex align-items-center" href="../content/tables"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First</th>
|
|
<th scope="col">Last</th>
|
|
<th scope="col">Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Mark</td>
|
|
<td>Otto</td>
|
|
<td>@mdo</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Jacob</td>
|
|
<td>Thornton</td>
|
|
<td>@fat</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>John</td>
|
|
<td>Doe</td>
|
|
<td>@social</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<table class="table table-dark table-borderless">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First</th>
|
|
<th scope="col">Last</th>
|
|
<th scope="col">Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Mark</td>
|
|
<td>Otto</td>
|
|
<td>@mdo</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Jacob</td>
|
|
<td>Thornton</td>
|
|
<td>@fat</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>John</td>
|
|
<td>Doe</td>
|
|
<td>@social</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Class</th>
|
|
<th scope="col">Heading</th>
|
|
<th scope="col">Heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">Default</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-primary">
|
|
<th scope="row">Primary</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-secondary">
|
|
<th scope="row">Secondary</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-success">
|
|
<th scope="row">Success</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-danger">
|
|
<th scope="row">Danger</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-warning">
|
|
<th scope="row">Warning</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-info">
|
|
<th scope="row">Info</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-light">
|
|
<th scope="row">Light</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-dark">
|
|
<th scope="row">Dark</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<table class="table table-sm table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First</th>
|
|
<th scope="col">Last</th>
|
|
<th scope="col">Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Mark</td>
|
|
<td>Otto</td>
|
|
<td>@mdo</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Jacob</td>
|
|
<td>Thornton</td>
|
|
<td>@fat</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>John</td>
|
|
<td>Doe</td>
|
|
<td>@social</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="figures">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Figures</h3>
|
|
<a class="d-flex align-items-center" href="../content/figures"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<figure class="figure">
|
|
<svg
|
|
aria-label="Placeholder: 400x300"
|
|
class="bd-placeholder-img figure-img img-fluid rounded"
|
|
height="300"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
role="img"
|
|
width="400"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<title>Placeholder</title>
|
|
<rect width="100%" height="100%" fill="#868e96" />
|
|
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
|
400x300
|
|
</text>
|
|
</svg>
|
|
<figcaption class="figure-caption">
|
|
A caption for the above image.
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<section id="forms">
|
|
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Forms</h2>
|
|
<article class="my-3" id="overview">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Overview</h3>
|
|
<a class="d-flex align-items-center" href="../forms/overview/"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="exampleInputEmail1" class="form-label"
|
|
>Email address</label
|
|
>
|
|
<input
|
|
type="email"
|
|
class="form-control"
|
|
id="exampleInputEmail1"
|
|
aria-describedby="emailHelp"
|
|
/>
|
|
<div id="emailHelp" class="form-text">
|
|
We'll never share your email with anyone else.
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="exampleInputPassword1" class="form-label"
|
|
>Password</label
|
|
>
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
id="exampleInputPassword1"
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="exampleSelect" class="form-label"
|
|
>Select menu</label
|
|
>
|
|
<select class="form-select" id="exampleSelect">
|
|
<option selected>Open this select menu</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3 form-check">
|
|
<input
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
id="exampleCheck1"
|
|
/>
|
|
<label class="form-check-label" for="exampleCheck1"
|
|
>Check me out</label
|
|
>
|
|
</div>
|
|
<fieldset class="mb-3">
|
|
<legend>Radios buttons</legend>
|
|
<div class="form-check">
|
|
<input
|
|
type="radio"
|
|
name="radios"
|
|
class="form-check-input"
|
|
id="exampleRadio1"
|
|
/>
|
|
<label class="form-check-label" for="exampleRadio1"
|
|
>Default radio</label
|
|
>
|
|
</div>
|
|
<div class="mb-3 form-check">
|
|
<input
|
|
type="radio"
|
|
name="radios"
|
|
class="form-check-input"
|
|
id="exampleRadio2"
|
|
/>
|
|
<label class="form-check-label" for="exampleRadio2"
|
|
>Another radio</label
|
|
>
|
|
</div>
|
|
</fieldset>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="customFile">Upload</label>
|
|
<input type="file" class="form-control" id="customFile" />
|
|
</div>
|
|
<div class="mb-3 form-check form-switch">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
role="switch"
|
|
id="switchCheckChecked"
|
|
checked
|
|
/>
|
|
<label class="form-check-label" for="switchCheckChecked"
|
|
>Checked switch checkbox input</label
|
|
>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="customRange3" class="form-label"
|
|
>Example range</label
|
|
>
|
|
<input
|
|
type="range"
|
|
class="form-range"
|
|
min="0"
|
|
max="5"
|
|
step="0.5"
|
|
id="customRange3"
|
|
/>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="disabled-forms">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Disabled forms</h3>
|
|
<a
|
|
class="d-flex align-items-center"
|
|
href="../forms/overview/#disabled-forms"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<form>
|
|
<fieldset disabled aria-label="Disabled fieldset example">
|
|
<div class="mb-3">
|
|
<label for="disabledTextInput" class="form-label"
|
|
>Disabled input</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="disabledTextInput"
|
|
class="form-control"
|
|
placeholder="Disabled input"
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="disabledSelect" class="form-label"
|
|
>Disabled select menu</label
|
|
>
|
|
<select id="disabledSelect" class="form-select">
|
|
<option>Disabled select</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="disabledFieldsetCheck"
|
|
disabled
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="disabledFieldsetCheck"
|
|
>
|
|
Can't check this
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<fieldset class="mb-3">
|
|
<legend>Disabled radios buttons</legend>
|
|
<div class="form-check">
|
|
<input
|
|
type="radio"
|
|
name="radios"
|
|
class="form-check-input"
|
|
id="disabledRadio1"
|
|
disabled
|
|
/>
|
|
<label class="form-check-label" for="disabledRadio1"
|
|
>Disabled radio</label
|
|
>
|
|
</div>
|
|
<div class="mb-3 form-check">
|
|
<input
|
|
type="radio"
|
|
name="radios"
|
|
class="form-check-input"
|
|
id="disabledRadio2"
|
|
disabled
|
|
/>
|
|
<label class="form-check-label" for="disabledRadio2"
|
|
>Another radio</label
|
|
>
|
|
</div>
|
|
</fieldset>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="disabledCustomFile"
|
|
>Upload</label
|
|
>
|
|
<input
|
|
type="file"
|
|
class="form-control"
|
|
id="disabledCustomFile"
|
|
disabled
|
|
/>
|
|
</div>
|
|
<div class="mb-3 form-check form-switch">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
role="switch"
|
|
id="disabledSwitchCheckChecked"
|
|
checked
|
|
disabled
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="disabledSwitchCheckChecked"
|
|
>Disabled checked switch checkbox input</label
|
|
>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="disabledRange" class="form-label"
|
|
>Disabled range</label
|
|
>
|
|
<input
|
|
type="range"
|
|
class="form-range"
|
|
min="0"
|
|
max="5"
|
|
step="0.5"
|
|
id="disabledRange"
|
|
/>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">
|
|
Submit
|
|
</button>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="sizing">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Sizing</h3>
|
|
<a
|
|
class="d-flex align-items-center"
|
|
href="../forms/form-control#sizing"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div class="mb-3">
|
|
<input
|
|
class="form-control form-control-lg"
|
|
type="text"
|
|
placeholder=".form-control-lg"
|
|
aria-label=".form-control-lg example"
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<select
|
|
class="form-select form-select-lg"
|
|
aria-label=".form-select-lg example"
|
|
>
|
|
<option selected>Open this select menu</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<input
|
|
type="file"
|
|
class="form-control form-control-lg"
|
|
aria-label="Large file input example"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div class="mb-3">
|
|
<input
|
|
class="form-control form-control-sm"
|
|
type="text"
|
|
placeholder=".form-control-sm"
|
|
aria-label=".form-control-sm example"
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<select
|
|
class="form-select form-select-sm"
|
|
aria-label=".form-select-sm example"
|
|
>
|
|
<option selected>Open this select menu</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<input
|
|
type="file"
|
|
class="form-control form-control-sm"
|
|
aria-label="Small file input example"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="input-group">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Input group</h3>
|
|
<a class="d-flex align-items-center" href="../forms/input-group"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text" id="basic-addon1">@</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Username"
|
|
aria-label="Username"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Recipient's username"
|
|
aria-label="Recipient's username"
|
|
aria-describedby="basic-addon2"
|
|
/>
|
|
<span class="input-group-text" id="basic-addon2"
|
|
>@example.com</span
|
|
>
|
|
</div>
|
|
<label for="basic-url" class="form-label"
|
|
>Your vanity URL</label
|
|
>
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text" id="basic-addon3"
|
|
>https://example.com/users/</span
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="basic-url"
|
|
aria-describedby="basic-addon3"
|
|
/>
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text">$</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
aria-label="Amount (to the nearest dollar)"
|
|
/>
|
|
<span class="input-group-text">.00</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="input-group-text">With textarea</span>
|
|
<textarea
|
|
class="form-control"
|
|
aria-label="With textarea"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="floating-labels">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Floating labels</h3>
|
|
<a class="d-flex align-items-center" href="../forms/floating-labels"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<form>
|
|
<div class="form-floating mb-3">
|
|
<input
|
|
type="email"
|
|
class="form-control"
|
|
id="floatingInput"
|
|
placeholder="name@example.com"
|
|
/>
|
|
<label for="floatingInput">Email address</label>
|
|
</div>
|
|
<div class="form-floating">
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
id="floatingPassword"
|
|
placeholder="Password"
|
|
/>
|
|
<label for="floatingPassword">Password</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="validation">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Validation</h3>
|
|
<a class="d-flex align-items-center" href="../forms/validation"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<form class="row g-3">
|
|
<div class="col-md-4">
|
|
<label for="validationServer01" class="form-label"
|
|
>First name</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control is-valid"
|
|
id="validationServer01"
|
|
value="Mark"
|
|
required
|
|
/>
|
|
<div class="valid-feedback">Looks good!</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="validationServer02" class="form-label"
|
|
>Last name</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control is-valid"
|
|
id="validationServer02"
|
|
value="Otto"
|
|
required
|
|
/>
|
|
<div class="valid-feedback">Looks good!</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="validationServerUsername" class="form-label"
|
|
>Username</label
|
|
>
|
|
<div class="input-group has-validation">
|
|
<span class="input-group-text" id="inputGroupPrepend3"
|
|
>@</span
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control is-invalid"
|
|
id="validationServerUsername"
|
|
aria-describedby="inputGroupPrepend3"
|
|
required
|
|
/>
|
|
<div class="invalid-feedback">
|
|
Please choose a username.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="validationServer03" class="form-label"
|
|
>City</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control is-invalid"
|
|
id="validationServer03"
|
|
required
|
|
/>
|
|
<div class="invalid-feedback">
|
|
Please provide a valid city.
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="validationServer04" class="form-label"
|
|
>State</label
|
|
>
|
|
<select
|
|
class="form-select is-invalid"
|
|
id="validationServer04"
|
|
required
|
|
>
|
|
<option selected disabled value="">Choose...</option>
|
|
<option>...</option>
|
|
</select>
|
|
<div class="invalid-feedback">
|
|
Please select a valid state.
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="validationServer05" class="form-label"
|
|
>Zip</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control is-invalid"
|
|
id="validationServer05"
|
|
required
|
|
/>
|
|
<div class="invalid-feedback">
|
|
Please provide a valid zip.
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input is-invalid"
|
|
type="checkbox"
|
|
value=""
|
|
id="invalidCheck3"
|
|
required
|
|
/>
|
|
<label class="form-check-label" for="invalidCheck3">
|
|
Agree to terms and conditions
|
|
</label>
|
|
<div class="invalid-feedback">
|
|
You must agree before submitting.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<button class="btn btn-primary" type="submit">
|
|
Submit form
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<section id="components">
|
|
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">
|
|
Components
|
|
</h2>
|
|
<article class="my-3" id="accordion">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Accordion</h3>
|
|
<a class="d-flex align-items-center" href="../components/accordion"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div class="accordion" id="accordionExample">
|
|
<div class="accordion-item">
|
|
<h4 class="accordion-header">
|
|
<button
|
|
class="accordion-button"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapseOne"
|
|
aria-expanded="true"
|
|
aria-controls="collapseOne"
|
|
>
|
|
Accordion Item #1
|
|
</button>
|
|
</h4>
|
|
<div
|
|
id="collapseOne"
|
|
class="accordion-collapse collapse show"
|
|
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">
|
|
<h4 class="accordion-header">
|
|
<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>
|
|
</h4>
|
|
<div
|
|
id="collapseTwo"
|
|
class="accordion-collapse collapse"
|
|
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">
|
|
<h4 class="accordion-header">
|
|
<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>
|
|
</h4>
|
|
<div
|
|
id="collapseThree"
|
|
class="accordion-collapse collapse"
|
|
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>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="alerts">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Alerts</h3>
|
|
<a class="d-flex align-items-center" href="../components/alerts"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div
|
|
class="alert alert-primary alert-dismissible fade show"
|
|
role="alert"
|
|
>
|
|
A simple primary alert with
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
|
click if you like.
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
|
|
<div
|
|
class="alert alert-secondary alert-dismissible fade show"
|
|
role="alert"
|
|
>
|
|
A simple secondary alert with
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
|
click if you like.
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
|
|
<div
|
|
class="alert alert-success alert-dismissible fade show"
|
|
role="alert"
|
|
>
|
|
A simple success alert with
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
|
click if you like.
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
|
|
<div
|
|
class="alert alert-danger alert-dismissible fade show"
|
|
role="alert"
|
|
>
|
|
A simple danger alert with
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
|
click if you like.
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
|
|
<div
|
|
class="alert alert-warning alert-dismissible fade show"
|
|
role="alert"
|
|
>
|
|
A simple warning alert with
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
|
click if you like.
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
|
|
<div
|
|
class="alert alert-info alert-dismissible fade show"
|
|
role="alert"
|
|
>
|
|
A simple info alert with
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
|
click if you like.
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
|
|
<div
|
|
class="alert alert-light alert-dismissible fade show"
|
|
role="alert"
|
|
>
|
|
A simple light alert with
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
|
click if you like.
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
|
|
<div
|
|
class="alert alert-dark alert-dismissible fade show"
|
|
role="alert"
|
|
>
|
|
A simple dark alert with
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
|
click if you like.
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<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>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="badge">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Badge</h3>
|
|
<a class="d-flex align-items-center" href="../components/badge"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<p class="h1">
|
|
Example heading <span class="badge bg-primary">New</span>
|
|
</p>
|
|
<p class="h2">
|
|
Example heading <span class="badge bg-secondary">New</span>
|
|
</p>
|
|
<p class="h3">
|
|
Example heading <span class="badge bg-success">New</span>
|
|
</p>
|
|
<p class="h4">
|
|
Example heading <span class="badge bg-danger">New</span>
|
|
</p>
|
|
<p class="h5">
|
|
Example heading <span class="badge text-bg-warning">New</span>
|
|
</p>
|
|
<p class="h6">
|
|
Example heading <span class="badge text-bg-info">New</span>
|
|
</p>
|
|
<p class="h6">
|
|
Example heading <span class="badge text-bg-light">New</span>
|
|
</p>
|
|
<p class="h6">
|
|
Example heading <span class="badge bg-dark">New</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<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 text-bg-warning">Warning</span>
|
|
|
|
<span class="badge rounded-pill text-bg-info">Info</span>
|
|
|
|
<span class="badge rounded-pill text-bg-light">Light</span>
|
|
|
|
<span class="badge rounded-pill bg-dark">Dark</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="breadcrumb">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Breadcrumb</h3>
|
|
<a class="d-flex align-items-center" href="../components/breadcrumb"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<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>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="buttons">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Buttons</h3>
|
|
<a class="d-flex align-items-center" href="../components/buttons"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<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>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<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>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<button type="button" class="btn btn-primary btn-sm">
|
|
Small button
|
|
</button>
|
|
<button type="button" class="btn btn-primary">
|
|
Standard button
|
|
</button>
|
|
<button type="button" class="btn btn-primary btn-lg">
|
|
Large button
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="button-group">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Button group</h3>
|
|
<a
|
|
class="d-flex align-items-center"
|
|
href="../components/button-group"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<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-secondary">1</button>
|
|
<button type="button" class="btn btn-secondary">2</button>
|
|
<button type="button" class="btn btn-secondary">3</button>
|
|
<button type="button" class="btn btn-secondary">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-secondary">8</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="card">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Card</h3>
|
|
<a class="d-flex align-items-center" href="../components/card"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div class="row row-cols-1 row-cols-md-2 g-4">
|
|
<div class="col">
|
|
<div class="card">
|
|
<svg
|
|
aria-label="Placeholder: Image cap"
|
|
class="bd-placeholder-img card-img-top"
|
|
height="180"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
role="img"
|
|
width="100%"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<title>Placeholder</title>
|
|
<rect width="100%" height="100%" fill="#868e96" />
|
|
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
|
Image cap
|
|
</text>
|
|
</svg>
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card title</h5>
|
|
<p class="card-text">
|
|
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="col">
|
|
<div class="card">
|
|
<div class="card-header">Featured</div>
|
|
<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 class="card-footer text-body-secondary">
|
|
2 days ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card title</h5>
|
|
<p class="card-text">
|
|
Some quick example text to build on the card title and
|
|
make up the bulk of the card's content.
|
|
</p>
|
|
</div>
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item">An item</li>
|
|
<li class="list-group-item">A second item</li>
|
|
<li class="list-group-item">A third item</li>
|
|
</ul>
|
|
<div class="card-body">
|
|
<a href="#" class="card-link">Card link</a>
|
|
<a href="#" class="card-link">Another link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="row g-0">
|
|
<div class="col-md-4">
|
|
<svg
|
|
aria-label="Placeholder: Image"
|
|
class="bd-placeholder-img"
|
|
height="250"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
role="img"
|
|
width="100%"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<title>Placeholder</title>
|
|
<rect width="100%" height="100%" fill="#868e96" />
|
|
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
|
Image
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card title</h5>
|
|
<p class="card-text">
|
|
This is a wider card with supporting text below as
|
|
a natural lead-in to additional content. This
|
|
content is a little bit longer.
|
|
</p>
|
|
<p class="card-text">
|
|
<small class="text-body-secondary"
|
|
>Last updated 3 mins ago</small
|
|
>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="carousel">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Carousel</h3>
|
|
<a class="d-flex align-items-center" href="../components/carousel"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div
|
|
id="carouselExampleCaptions"
|
|
class="carousel slide"
|
|
data-bs-ride="carousel"
|
|
>
|
|
<div class="carousel-indicators">
|
|
<button
|
|
type="button"
|
|
data-bs-target="#carouselExampleCaptions"
|
|
data-bs-slide-to="0"
|
|
class="active"
|
|
aria-current="true"
|
|
aria-label="Slide 1"
|
|
></button>
|
|
<button
|
|
type="button"
|
|
data-bs-target="#carouselExampleCaptions"
|
|
data-bs-slide-to="1"
|
|
aria-label="Slide 2"
|
|
></button>
|
|
<button
|
|
type="button"
|
|
data-bs-target="#carouselExampleCaptions"
|
|
data-bs-slide-to="2"
|
|
aria-label="Slide 3"
|
|
></button>
|
|
</div>
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<svg
|
|
aria-label="Placeholder: First slide"
|
|
class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
|
|
height="400"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
role="img"
|
|
width="800"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
Some representative placeholder content for the first
|
|
slide.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<svg
|
|
aria-label="Placeholder: Second slide"
|
|
class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
|
|
height="400"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
role="img"
|
|
width="800"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
Some representative placeholder content for the second
|
|
slide.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<svg
|
|
aria-label="Placeholder: Third slide"
|
|
class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
|
|
height="400"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
role="img"
|
|
width="800"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
Some representative placeholder content for the third
|
|
slide.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="carousel-control-prev"
|
|
type="button"
|
|
data-bs-target="#carouselExampleCaptions"
|
|
data-bs-slide="prev"
|
|
>
|
|
<span
|
|
class="carousel-control-prev-icon"
|
|
aria-hidden="true"
|
|
></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button
|
|
class="carousel-control-next"
|
|
type="button"
|
|
data-bs-target="#carouselExampleCaptions"
|
|
data-bs-slide="next"
|
|
>
|
|
<span
|
|
class="carousel-control-next-icon"
|
|
aria-hidden="true"
|
|
></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="dropdowns">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Dropdowns</h3>
|
|
<a class="d-flex align-items-center" href="../components/dropdowns"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div
|
|
class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0"
|
|
>
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-secondary btn-sm dropdown-toggle"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
Dropdown button
|
|
</button>
|
|
<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>
|
|
<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="dropdown">
|
|
<button
|
|
class="btn btn-secondary dropdown-toggle"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
Dropdown button
|
|
</button>
|
|
<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>
|
|
<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="dropdown">
|
|
<button
|
|
class="btn btn-secondary btn-lg dropdown-toggle"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
Dropdown button
|
|
</button>
|
|
<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>
|
|
<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>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</ul>
|
|
</div>
|
|
<!-- /btn-group -->
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div
|
|
class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0"
|
|
>
|
|
<div class="dropend">
|
|
<button
|
|
class="btn btn-secondary dropdown-toggle"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
Dropend button
|
|
</button>
|
|
<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>
|
|
<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="dropup">
|
|
<button
|
|
class="btn btn-secondary dropdown-toggle"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
Dropup button
|
|
</button>
|
|
<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>
|
|
<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="dropstart">
|
|
<button
|
|
class="btn btn-secondary dropdown-toggle"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
Dropstart button
|
|
</button>
|
|
<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>
|
|
<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>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div class="btn-group">
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-secondary dropdown-toggle"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
End-aligned menu
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<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>
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="list-group">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>List group</h3>
|
|
<a class="d-flex align-items-center" href="../components/list-group"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<ul class="list-group">
|
|
<li class="list-group-item disabled" aria-disabled="true">
|
|
A disabled item
|
|
</li>
|
|
<li class="list-group-item">A second item</li>
|
|
<li class="list-group-item">A third item</li>
|
|
<li class="list-group-item">A fourth item</li>
|
|
<li class="list-group-item">And a fifth one</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item">An item</li>
|
|
<li class="list-group-item">A second item</li>
|
|
<li class="list-group-item">A third item</li>
|
|
<li class="list-group-item">A fourth item</li>
|
|
<li class="list-group-item">And a fifth one</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div class="list-group">
|
|
<a href="#" class="list-group-item list-group-item-action"
|
|
>A simple default list group item</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>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="modal">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Modal</h3>
|
|
<a class="d-flex align-items-center" href="../components/modal"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div class="d-flex justify-content-between flex-wrap">
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalDefault"
|
|
>
|
|
Launch demo modal
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#staticBackdropLive"
|
|
>
|
|
Launch static backdrop modal
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalCenteredScrollable"
|
|
>
|
|
Vertically centered scrollable modal
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalFullscreen"
|
|
>
|
|
Full screen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="navs">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Navs</h3>
|
|
<a class="d-flex align-items-center" href="../components/navs-tabs"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<nav class="nav">
|
|
<a class="nav-link active" aria-current="page" href="#"
|
|
>Active</a
|
|
>
|
|
<a class="nav-link" href="#">Link</a>
|
|
<a class="nav-link" href="#">Link</a>
|
|
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<nav>
|
|
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
|
|
<button
|
|
class="nav-link active"
|
|
id="nav-home-tab"
|
|
data-bs-toggle="tab"
|
|
data-bs-target="#nav-home"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="nav-home"
|
|
aria-selected="true"
|
|
>
|
|
Home
|
|
</button>
|
|
<button
|
|
class="nav-link"
|
|
id="nav-profile-tab"
|
|
data-bs-toggle="tab"
|
|
data-bs-target="#nav-profile"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="nav-profile"
|
|
aria-selected="false"
|
|
>
|
|
Profile
|
|
</button>
|
|
<button
|
|
class="nav-link"
|
|
id="nav-contact-tab"
|
|
data-bs-toggle="tab"
|
|
data-bs-target="#nav-contact"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="nav-contact"
|
|
aria-selected="false"
|
|
>
|
|
Contact
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<div class="tab-content" id="nav-tabContent">
|
|
<div
|
|
class="tab-pane fade show active"
|
|
id="nav-home"
|
|
role="tabpanel"
|
|
aria-labelledby="nav-home-tab"
|
|
>
|
|
<p>
|
|
This is some placeholder content the
|
|
<strong>Home tab's</strong> associated content. Clicking
|
|
another tab will toggle the visibility of this one for the
|
|
next. The tab JavaScript swaps classes to control the
|
|
content visibility and styling. You can use it with tabs,
|
|
pills, and any other <code>.nav</code>-powered navigation.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="tab-pane fade"
|
|
id="nav-profile"
|
|
role="tabpanel"
|
|
aria-labelledby="nav-profile-tab"
|
|
>
|
|
<p>
|
|
This is some placeholder content the
|
|
<strong>Profile tab's</strong> associated content.
|
|
Clicking another tab will toggle the visibility of this
|
|
one for the next. The tab JavaScript swaps classes to
|
|
control the content visibility and styling. You can use it
|
|
with tabs, pills, and any other <code>.nav</code>-powered
|
|
navigation.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="tab-pane fade"
|
|
id="nav-contact"
|
|
role="tabpanel"
|
|
aria-labelledby="nav-contact-tab"
|
|
>
|
|
<p>
|
|
This is some placeholder content the
|
|
<strong>Contact tab's</strong> associated content.
|
|
Clicking another tab will toggle the visibility of this
|
|
one for the next. The tab JavaScript swaps classes to
|
|
control the content visibility and styling. You can use it
|
|
with tabs, pills, and any other <code>.nav</code>-powered
|
|
navigation.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<ul class="nav nav-pills">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="#"
|
|
>Active</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" aria-disabled="true"
|
|
>Disabled</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="navbar">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Navbar</h3>
|
|
<a class="d-flex align-items-center" href="../components/navbar"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">
|
|
<img
|
|
src="../assets/brand/bootstrap-logo-white.svg"
|
|
width="38"
|
|
height="30"
|
|
class="d-inline-block align-top"
|
|
alt="Bootstrap"
|
|
loading="lazy"
|
|
style="
|
|
filter: invert(1) grayscale(100%) brightness(200%);
|
|
"
|
|
/>
|
|
</a>
|
|
<button
|
|
class="navbar-toggler"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#navbarSupportedContent"
|
|
aria-controls="navbarSupportedContent"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div
|
|
class="collapse navbar-collapse"
|
|
id="navbarSupportedContent"
|
|
>
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link active"
|
|
aria-current="page"
|
|
href="#"
|
|
>Home</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a
|
|
class="nav-link dropdown-toggle"
|
|
href="#"
|
|
role="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
Dropdown
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
>Another action</a
|
|
>
|
|
</li>
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
>Something else here</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" aria-disabled="true"
|
|
>Disabled</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
<form class="d-flex" role="search">
|
|
<input
|
|
class="form-control me-2"
|
|
type="search"
|
|
placeholder="Search"
|
|
aria-label="Search"
|
|
/>
|
|
<button class="btn btn-outline-dark" type="submit">
|
|
Search
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav
|
|
class="navbar navbar-expand-lg navbar-dark bg-primary mt-5"
|
|
>
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">
|
|
<img
|
|
src="../assets/brand/bootstrap-logo-white.svg"
|
|
width="38"
|
|
height="30"
|
|
class="d-inline-block align-top"
|
|
alt="Bootstrap"
|
|
loading="lazy"
|
|
/>
|
|
</a>
|
|
<button
|
|
class="navbar-toggler"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#navbarSupportedContent2"
|
|
aria-controls="navbarSupportedContent2"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div
|
|
class="collapse navbar-collapse"
|
|
id="navbarSupportedContent2"
|
|
>
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link active"
|
|
aria-current="page"
|
|
href="#"
|
|
>Home</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a
|
|
class="nav-link dropdown-toggle"
|
|
href="#"
|
|
role="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
Dropdown
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
>Another action</a
|
|
>
|
|
</li>
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li>
|
|
<a class="dropdown-item" href="#"
|
|
>Something else here</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" aria-disabled="true"
|
|
>Disabled</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
<form class="d-flex" role="search">
|
|
<input
|
|
class="form-control me-2"
|
|
type="search"
|
|
placeholder="Search"
|
|
aria-label="Search"
|
|
/>
|
|
<button class="btn btn-outline-light" type="submit">
|
|
Search
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="pagination">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Pagination</h3>
|
|
<a class="d-flex align-items-center" href="../components/pagination"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<nav aria-label="Pagination example">
|
|
<ul class="pagination pagination-sm">
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item active" aria-current="page">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<nav aria-label="Standard pagination example">
|
|
<ul class="pagination">
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<nav aria-label="Another pagination example">
|
|
<ul class="pagination pagination-lg flex-wrap">
|
|
<li class="page-item disabled">
|
|
<a class="page-link">Previous</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item active" aria-current="page">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="popovers">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Popovers</h3>
|
|
<a class="d-flex align-items-center" href="../components/popovers"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<button
|
|
type="button"
|
|
class="btn btn-lg btn-danger"
|
|
data-bs-toggle="popover"
|
|
title="Popover title"
|
|
data-bs-content="And here's some amazing content. It's very engaging. Right?"
|
|
>
|
|
Click to toggle popover
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-container="body"
|
|
data-bs-toggle="popover"
|
|
data-bs-placement="top"
|
|
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
|
>
|
|
Popover on top
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-container="body"
|
|
data-bs-toggle="popover"
|
|
data-bs-placement="right"
|
|
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
|
>
|
|
Popover on end
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-container="body"
|
|
data-bs-toggle="popover"
|
|
data-bs-placement="bottom"
|
|
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
|
>
|
|
Popover on bottom
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-container="body"
|
|
data-bs-toggle="popover"
|
|
data-bs-placement="left"
|
|
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
|
>
|
|
Popover on start
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="progress">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Progress</h3>
|
|
<a class="d-flex align-items-center" href="../components/progress"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div
|
|
class="progress mb-3"
|
|
role="progressbar"
|
|
aria-label="Example with label"
|
|
aria-valuenow="0"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
>
|
|
<div class="progress-bar">0%</div>
|
|
</div>
|
|
<div
|
|
class="progress mb-3"
|
|
role="progressbar"
|
|
aria-label="Success example with label"
|
|
aria-valuenow="25"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
>
|
|
<div class="progress-bar bg-success w-25">25%</div>
|
|
</div>
|
|
<div
|
|
class="progress mb-3"
|
|
role="progressbar"
|
|
aria-label="Info example with label"
|
|
aria-valuenow="50"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
>
|
|
<div class="progress-bar text-bg-info w-50">50%</div>
|
|
</div>
|
|
<div
|
|
class="progress mb-3"
|
|
role="progressbar"
|
|
aria-label="Warning example with label"
|
|
aria-valuenow="75"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
>
|
|
<div class="progress-bar text-bg-warning w-75">75%</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
role="progressbar"
|
|
aria-label="Danger example with label"
|
|
aria-valuenow="100"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
>
|
|
<div class="progress-bar bg-danger w-100">100%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div class="progress-stacked">
|
|
<div
|
|
class="progress"
|
|
role="progressbar"
|
|
aria-label="Segment one - default example"
|
|
style="width: 15%"
|
|
aria-valuenow="15"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
>
|
|
<div class="progress-bar"></div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
role="progressbar"
|
|
aria-label="Segment two - animated striped success example"
|
|
style="width: 40%"
|
|
aria-valuenow="40"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
>
|
|
<div
|
|
class="progress-bar progress-bar-striped progress-bar-animated bg-success"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="scrollspy">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Scrollspy</h3>
|
|
<a class="d-flex align-items-center" href="../components/scrollspy"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
<ul class="nav nav-pills">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#scrollspyHeading1"
|
|
>First</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#scrollspyHeading2">Second</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a
|
|
class="nav-link dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
href="#"
|
|
role="button"
|
|
aria-expanded="false"
|
|
>Dropdown</a
|
|
>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a class="dropdown-item" href="#scrollspyHeading3"
|
|
>Third</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="#scrollspyHeading4"
|
|
>Fourth</a
|
|
>
|
|
</li>
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li>
|
|
<a class="dropdown-item" href="#scrollspyHeading5"
|
|
>Fifth</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div
|
|
data-bs-spy="scroll"
|
|
data-bs-target="#navbar-example2"
|
|
data-bs-offset="0"
|
|
class="scrollspy-example position-relative mt-2 overflow-auto"
|
|
tabindex="0"
|
|
>
|
|
<h4 id="scrollspyHeading1">First heading</h4>
|
|
<p>
|
|
This is some placeholder content for the scrollspy page.
|
|
Note that as you scroll down the page, the appropriate
|
|
navigation link is highlighted. It's repeated throughout the
|
|
component example. We keep adding some more example copy
|
|
here to emphasize the scrolling and highlighting.
|
|
</p>
|
|
<h4 id="scrollspyHeading2">Second heading</h4>
|
|
<p>
|
|
This is some placeholder content for the scrollspy page.
|
|
Note that as you scroll down the page, the appropriate
|
|
navigation link is highlighted. It's repeated throughout the
|
|
component example. We keep adding some more example copy
|
|
here to emphasize the scrolling and highlighting.
|
|
</p>
|
|
<h4 id="scrollspyHeading3">Third heading</h4>
|
|
<p>
|
|
This is some placeholder content for the scrollspy page.
|
|
Note that as you scroll down the page, the appropriate
|
|
navigation link is highlighted. It's repeated throughout the
|
|
component example. We keep adding some more example copy
|
|
here to emphasize the scrolling and highlighting.
|
|
</p>
|
|
<h4 id="scrollspyHeading4">Fourth heading</h4>
|
|
<p>
|
|
This is some placeholder content for the scrollspy page.
|
|
Note that as you scroll down the page, the appropriate
|
|
navigation link is highlighted. It's repeated throughout the
|
|
component example. We keep adding some more example copy
|
|
here to emphasize the scrolling and highlighting.
|
|
</p>
|
|
<h4 id="scrollspyHeading5">Fifth heading</h4>
|
|
<p>
|
|
This is some placeholder content for the scrollspy page.
|
|
Note that as you scroll down the page, the appropriate
|
|
navigation link is highlighted. It's repeated throughout the
|
|
component example. We keep adding some more example copy
|
|
here to emphasize the scrolling and highlighting.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="spinners">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Spinners</h3>
|
|
<a class="d-flex align-items-center" href="../components/spinners"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-border text-secondary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-border text-success" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-border text-danger" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-border text-warning" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-border text-info" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-border text-light" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-border text-dark" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0">
|
|
<div class="spinner-grow text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-grow text-secondary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-grow text-success" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-grow text-danger" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-grow text-warning" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-grow text-info" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-grow text-light" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<div class="spinner-grow text-dark" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="toasts">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Toasts</h3>
|
|
<a class="d-flex align-items-center" href="../components/toasts"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div
|
|
class="bd-example m-0 border-0 bg-dark p-5 align-items-center"
|
|
>
|
|
<div
|
|
class="toast"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div class="toast-header">
|
|
<svg
|
|
aria-hidden="true"
|
|
class="bd-placeholder-img rounded me-2"
|
|
height="20"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect width="100%" height="100%" fill="#007aff" />
|
|
</svg>
|
|
<strong class="me-auto">Bootstrap</strong>
|
|
<small class="text-body-secondary">11 mins ago</small>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="toast-body">
|
|
Hello, world! This is a toast message.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="mt-3 mb-5 pb-5" id="tooltips">
|
|
<div
|
|
class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"
|
|
>
|
|
<h3>Tooltips</h3>
|
|
<a class="d-flex align-items-center" href="../components/tooltips"
|
|
>Documentation</a
|
|
>
|
|
</div>
|
|
<div>
|
|
<div class="bd-example-snippet bd-code-snippet">
|
|
<div class="bd-example m-0 border-0 tooltip-demo">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="top"
|
|
title="Tooltip on top"
|
|
>
|
|
Tooltip on top
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="right"
|
|
title="Tooltip on end"
|
|
>
|
|
Tooltip on end
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="bottom"
|
|
title="Tooltip on bottom"
|
|
>
|
|
Tooltip on bottom
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="left"
|
|
title="Tooltip on start"
|
|
>
|
|
Tooltip on start
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-html="true"
|
|
title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"
|
|
>
|
|
Tooltip with HTML
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
<div
|
|
class="modal fade"
|
|
id="exampleModalDefault"
|
|
tabindex="-1"
|
|
aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">...</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="modal fade"
|
|
id="staticBackdropLive"
|
|
data-bs-backdrop="static"
|
|
data-bs-keyboard="false"
|
|
tabindex="-1"
|
|
aria-labelledby="staticBackdropLiveLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="staticBackdropLiveLabel">
|
|
Modal title
|
|
</h1>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
I will not close if you click outside me. Don't even try to press
|
|
escape key.
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-primary">Understood</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="modal fade"
|
|
id="exampleModalCenteredScrollable"
|
|
tabindex="-1"
|
|
aria-labelledby="exampleModalCenteredScrollableTitle"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1
|
|
class="modal-title fs-5"
|
|
id="exampleModalCenteredScrollableTitle"
|
|
>
|
|
Modal title
|
|
</h1>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
This is some placeholder content to show the scrolling behavior
|
|
for modals. We use repeated line breaks to demonstrate how content
|
|
can exceed minimum inner height, thereby showing inner scrolling.
|
|
When content becomes longer than the predefined max-height of
|
|
modal, content will be cropped and scrollable within the modal.
|
|
</p>
|
|
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
|
|
<p>This content should appear at the bottom after you scroll.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Close
|
|
</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="modal fade"
|
|
id="exampleModalFullscreen"
|
|
tabindex="-1"
|
|
aria-labelledby="exampleModalFullscreenLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog modal-fullscreen">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">
|
|
Full screen modal
|
|
</h1>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">...</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script
|
|
src="../assets/dist/js/bootstrap.bundle.min.js"
|
|
class="astro-vvvwv3sm"
|
|
></script>
|
|
<script src="cheatsheet.js" class="astro-vvvwv3sm"></script>
|
|
</body>
|
|
</html>
|