mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-19 11:51:23 +02:00
Add v5.2.0-beta1 docs (#36338)
This commit is contained in:
XhmikosR
GitHub
1127
docs/5.2/utilities/api/index.html
Normal file
1127
docs/5.2/utilities/api/index.html
Normal file
File diff suppressed because it is too large
Load Diff
895
docs/5.2/utilities/background/index.html
Normal file
895
docs/5.2/utilities/background/index.html
Normal file
@@ -0,0 +1,895 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Convey meaning through background-color and add decoration with gradients.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Background · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/background/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Background">
|
||||
<meta name="twitter:description" content="Convey meaning through background-color and add decoration with gradients.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/background/">
|
||||
<meta property="og:title" content="Background">
|
||||
<meta property="og:description" content="Convey meaning through background-color and add decoration with gradients.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/background/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/background/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/utilities/background/">v5.0.2</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded active" aria-current="page">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/background.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Background</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Convey meaning through <code>background-color</code> and add decoration with gradients.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
|
||||
On this page
|
||||
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
|
||||
</button>
|
||||
<strong class="d-none d-md-block h6 my-2">On this page</strong>
|
||||
<hr class="d-none d-md-block my-2">
|
||||
<div class="collapse bd-toc-collapse" id="tocContents">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#background-color">Background color</a></li>
|
||||
<li><a href="#background-gradient">Background gradient</a></li>
|
||||
<li><a href="#opacity">Opacity</a>
|
||||
<ul>
|
||||
<li><a href="#how-it-works">How it works</a></li>
|
||||
<li><a href="#example">Example</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#map">Map</a></li>
|
||||
<li><a href="#mixins">Mixins</a></li>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="background-color">Background color <a class="anchor-link" href="#background-color" aria-label="Link to this section: Background color"></a></h2>
|
||||
<p>Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities <strong>do not set <code>color</code></strong>, so in some cases you’ll want to use <code>.text-*</code> <a href="/docs/5.2/utilities/colors/">color utilities</a>.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
|
||||
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
|
||||
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
|
||||
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
|
||||
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
|
||||
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
|
||||
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
|
||||
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
|
||||
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
|
||||
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
|
||||
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
|
||||
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-3 mb-2 bg-primary text-white"</span><span class="p">></span>.bg-primary<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-3 mb-2 bg-secondary text-white"</span><span class="p">></span>.bg-secondary<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-3 mb-2 bg-success text-white"</span><span class="p">></span>.bg-success<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-3 mb-2 bg-danger text-white"</span><span class="p">></span>.bg-danger<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-3 mb-2 bg-warning text-dark"</span><span class="p">></span>.bg-warning<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-3 mb-2 bg-info text-dark"</span><span class="p">></span>.bg-info<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-3 mb-2 bg-light text-dark"</span><span class="p">></span>.bg-light<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-3 mb-2 bg-dark text-white"</span><span class="p">></span>.bg-dark<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-3 mb-2 bg-body text-dark"</span><span class="p">></span>.bg-body<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-3 mb-2 bg-white text-dark"</span><span class="p">></span>.bg-white<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-3 mb-2 bg-transparent text-dark"</span><span class="p">></span>.bg-transparent<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="background-gradient">Background gradient <a class="anchor-link" href="#background-gradient" aria-label="Link to this section: Background gradient"></a></h2>
|
||||
<p>By adding a <code>.bg-gradient</code> class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.</p>
|
||||
<p>Do you need a gradient in your custom CSS? Just add <code>background-image: var(--bs-gradient);</code>.</p>
|
||||
<div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary.bg-gradient</div>
|
||||
<div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary.bg-gradient</div>
|
||||
<div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success.bg-gradient</div>
|
||||
<div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger.bg-gradient</div>
|
||||
<div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning.bg-gradient</div>
|
||||
<div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info.bg-gradient</div>
|
||||
<div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light.bg-gradient</div>
|
||||
<div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark.bg-gradient</div>
|
||||
|
||||
<h2 id="opacity">Opacity <a class="anchor-link" href="#opacity" aria-label="Link to this section: Opacity"></a></h2>
|
||||
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.1.0</small>
|
||||
|
||||
<p>As of v5.1.0, <code>background-color</code> utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.</p>
|
||||
<h3 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h3>
|
||||
<p>Consider our default <code>.bg-success</code> utility.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">bg-success</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nv">--bs-bg-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">success</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">bg</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div><p>We use an RGB version of our <code>--bs-success</code> (with the value of <code>25, 135, 84</code>) CSS variable and attached a second CSS variable, <code>--bs-bg-opacity</code>, for the alpha transparency (with a default value <code>1</code> thanks to a local CSS variable). That means anytime you use <code>.bg-success</code> now, your computed <code>color</code> value is <code>rgba(25, 135, 84, 1)</code>. The local CSS variable inside each <code>.bg-*</code> class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.</p>
|
||||
<h3 id="example">Example <a class="anchor-link" href="#example" aria-label="Link to this section: Example"></a></h3>
|
||||
<p>To change that opacity, override <code>--bs-bg-opacity</code> via custom styles or inline styles.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="bg-success p-2 text-white">This is default success background</div>
|
||||
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-success p-2 text-white"</span><span class="p">></span>This is default success background<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-success p-2"</span> <span class="na">style</span><span class="o">=</span><span class="s">"--bs-bg-opacity: .5;"</span><span class="p">></span>This is 50% opacity success background<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<p>Or, choose from any of the <code>.bg-opacity</code> utilities:</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="bg-success p-2 text-white">This is default success background</div>
|
||||
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
|
||||
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
|
||||
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
|
||||
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-success p-2 text-white"</span><span class="p">></span>This is default success background<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-success p-2 text-white bg-opacity-75"</span><span class="p">></span>This is 75% opacity success background<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-success p-2 text-dark bg-opacity-50"</span><span class="p">></span>This is 50% opacity success background<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-success p-2 text-dark bg-opacity-25"</span><span class="p">></span>This is 25% opacity success background<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-success p-2 text-dark bg-opacity-10"</span><span class="p">></span>This is 10% opacity success background<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<p>In addition to the following Sass functionality, consider reading about our included <a href="/docs/5.2/customize/css-variables/">CSS custom properties</a> (aka CSS variables) for colors and more.</p>
|
||||
<h3 id="variables">Variables <a class="anchor-link" href="#variables" aria-label="Link to this section: Variables"></a></h3>
|
||||
<p>Most <code>background-color</code> utilities are generated by our theme colors, reassigned from our generic color palette variables.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$blue</span><span class="o">:</span> <span class="mh">#0d6efd</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$indigo</span><span class="o">:</span> <span class="mh">#6610f2</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$purple</span><span class="o">:</span> <span class="mh">#6f42c1</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$pink</span><span class="o">:</span> <span class="mh">#d63384</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$red</span><span class="o">:</span> <span class="mh">#dc3545</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$orange</span><span class="o">:</span> <span class="mh">#fd7e14</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$yellow</span><span class="o">:</span> <span class="mh">#ffc107</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$green</span><span class="o">:</span> <span class="mh">#198754</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$teal</span><span class="o">:</span> <span class="mh">#20c997</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$cyan</span><span class="o">:</span> <span class="mh">#0dcaf0</span><span class="p">;</span>
|
||||
</span></span></code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$primary</span><span class="o">:</span> <span class="nv">$blue</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$secondary</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$success</span><span class="o">:</span> <span class="nv">$green</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$info</span><span class="o">:</span> <span class="nv">$cyan</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$warning</span><span class="o">:</span> <span class="nv">$yellow</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$danger</span><span class="o">:</span> <span class="nv">$red</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$light</span><span class="o">:</span> <span class="nv">$gray-100</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$dark</span><span class="o">:</span> <span class="nv">$gray-900</span><span class="p">;</span>
|
||||
</span></span></code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$gradient</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="mi">180</span><span class="kt">deg</span><span class="o">,</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mf">.15</span><span class="p">)</span><span class="o">,</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mi">0</span><span class="p">));</span>
|
||||
</span></span></code></pre></div>
|
||||
<p>Grayscale colors are also available, but only a subset are used to generate any utilities.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$white</span><span class="o">:</span> <span class="mh">#fff</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-100</span><span class="o">:</span> <span class="mh">#f8f9fa</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-200</span><span class="o">:</span> <span class="mh">#e9ecef</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-300</span><span class="o">:</span> <span class="mh">#dee2e6</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-400</span><span class="o">:</span> <span class="mh">#ced4da</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-500</span><span class="o">:</span> <span class="mh">#adb5bd</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-600</span><span class="o">:</span> <span class="mh">#6c757d</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-700</span><span class="o">:</span> <span class="mh">#495057</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-800</span><span class="o">:</span> <span class="mh">#343a40</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-900</span><span class="o">:</span> <span class="mh">#212529</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$black</span><span class="o">:</span> <span class="mh">#000</span><span class="p">;</span>
|
||||
</span></span></code></pre></div>
|
||||
<h3 id="map">Map <a class="anchor-link" href="#map" aria-label="Link to this section: Map"></a></h3>
|
||||
<p>Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"primary"</span><span class="o">:</span> <span class="nv">$primary</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"secondary"</span><span class="o">:</span> <span class="nv">$secondary</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"success"</span><span class="o">:</span> <span class="nv">$success</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"info"</span><span class="o">:</span> <span class="nv">$info</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"warning"</span><span class="o">:</span> <span class="nv">$warning</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"danger"</span><span class="o">:</span> <span class="nv">$danger</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"light"</span><span class="o">:</span> <span class="nv">$light</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"dark"</span><span class="o">:</span> <span class="nv">$dark</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">);</span>
|
||||
</span></span></code></pre></div>
|
||||
<p>Grayscale colors are also available as a Sass map. <strong>This map is not used to generate any utilities.</strong></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$grays</span><span class="o">:</span> <span class="p">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"100"</span><span class="o">:</span> <span class="nv">$gray-100</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"200"</span><span class="o">:</span> <span class="nv">$gray-200</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"300"</span><span class="o">:</span> <span class="nv">$gray-300</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"400"</span><span class="o">:</span> <span class="nv">$gray-400</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"500"</span><span class="o">:</span> <span class="nv">$gray-500</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"600"</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"700"</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"800"</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"900"</span><span class="o">:</span> <span class="nv">$gray-900</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">);</span>
|
||||
</span></span></code></pre></div>
|
||||
<p>RGB colors are generated from a separate Sass map:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$theme-colors-rgb</span><span class="o">:</span> <span class="nf">map-loop</span><span class="p">(</span><span class="nv">$theme-colors</span><span class="o">,</span> <span class="n">to-rgb</span><span class="o">,</span> <span class="s2">"$value"</span><span class="p">);</span>
|
||||
</span></span></code></pre></div>
|
||||
<p>And background color opacities build on that with their own map that’s consumed by the utilities API:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities-bg</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nv">$utilities-colors</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"black"</span><span class="o">:</span> <span class="nf">to-rgb</span><span class="p">(</span><span class="nv">$black</span><span class="p">)</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"white"</span><span class="o">:</span> <span class="nf">to-rgb</span><span class="p">(</span><span class="nv">$white</span><span class="p">)</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"body"</span><span class="o">:</span> <span class="nf">to-rgb</span><span class="p">(</span><span class="nv">$body-bg</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$utilities-bg-colors</span><span class="o">:</span> <span class="nf">map-loop</span><span class="p">(</span><span class="nv">$utilities-bg</span><span class="o">,</span> <span class="n">rgba-css-var</span><span class="o">,</span> <span class="s2">"$key"</span><span class="o">,</span> <span class="s2">"bg"</span><span class="p">);</span>
|
||||
</span></span></code></pre></div>
|
||||
<h3 id="mixins">Mixins <a class="anchor-link" href="#mixins" aria-label="Link to this section: Mixins"></a></h3>
|
||||
<p><strong>No mixins are used to generate our background utilities</strong>, but we do have some additional mixins for other situations where you’d like to create your own gradients.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="k">@mixin</span><span class="nf"> gradient-bg</span><span class="p">(</span><span class="nv">$color</span><span class="o">:</span> <span class="n">null</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">background-color</span><span class="o">:</span> <span class="nv">$color</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">@if</span> <span class="nv">$enable-gradients</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">background-image</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$prefix</span><span class="si">}</span><span class="n">gradient</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="c1">// Horizontal gradient, from left to right
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1">//
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1">// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">@mixin</span><span class="nf"> gradient-x</span><span class="p">(</span><span class="nv">$start-color</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="o">,</span> <span class="nv">$end-color</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="o">,</span> <span class="nv">$start-percent</span><span class="o">:</span> <span class="mi">0</span><span class="kt">%</span><span class="o">,</span> <span class="nv">$end-percent</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="n">to</span> <span class="ni">right</span><span class="o">,</span> <span class="nv">$start-color</span> <span class="nv">$start-percent</span><span class="o">,</span> <span class="nv">$end-color</span> <span class="nv">$end-percent</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// Vertical gradient, from top to bottom
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1">//
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1">// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">@mixin</span><span class="nf"> gradient-y</span><span class="p">(</span><span class="nv">$start-color</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="o">,</span> <span class="nv">$end-color</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="o">,</span> <span class="nv">$start-percent</span><span class="o">:</span> <span class="n">null</span><span class="o">,</span> <span class="nv">$end-percent</span><span class="o">:</span> <span class="n">null</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="n">to</span> <span class="ni">bottom</span><span class="o">,</span> <span class="nv">$start-color</span> <span class="nv">$start-percent</span><span class="o">,</span> <span class="nv">$end-color</span> <span class="nv">$end-percent</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@mixin</span><span class="nf"> gradient-directional</span><span class="p">(</span><span class="nv">$start-color</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="o">,</span> <span class="nv">$end-color</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="o">,</span> <span class="nv">$deg</span><span class="o">:</span> <span class="mi">45</span><span class="kt">deg</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="nv">$deg</span><span class="o">,</span> <span class="nv">$start-color</span><span class="o">,</span> <span class="nv">$end-color</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@mixin</span><span class="nf"> gradient-x-three-colors</span><span class="p">(</span><span class="nv">$start-color</span><span class="o">:</span> <span class="nv">$blue</span><span class="o">,</span> <span class="nv">$mid-color</span><span class="o">:</span> <span class="nv">$purple</span><span class="o">,</span> <span class="nv">$color-stop</span><span class="o">:</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="nv">$end-color</span><span class="o">:</span> <span class="nv">$red</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="n">to</span> <span class="ni">right</span><span class="o">,</span> <span class="nv">$start-color</span><span class="o">,</span> <span class="nv">$mid-color</span> <span class="nv">$color-stop</span><span class="o">,</span> <span class="nv">$end-color</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@mixin</span><span class="nf"> gradient-y-three-colors</span><span class="p">(</span><span class="nv">$start-color</span><span class="o">:</span> <span class="nv">$blue</span><span class="o">,</span> <span class="nv">$mid-color</span><span class="o">:</span> <span class="nv">$purple</span><span class="o">,</span> <span class="nv">$color-stop</span><span class="o">:</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="nv">$end-color</span><span class="o">:</span> <span class="nv">$red</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="nv">$start-color</span><span class="o">,</span> <span class="nv">$mid-color</span> <span class="nv">$color-stop</span><span class="o">,</span> <span class="nv">$end-color</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@mixin</span><span class="nf"> gradient-radial</span><span class="p">(</span><span class="nv">$inner-color</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="o">,</span> <span class="nv">$outer-color</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">background-image</span><span class="o">:</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="ni">circle</span><span class="o">,</span> <span class="nv">$inner-color</span><span class="o">,</span> <span class="nv">$outer-color</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@mixin</span><span class="nf"> gradient-striped</span><span class="p">(</span><span class="nv">$color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mf">.15</span><span class="p">)</span><span class="o">,</span> <span class="nv">$angle</span><span class="o">:</span> <span class="mi">45</span><span class="kt">deg</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="nv">$angle</span><span class="o">,</span> <span class="nv">$color</span> <span class="mi">25</span><span class="kt">%</span><span class="o">,</span> <span class="ni">transparent</span> <span class="mi">25</span><span class="kt">%</span><span class="o">,</span> <span class="ni">transparent</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="nv">$color</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="nv">$color</span> <span class="mi">75</span><span class="kt">%</span><span class="o">,</span> <span class="ni">transparent</span> <span class="mi">75</span><span class="kt">%</span><span class="o">,</span> <span class="ni">transparent</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div>
|
||||
<h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Background utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"background-color"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">background-color</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">bg</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">local-vars</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"bg-opacity"</span><span class="nd">:</span> <span class="nt">1</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="err">$</span><span class="nt">utilities-bg-colors</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"transparent"</span><span class="nd">:</span> <span class="nt">transparent</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"bg-opacity"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">css-var</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">bg-opacity</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">10</span><span class="nd">:</span> <span class="nc">.1</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">25</span><span class="nd">:</span> <span class="nc">.25</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">50</span><span class="nd">:</span> <span class="nc">.5</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">75</span><span class="nd">:</span> <span class="nc">.75</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">100</span><span class="nd">:</span> <span class="nt">1</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1115
docs/5.2/utilities/borders/index.html
Normal file
1115
docs/5.2/utilities/borders/index.html
Normal file
File diff suppressed because it is too large
Load Diff
851
docs/5.2/utilities/colors/index.html
Normal file
851
docs/5.2/utilities/colors/index.html
Normal file
@@ -0,0 +1,851 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Colors · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/colors/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Colors">
|
||||
<meta name="twitter:description" content="Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/colors/">
|
||||
<meta property="og:title" content="Colors">
|
||||
<meta property="og:description" content="Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/colors/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/colors/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/utilities/colors/">v5.0.2</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded active" aria-current="page">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/colors.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Colors</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Convey meaning through <code>color</code> with a handful of color utility classes. Includes support for styling links with hover states, too.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
|
||||
On this page
|
||||
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
|
||||
</button>
|
||||
<strong class="d-none d-md-block h6 my-2">On this page</strong>
|
||||
<hr class="d-none d-md-block my-2">
|
||||
<div class="collapse bd-toc-collapse" id="tocContents">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#opacity">Opacity</a>
|
||||
<ul>
|
||||
<li><a href="#how-it-works">How it works</a></li>
|
||||
<li><a href="#example">Example</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#specificity">Specificity</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#map">Map</a></li>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="colors">Colors <a class="anchor-link" href="#colors" aria-label="Link to this section: Colors"></a></h2>
|
||||
<p>Colorize text with color utilities. If you want to colorize links, you can use the <a href="/docs/5.2/helpers/colored-links/"><code>.link-*</code> helper classes</a> which have <code>:hover</code> and <code>:focus</code> states.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
|
||||
<p class="text-primary">.text-primary</p>
|
||||
<p class="text-secondary">.text-secondary</p>
|
||||
<p class="text-success">.text-success</p>
|
||||
<p class="text-danger">.text-danger</p>
|
||||
<p class="text-warning bg-dark">.text-warning</p>
|
||||
<p class="text-info bg-dark">.text-info</p>
|
||||
<p class="text-light bg-dark">.text-light</p>
|
||||
<p class="text-dark">.text-dark</p>
|
||||
<p class="text-body">.text-body</p>
|
||||
<p class="text-muted">.text-muted</p>
|
||||
<p class="text-white bg-dark">.text-white</p>
|
||||
<p class="text-black-50">.text-black-50</p>
|
||||
<p class="text-white-50 bg-dark">.text-white-50</p>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary"</span><span class="p">></span>.text-primary<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-secondary"</span><span class="p">></span>.text-secondary<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-success"</span><span class="p">></span>.text-success<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-danger"</span><span class="p">></span>.text-danger<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-warning bg-dark"</span><span class="p">></span>.text-warning<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-info bg-dark"</span><span class="p">></span>.text-info<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-light bg-dark"</span><span class="p">></span>.text-light<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-dark"</span><span class="p">></span>.text-dark<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-body"</span><span class="p">></span>.text-body<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>.text-muted<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-white bg-dark"</span><span class="p">></span>.text-white<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-black-50"</span><span class="p">></span>.text-black-50<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-white-50 bg-dark"</span><span class="p">></span>.text-white-50<span class="p"></</span><span class="nt">p</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<strong>Deprecation:</strong> With the addition of <code>.text-opacity-*</code> utilities and CSS variables for text utilities, <code>.text-black-50</code> and <code>.text-white-50</code> are deprecated as of v5.1.0. They’ll be removed in v6.0.0.
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies <a class="anchor-link" href="#conveying-meaning-to-assistive-technologies" aria-label="Link to this section: Conveying meaning to assistive technologies"></a></h5>
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.
|
||||
</div>
|
||||
|
||||
<h2 id="opacity">Opacity <a class="anchor-link" href="#opacity" aria-label="Link to this section: Opacity"></a></h2>
|
||||
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.1.0</small>
|
||||
|
||||
<p>As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.</p>
|
||||
<h3 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h3>
|
||||
<p>Consider our default <code>.text-primary</code> utility.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">text-primary</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nv">--bs-text-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">primary</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div><p>We use an RGB version of our <code>--bs-primary</code> (with the value of <code>13, 110, 253</code>) CSS variable and attached a second CSS variable, <code>--bs-text-opacity</code>, for the alpha transparency (with a default value <code>1</code> thanks to a local CSS variable). That means anytime you use <code>.text-primary</code> now, your computed <code>color</code> value is <code>rgba(13, 110, 253, 1)</code>. The local CSS variable inside each <code>.text-*</code> class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.</p>
|
||||
<h3 id="example">Example <a class="anchor-link" href="#example" aria-label="Link to this section: Example"></a></h3>
|
||||
<p>To change that opacity, override <code>--bs-text-opacity</code> via custom styles or inline styles.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="text-primary">This is default primary text</div>
|
||||
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary"</span><span class="p">></span>This is default primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary"</span> <span class="na">style</span><span class="o">=</span><span class="s">"--bs-text-opacity: .5;"</span><span class="p">></span>This is 50% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<p>Or, choose from any of the <code>.text-opacity</code> utilities:</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="text-primary">This is default primary text</div>
|
||||
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
|
||||
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
|
||||
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary"</span><span class="p">></span>This is default primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-75"</span><span class="p">></span>This is 75% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-50"</span><span class="p">></span>This is 50% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-25"</span><span class="p">></span>This is 25% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="specificity">Specificity <a class="anchor-link" href="#specificity" aria-label="Link to this section: Specificity"></a></h2>
|
||||
<p>Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <code><div></code> or more semantic element with the desired class.</p>
|
||||
<h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<p>In addition to the following Sass functionality, consider reading about our included <a href="/docs/5.2/customize/css-variables/">CSS custom properties</a> (aka CSS variables) for colors and more.</p>
|
||||
<h3 id="variables">Variables <a class="anchor-link" href="#variables" aria-label="Link to this section: Variables"></a></h3>
|
||||
<p>Most <code>color</code> utilities are generated by our theme colors, reassigned from our generic color palette variables.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$blue</span><span class="o">:</span> <span class="mh">#0d6efd</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$indigo</span><span class="o">:</span> <span class="mh">#6610f2</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$purple</span><span class="o">:</span> <span class="mh">#6f42c1</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$pink</span><span class="o">:</span> <span class="mh">#d63384</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$red</span><span class="o">:</span> <span class="mh">#dc3545</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$orange</span><span class="o">:</span> <span class="mh">#fd7e14</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$yellow</span><span class="o">:</span> <span class="mh">#ffc107</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$green</span><span class="o">:</span> <span class="mh">#198754</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$teal</span><span class="o">:</span> <span class="mh">#20c997</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$cyan</span><span class="o">:</span> <span class="mh">#0dcaf0</span><span class="p">;</span>
|
||||
</span></span></code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$primary</span><span class="o">:</span> <span class="nv">$blue</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$secondary</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$success</span><span class="o">:</span> <span class="nv">$green</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$info</span><span class="o">:</span> <span class="nv">$cyan</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$warning</span><span class="o">:</span> <span class="nv">$yellow</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$danger</span><span class="o">:</span> <span class="nv">$red</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$light</span><span class="o">:</span> <span class="nv">$gray-100</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$dark</span><span class="o">:</span> <span class="nv">$gray-900</span><span class="p">;</span>
|
||||
</span></span></code></pre></div>
|
||||
<p>Grayscale colors are also available, but only a subset are used to generate any utilities.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$white</span><span class="o">:</span> <span class="mh">#fff</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-100</span><span class="o">:</span> <span class="mh">#f8f9fa</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-200</span><span class="o">:</span> <span class="mh">#e9ecef</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-300</span><span class="o">:</span> <span class="mh">#dee2e6</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-400</span><span class="o">:</span> <span class="mh">#ced4da</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-500</span><span class="o">:</span> <span class="mh">#adb5bd</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-600</span><span class="o">:</span> <span class="mh">#6c757d</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-700</span><span class="o">:</span> <span class="mh">#495057</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-800</span><span class="o">:</span> <span class="mh">#343a40</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$gray-900</span><span class="o">:</span> <span class="mh">#212529</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$black</span><span class="o">:</span> <span class="mh">#000</span><span class="p">;</span>
|
||||
</span></span></code></pre></div>
|
||||
<h3 id="map">Map <a class="anchor-link" href="#map" aria-label="Link to this section: Map"></a></h3>
|
||||
<p>Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"primary"</span><span class="o">:</span> <span class="nv">$primary</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"secondary"</span><span class="o">:</span> <span class="nv">$secondary</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"success"</span><span class="o">:</span> <span class="nv">$success</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"info"</span><span class="o">:</span> <span class="nv">$info</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"warning"</span><span class="o">:</span> <span class="nv">$warning</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"danger"</span><span class="o">:</span> <span class="nv">$danger</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"light"</span><span class="o">:</span> <span class="nv">$light</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"dark"</span><span class="o">:</span> <span class="nv">$dark</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">);</span>
|
||||
</span></span></code></pre></div>
|
||||
<p>Grayscale colors are also available as a Sass map. <strong>This map is not used to generate any utilities.</strong></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$grays</span><span class="o">:</span> <span class="p">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"100"</span><span class="o">:</span> <span class="nv">$gray-100</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"200"</span><span class="o">:</span> <span class="nv">$gray-200</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"300"</span><span class="o">:</span> <span class="nv">$gray-300</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"400"</span><span class="o">:</span> <span class="nv">$gray-400</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"500"</span><span class="o">:</span> <span class="nv">$gray-500</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"600"</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"700"</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"800"</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"900"</span><span class="o">:</span> <span class="nv">$gray-900</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">);</span>
|
||||
</span></span></code></pre></div>
|
||||
<p>RGB colors are generated from a separate Sass map:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$theme-colors-rgb</span><span class="o">:</span> <span class="nf">map-loop</span><span class="p">(</span><span class="nv">$theme-colors</span><span class="o">,</span> <span class="n">to-rgb</span><span class="o">,</span> <span class="s2">"$value"</span><span class="p">);</span>
|
||||
</span></span></code></pre></div>
|
||||
<p>And color opacities build on that with their own map that’s consumed by the utilities API:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities-text</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nv">$utilities-colors</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"black"</span><span class="o">:</span> <span class="nf">to-rgb</span><span class="p">(</span><span class="nv">$black</span><span class="p">)</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"white"</span><span class="o">:</span> <span class="nf">to-rgb</span><span class="p">(</span><span class="nv">$white</span><span class="p">)</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"body"</span><span class="o">:</span> <span class="nf">to-rgb</span><span class="p">(</span><span class="nv">$body-color</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$utilities-text-colors</span><span class="o">:</span> <span class="nf">map-loop</span><span class="p">(</span><span class="nv">$utilities-text</span><span class="o">,</span> <span class="n">rgba-css-var</span><span class="o">,</span> <span class="s2">"$key"</span><span class="o">,</span> <span class="s2">"text"</span><span class="p">);</span>
|
||||
</span></span></code></pre></div>
|
||||
<h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Color utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"color"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">color</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">text</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">local-vars</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"text-opacity"</span><span class="nd">:</span> <span class="nt">1</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="err">$</span><span class="nt">utilities-text-colors</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"muted"</span><span class="nd">:</span> <span class="err">$</span><span class="nt">text-muted</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"black-50"</span><span class="nd">:</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">$</span><span class="nt">black</span><span class="o">,</span> <span class="nc">.5</span><span class="o">),</span> <span class="o">//</span> <span class="nt">deprecated</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"white-50"</span><span class="nd">:</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">$</span><span class="nt">white</span><span class="o">,</span> <span class="nc">.5</span><span class="o">),</span> <span class="o">//</span> <span class="nt">deprecated</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"reset"</span><span class="nd">:</span> <span class="nt">inherit</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"text-opacity"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">css-var</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">text-opacity</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">25</span><span class="nd">:</span> <span class="nc">.25</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">50</span><span class="nd">:</span> <span class="nc">.5</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">75</span><span class="nd">:</span> <span class="nc">.75</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">100</span><span class="nd">:</span> <span class="nt">1</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
826
docs/5.2/utilities/display/index.html
Normal file
826
docs/5.2/utilities/display/index.html
Normal file
@@ -0,0 +1,826 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Display property · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/display/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Display property">
|
||||
<meta name="twitter:description" content="Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/display/">
|
||||
<meta property="og:title" content="Display property">
|
||||
<meta property="og:description" content="Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/display/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/display/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/utilities/display/">v5.0.2</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded active" aria-current="page">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/display.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Display property</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
|
||||
On this page
|
||||
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
|
||||
</button>
|
||||
<strong class="d-none d-md-block h6 my-2">On this page</strong>
|
||||
<hr class="d-none d-md-block my-2">
|
||||
<div class="collapse bd-toc-collapse" id="tocContents">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#how-it-works">How it works</a></li>
|
||||
<li><a href="#notation">Notation</a></li>
|
||||
<li><a href="#examples">Examples</a></li>
|
||||
<li><a href="#hiding-elements">Hiding elements</a></li>
|
||||
<li><a href="#display-in-print">Display in print</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
|
||||
<p>Change the value of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code> property</a> with our responsive display utility classes. We purposely support only a subset of all possible values for <code>display</code>. Classes can be combined for various effects as you need.</p>
|
||||
<h2 id="notation">Notation <a class="anchor-link" href="#notation" aria-label="Link to this section: Notation"></a></h2>
|
||||
<p>Display utility classes that apply to all <a href="/docs/5.2/layout/breakpoints/">breakpoints</a>, from <code>xs</code> to <code>xxl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code>min-width: 0;</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
|
||||
<p>As such, the classes are named using the format:</p>
|
||||
<ul>
|
||||
<li><code>.d-{value}</code> for <code>xs</code></li>
|
||||
<li><code>.d-{breakpoint}-{value}</code> for <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>xxl</code>.</li>
|
||||
</ul>
|
||||
<p>Where <em>value</em> is one of:</p>
|
||||
<ul>
|
||||
<li><code>none</code></li>
|
||||
<li><code>inline</code></li>
|
||||
<li><code>inline-block</code></li>
|
||||
<li><code>block</code></li>
|
||||
<li><code>grid</code></li>
|
||||
<li><code>table</code></li>
|
||||
<li><code>table-cell</code></li>
|
||||
<li><code>table-row</code></li>
|
||||
<li><code>flex</code></li>
|
||||
<li><code>inline-flex</code></li>
|
||||
</ul>
|
||||
<p>The display values can be altered by changing the <code>$displays</code> variable and recompiling the SCSS.</p>
|
||||
<p>The media queries affect screen widths with the given breakpoint <em>or larger</em>. For example, <code>.d-lg-none</code> sets <code>display: none;</code> on <code>lg</code>, <code>xl</code>, and <code>xxl</code> screens.</p>
|
||||
<h2 id="examples">Examples <a class="anchor-link" href="#examples" aria-label="Link to this section: Examples"></a></h2>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
|
||||
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-inline p-2 bg-primary text-white"</span><span class="p">></span>d-inline<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-inline p-2 bg-dark text-white"</span><span class="p">></span>d-inline<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<span class="d-block p-2 bg-primary text-white">d-block</span>
|
||||
<span class="d-block p-2 bg-dark text-white">d-block</span>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-block p-2 bg-primary text-white"</span><span class="p">></span>d-block<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-block p-2 bg-dark text-white"</span><span class="p">></span>d-block<span class="p"></</span><span class="nt">span</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="hiding-elements">Hiding elements <a class="anchor-link" href="#hiding-elements" aria-label="Link to this section: Hiding elements"></a></h2>
|
||||
<p>For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.</p>
|
||||
<p>To hide elements simply use the <code>.d-none</code> class or one of the <code>.d-{sm,md,lg,xl,xxl}-none</code> classes for any responsive screen variation.</p>
|
||||
<p>To show an element only on a given interval of screen sizes you can combine one <code>.d-*-none</code> class with a <code>.d-*-*</code> class, for example <code>.d-none .d-md-block .d-xl-none .d-xxl-none</code> will hide the element for all screen sizes except on medium and large devices.</p>
|
||||
<div class="table-responsive"><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Screen size</th>
|
||||
<th>Class</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Hidden on all</td>
|
||||
<td><code>.d-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on xs</td>
|
||||
<td><code>.d-none .d-sm-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on sm</td>
|
||||
<td><code>.d-sm-none .d-md-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on md</td>
|
||||
<td><code>.d-md-none .d-lg-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on lg</td>
|
||||
<td><code>.d-lg-none .d-xl-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on xl</td>
|
||||
<td><code>.d-xl-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on xxl</td>
|
||||
<td><code>.d-xxl-none .d-xxl-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible on all</td>
|
||||
<td><code>.d-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on xs</td>
|
||||
<td><code>.d-block .d-sm-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on sm</td>
|
||||
<td><code>.d-none .d-sm-block .d-md-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on md</td>
|
||||
<td><code>.d-none .d-md-block .d-lg-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on lg</td>
|
||||
<td><code>.d-none .d-lg-block .d-xl-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on xl</td>
|
||||
<td><code>.d-none .d-xl-block .d-xxl-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on xxl</td>
|
||||
<td><code>.d-none .d-xxl-block</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="d-lg-none">hide on lg and wider screens</div>
|
||||
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-lg-none"</span><span class="p">></span>hide on lg and wider screens<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-none d-lg-block"</span><span class="p">></span>hide on screens smaller than lg<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="display-in-print">Display in print <a class="anchor-link" href="#display-in-print" aria-label="Link to this section: Display in print"></a></h2>
|
||||
<p>Change the <code>display</code> value of elements when printing with our print display utility classes. Includes support for the same <code>display</code> values as our responsive <code>.d-*</code> utilities.</p>
|
||||
<ul>
|
||||
<li><code>.d-print-none</code></li>
|
||||
<li><code>.d-print-inline</code></li>
|
||||
<li><code>.d-print-inline-block</code></li>
|
||||
<li><code>.d-print-block</code></li>
|
||||
<li><code>.d-print-grid</code></li>
|
||||
<li><code>.d-print-table</code></li>
|
||||
<li><code>.d-print-table-row</code></li>
|
||||
<li><code>.d-print-table-cell</code></li>
|
||||
<li><code>.d-print-flex</code></li>
|
||||
<li><code>.d-print-inline-flex</code></li>
|
||||
</ul>
|
||||
<p>The print and display classes can be combined.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="d-print-none">Screen Only (Hide on print only)</div>
|
||||
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
|
||||
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-print-none"</span><span class="p">></span>Screen Only (Hide on print only)<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-none d-print-block"</span><span class="p">></span>Print Only (Hide on screen only)<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-none d-lg-block d-print-block"</span><span class="p">></span>Hide up to large on screen, but always show on print<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Display utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"display"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">print</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">display</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">d</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">inline</span> <span class="nt">inline-block</span> <span class="nt">block</span> <span class="nt">grid</span> <span class="nt">table</span> <span class="nt">table-row</span> <span class="nt">table-cell</span> <span class="nt">flex</span> <span class="nt">inline-flex</span> <span class="nt">none</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1672
docs/5.2/utilities/flex/index.html
Normal file
1672
docs/5.2/utilities/flex/index.html
Normal file
File diff suppressed because it is too large
Load Diff
712
docs/5.2/utilities/float/index.html
Normal file
712
docs/5.2/utilities/float/index.html
Normal file
@@ -0,0 +1,712 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Toggle floats on any element, across any breakpoint, using our responsive float utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Float · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/float/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Float">
|
||||
<meta name="twitter:description" content="Toggle floats on any element, across any breakpoint, using our responsive float utilities.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/float/">
|
||||
<meta property="og:title" content="Float">
|
||||
<meta property="og:description" content="Toggle floats on any element, across any breakpoint, using our responsive float utilities.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/float/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/float/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/utilities/float/">v5.0.2</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded active" aria-current="page">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/float.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Float</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Toggle floats on any element, across any breakpoint, using our responsive float utilities.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
|
||||
On this page
|
||||
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
|
||||
</button>
|
||||
<strong class="d-none d-md-block h6 my-2">On this page</strong>
|
||||
<hr class="d-none d-md-block my-2">
|
||||
<div class="collapse bd-toc-collapse" id="tocContents">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#overview">Overview</a></li>
|
||||
<li><a href="#responsive">Responsive</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
|
||||
<p>These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">CSS <code>float</code> property</a>. <code>!important</code> is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="float-start">Float start on all viewport sizes</div><br>
|
||||
<div class="float-end">Float end on all viewport sizes</div><br>
|
||||
<div class="float-none">Don't float on all viewport sizes</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"float-start"</span><span class="p">></span>Float start on all viewport sizes<span class="p"></</span><span class="nt">div</span><span class="p">><</span><span class="nt">br</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"float-end"</span><span class="p">></span>Float end on all viewport sizes<span class="p"></</span><span class="nt">div</span><span class="p">><</span><span class="nt">br</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"float-none"</span><span class="p">></span>Don't float on all viewport sizes<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="responsive">Responsive <a class="anchor-link" href="#responsive" aria-label="Link to this section: Responsive"></a></h2>
|
||||
<p>Responsive variations also exist for each <code>float</code> value.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
|
||||
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
|
||||
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
|
||||
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"float-sm-start"</span><span class="p">></span>Float start on viewports sized SM (small) or wider<span class="p"></</span><span class="nt">div</span><span class="p">><</span><span class="nt">br</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"float-md-start"</span><span class="p">></span>Float start on viewports sized MD (medium) or wider<span class="p"></</span><span class="nt">div</span><span class="p">><</span><span class="nt">br</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"float-lg-start"</span><span class="p">></span>Float start on viewports sized LG (large) or wider<span class="p"></</span><span class="nt">div</span><span class="p">><</span><span class="nt">br</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"float-xl-start"</span><span class="p">></span>Float start on viewports sized XL (extra-large) or wider<span class="p"></</span><span class="nt">div</span><span class="p">><</span><span class="nt">br</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<p>Here are all the support classes:</p>
|
||||
<ul>
|
||||
<li><code>.float-start</code></li>
|
||||
<li><code>.float-end</code></li>
|
||||
<li><code>.float-none</code></li>
|
||||
<li><code>.float-sm-start</code></li>
|
||||
<li><code>.float-sm-end</code></li>
|
||||
<li><code>.float-sm-none</code></li>
|
||||
<li><code>.float-md-start</code></li>
|
||||
<li><code>.float-md-end</code></li>
|
||||
<li><code>.float-md-none</code></li>
|
||||
<li><code>.float-lg-start</code></li>
|
||||
<li><code>.float-lg-end</code></li>
|
||||
<li><code>.float-lg-none</code></li>
|
||||
<li><code>.float-xl-start</code></li>
|
||||
<li><code>.float-xl-end</code></li>
|
||||
<li><code>.float-xl-none</code></li>
|
||||
<li><code>.float-xxl-start</code></li>
|
||||
<li><code>.float-xxl-end</code></li>
|
||||
<li><code>.float-xxl-none</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Float utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"float"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">float</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">start</span><span class="nd">:</span> <span class="nt">left</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">end</span><span class="nd">:</span> <span class="nt">right</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">none</span><span class="nd">:</span> <span class="nt">none</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
12
docs/5.2/utilities/index.html
Normal file
12
docs/5.2/utilities/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>https://getbootstrap.com/docs/5.2/utilities/api/</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/api/">
|
||||
<meta name="robots" content="noindex">
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/5.2/utilities/api/">
|
||||
</head>
|
||||
</html>
|
||||
|
||||
674
docs/5.2/utilities/interactions/index.html
Normal file
674
docs/5.2/utilities/interactions/index.html
Normal file
@@ -0,0 +1,674 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Utility classes that change how users interact with contents of a website.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Interactions · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/interactions/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Interactions">
|
||||
<meta name="twitter:description" content="Utility classes that change how users interact with contents of a website.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/interactions/">
|
||||
<meta property="og:title" content="Interactions">
|
||||
<meta property="og:description" content="Utility classes that change how users interact with contents of a website.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/interactions/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/interactions/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/utilities/interactions/">v5.0.2</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded active" aria-current="page">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/interactions.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Interactions</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Utility classes that change how users interact with contents of a website.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="text-selection">Text selection <a class="anchor-link" href="#text-selection" aria-label="Link to this section: Text selection"></a></h2>
|
||||
<p>Change the way in which the content is selected when the user interacts with it.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
|
||||
<p class="user-select-auto">This paragraph has default select behavior.</p>
|
||||
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"user-select-all"</span><span class="p">></span>This paragraph will be entirely selected when clicked by the user.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"user-select-auto"</span><span class="p">></span>This paragraph has default select behavior.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"user-select-none"</span><span class="p">></span>This paragraph will not be selectable when clicked by the user.<span class="p"></</span><span class="nt">p</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="pointer-events">Pointer events <a class="anchor-link" href="#pointer-events" aria-label="Link to this section: Pointer events"></a></h2>
|
||||
<p>Bootstrap provides <code>.pe-none</code> and <code>.pe-auto</code> classes to prevent or add element interactions.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
|
||||
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
|
||||
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"pe-none"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>This link<span class="p"></</span><span class="nt">a</span><span class="p">></span> can not be clicked.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"pe-auto"</span><span class="p">></span>This link<span class="p"></</span><span class="nt">a</span><span class="p">></span> can be clicked (this is default behavior).<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"pe-none"</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>This link<span class="p"></</span><span class="nt">a</span><span class="p">></span> can not be clicked because the <span class="p"><</span><span class="nt">code</span><span class="p">></span>pointer-events<span class="p"></</span><span class="nt">code</span><span class="p">></span> property is inherited from its parent. However, <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"pe-auto"</span><span class="p">></span>this link<span class="p"></</span><span class="nt">a</span><span class="p">></span> has a <span class="p"><</span><span class="nt">code</span><span class="p">></span>pe-auto<span class="p"></</span><span class="nt">code</span><span class="p">></span> class and can be clicked.<span class="p"></</span><span class="nt">p</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<p>The <code>.pe-none</code> class (and the <code>pointer-events</code> CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with <code>.pe-none</code> are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as <code>tabindex="-1"</code> (to prevent them from receiving keyboard focus) and <code>aria-disabled="true"</code> (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable.</p>
|
||||
<p>If possible, the simpler solution is:</p>
|
||||
<ul>
|
||||
<li>For form controls, add the <code>disabled</code> HTML attribute.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>For links, remove the <code>href</code> attribute, making it a non-interactive anchor or placeholder link.</li>
|
||||
</ul>
|
||||
<h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Interaction utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"user-select"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">user-select</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">all</span> <span class="nt">auto</span> <span class="nt">none</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"pointer-events"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">pointer-events</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">pe</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">none</span> <span class="nt">auto</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
638
docs/5.2/utilities/opacity/index.html
Normal file
638
docs/5.2/utilities/opacity/index.html
Normal file
@@ -0,0 +1,638 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Control the opacity of elements.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Opacity · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/opacity/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Opacity">
|
||||
<meta name="twitter:description" content="Control the opacity of elements.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/opacity/">
|
||||
<meta property="og:title" content="Opacity">
|
||||
<meta property="og:description" content="Control the opacity of elements.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/opacity/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/opacity/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-item disabled">v5.0.2</div>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded active" aria-current="page">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/opacity.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Opacity</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Control the opacity of elements.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<p>The <code>opacity</code> property sets the opacity level for an element. The opacity level describes the transparency level, where <code>1</code> is not transparent at all, <code>.5</code> is 50% visible, and <code>0</code> is completely transparent.</p>
|
||||
<p>Set the <code>opacity</code> of an element using <code>.opacity-{value}</code> utilities.</p>
|
||||
<div class="bd-example d-sm-flex">
|
||||
<div class="opacity-100 p-3 m-2 bg-primary text-light fw-bold rounded">100%</div>
|
||||
<div class="opacity-75 p-3 m-2 bg-primary text-light fw-bold rounded">75%</div>
|
||||
<div class="opacity-50 p-3 m-2 bg-primary text-light fw-bold rounded">50%</div>
|
||||
<div class="opacity-25 p-3 m-2 bg-primary text-light fw-bold rounded">25%</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"opacity-100"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"opacity-75"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"opacity-50"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"opacity-25"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Opacity utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"opacity"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">opacity</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">0</span><span class="nd">:</span> <span class="nt">0</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">25</span><span class="nd">:</span> <span class="nc">.25</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">50</span><span class="nd">:</span> <span class="nc">.5</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">75</span><span class="nd">:</span> <span class="nc">.75</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">100</span><span class="nd">:</span> <span class="nt">1</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
641
docs/5.2/utilities/overflow/index.html
Normal file
641
docs/5.2/utilities/overflow/index.html
Normal file
@@ -0,0 +1,641 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use these shorthand utilities for quickly configuring how content overflows an element.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Overflow · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/overflow/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Overflow">
|
||||
<meta name="twitter:description" content="Use these shorthand utilities for quickly configuring how content overflows an element.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/overflow/">
|
||||
<meta property="og:title" content="Overflow">
|
||||
<meta property="og:description" content="Use these shorthand utilities for quickly configuring how content overflows an element.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/overflow/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/overflow/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/utilities/overflow/">v5.0.2</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded active" aria-current="page">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/overflow.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Overflow</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Use these shorthand utilities for quickly configuring how content overflows an element.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<p>Adjust the <code>overflow</code> property on the fly with four default values and classes. These classes are not responsive by default.</p>
|
||||
<div class="bd-example d-md-flex">
|
||||
<div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
|
||||
</div>
|
||||
<div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
|
||||
</div>
|
||||
<div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
|
||||
</div>
|
||||
<div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions.
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"overflow-auto"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"overflow-hidden"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"overflow-visible"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"overflow-scroll"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p>Using Sass variables, you may customize the overflow utilities by changing the <code>$overflows</code> variable in <code>_variables.scss</code>.</p>
|
||||
<h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Overflow utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"overflow"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">overflow</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">auto</span> <span class="nt">hidden</span> <span class="nt">visible</span> <span class="nt">scroll</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
869
docs/5.2/utilities/position/index.html
Normal file
869
docs/5.2/utilities/position/index.html
Normal file
@@ -0,0 +1,869 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use these shorthand utilities for quickly configuring the position of an element.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Position · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/position/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Position">
|
||||
<meta name="twitter:description" content="Use these shorthand utilities for quickly configuring the position of an element.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/position/">
|
||||
<meta property="og:title" content="Position">
|
||||
<meta property="og:description" content="Use these shorthand utilities for quickly configuring the position of an element.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/position/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/position/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/utilities/position/">v5.0.2</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded active" aria-current="page">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/position.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Position</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Use these shorthand utilities for quickly configuring the position of an element.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
|
||||
On this page
|
||||
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
|
||||
</button>
|
||||
<strong class="d-none d-md-block h6 my-2">On this page</strong>
|
||||
<hr class="d-none d-md-block my-2">
|
||||
<div class="collapse bd-toc-collapse" id="tocContents">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#position-values">Position values</a></li>
|
||||
<li><a href="#arrange-elements">Arrange elements</a></li>
|
||||
<li><a href="#center-elements">Center elements</a></li>
|
||||
<li><a href="#examples">Examples</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#maps">Maps</a></li>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="position-values">Position values <a class="anchor-link" href="#position-values" aria-label="Link to this section: Position values"></a></h2>
|
||||
<p>Quick positioning classes are available, though they are not responsive.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-static"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-relative"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-fixed"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-sticky"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h2 id="arrange-elements">Arrange elements <a class="anchor-link" href="#arrange-elements" aria-label="Link to this section: Arrange elements"></a></h2>
|
||||
<p>Arrange elements easily with the edge positioning utilities. The format is <code>{property}-{position}</code>.</p>
|
||||
<p>Where <em>property</em> is one of:</p>
|
||||
<ul>
|
||||
<li><code>top</code> - for the vertical <code>top</code> position</li>
|
||||
<li><code>start</code> - for the horizontal <code>left</code> position (in LTR)</li>
|
||||
<li><code>bottom</code> - for the vertical <code>bottom</code> position</li>
|
||||
<li><code>end</code> - for the horizontal <code>right</code> position (in LTR)</li>
|
||||
</ul>
|
||||
<p>Where <em>position</em> is one of:</p>
|
||||
<ul>
|
||||
<li><code>0</code> - for <code>0</code> edge position</li>
|
||||
<li><code>50</code> - for <code>50%</code> edge position</li>
|
||||
<li><code>100</code> - for <code>100%</code> edge position</li>
|
||||
</ul>
|
||||
<p>(You can add more position values by adding entries to the <code>$position-values</code> Sass map variable.)</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-position-utils">
|
||||
<div class="position-relative">
|
||||
<div class="position-absolute top-0 start-0"></div>
|
||||
<div class="position-absolute top-0 end-0"></div>
|
||||
<div class="position-absolute top-50 start-50"></div>
|
||||
<div class="position-absolute bottom-50 end-50"></div>
|
||||
<div class="position-absolute bottom-0 start-0"></div>
|
||||
<div class="position-absolute bottom-0 end-0"></div>
|
||||
</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-relative"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-0"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 end-0"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-50 start-50"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute bottom-50 end-50"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute bottom-0 start-0"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute bottom-0 end-0"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="center-elements">Center elements <a class="anchor-link" href="#center-elements" aria-label="Link to this section: Center elements"></a></h2>
|
||||
<p>In addition, you can also center the elements with the transform utility class <code>.translate-middle</code>.</p>
|
||||
<p>This class applies the transformations <code>translateX(-50%)</code> and <code>translateY(-50%)</code> to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-position-utils">
|
||||
<div class="position-relative">
|
||||
<div class="position-absolute top-0 start-0 translate-middle"></div>
|
||||
<div class="position-absolute top-0 start-50 translate-middle"></div>
|
||||
<div class="position-absolute top-0 start-100 translate-middle"></div>
|
||||
<div class="position-absolute top-50 start-0 translate-middle"></div>
|
||||
<div class="position-absolute top-50 start-50 translate-middle"></div>
|
||||
<div class="position-absolute top-50 start-100 translate-middle"></div>
|
||||
<div class="position-absolute top-100 start-0 translate-middle"></div>
|
||||
<div class="position-absolute top-100 start-50 translate-middle"></div>
|
||||
<div class="position-absolute top-100 start-100 translate-middle"></div>
|
||||
</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-relative"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-0 translate-middle"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-50 translate-middle"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-100 translate-middle"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-50 start-0 translate-middle"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-50 start-50 translate-middle"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-50 start-100 translate-middle"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-100 start-0 translate-middle"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-100 start-50 translate-middle"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-100 start-100 translate-middle"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<p>By adding <code>.translate-middle-x</code> or <code>.translate-middle-y</code> classes, elements can be positioned only in horizontal or vertical direction.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-position-utils">
|
||||
<div class="position-relative">
|
||||
<div class="position-absolute top-0 start-0"></div>
|
||||
<div class="position-absolute top-0 start-50 translate-middle-x"></div>
|
||||
<div class="position-absolute top-0 end-0"></div>
|
||||
<div class="position-absolute top-50 start-0 translate-middle-y"></div>
|
||||
<div class="position-absolute top-50 start-50 translate-middle"></div>
|
||||
<div class="position-absolute top-50 end-0 translate-middle-y"></div>
|
||||
<div class="position-absolute bottom-0 start-0"></div>
|
||||
<div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
|
||||
<div class="position-absolute bottom-0 end-0"></div>
|
||||
</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-relative"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-0"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-50 translate-middle-x"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 end-0"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-50 start-0 translate-middle-y"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-50 start-50 translate-middle"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-50 end-0 translate-middle-y"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute bottom-0 start-0"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute bottom-0 start-50 translate-middle-x"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute bottom-0 end-0"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="examples">Examples <a class="anchor-link" href="#examples" aria-label="Link to this section: Examples"></a></h2>
|
||||
<p>Here are some real life examples of these classes:</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-position-examples d-flex justify-content-around">
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-dark position-relative">
|
||||
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
|
||||
</button>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary position-relative"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> Mails <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary"</span><span class="p">></span>+99 <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>unread messages<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-dark position-relative"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> Marker <span class="p"><</span><span class="nt">svg</span> <span class="na">width</span><span class="o">=</span><span class="s">"1em"</span> <span class="na">height</span><span class="o">=</span><span class="s">"1em"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-100 start-50 translate-middle mt-1"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"#212529"</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">"http://www.w3.org/2000/svg"</span><span class="p">><</span><span class="nt">path</span> <span class="na">d</span><span class="o">=</span><span class="s">"M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary position-relative"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> Alerts <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"</span><span class="p">><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden"</span><span class="p">></span>unread messages<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<p>You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the <code>$position-values</code> variable.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-position-examples">
|
||||
<div class="position-relative m-4">
|
||||
<div class="progress" style="height: 1px;">
|
||||
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
|
||||
<button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
|
||||
<button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
|
||||
</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-relative m-4"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"progress"</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 1px;"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"progress-bar"</span> <span class="na">role</span><span class="o">=</span><span class="s">"progressbar"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 50%;"</span> <span class="na">aria-valuenow</span><span class="o">=</span><span class="s">"50"</span> <span class="na">aria-valuemin</span><span class="o">=</span><span class="s">"0"</span> <span class="na">aria-valuemax</span><span class="o">=</span><span class="s">"100"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 2rem; height:2rem;"</span><span class="p">></span>1<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 2rem; height:2rem;"</span><span class="p">></span>2<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 2rem; height:2rem;"</span><span class="p">></span>3<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<h3 id="maps">Maps <a class="anchor-link" href="#maps" aria-label="Link to this section: Maps"></a></h3>
|
||||
<p>Default position utility values are declared in a Sass map, then used to generate our utilities.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$position-values</span><span class="o">:</span> <span class="p">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">50</span><span class="o">:</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">100</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">);</span>
|
||||
</span></span></code></pre></div>
|
||||
<h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Position utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"position"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">position</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">static</span> <span class="nt">relative</span> <span class="nt">absolute</span> <span class="nt">fixed</span> <span class="nt">sticky</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"top"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">top</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">position-values</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"bottom"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">bottom</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">position-values</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"start"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">left</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">start</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">position-values</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"end"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">right</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">end</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">position-values</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"translate-middle"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">transform</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">translate-middle</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">null</span><span class="nd">:</span> <span class="nt">translate</span><span class="o">(-</span><span class="nt">50</span><span class="err">%</span><span class="o">,</span> <span class="o">-</span><span class="nt">50</span><span class="err">%</span><span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">x</span><span class="nd">:</span> <span class="nt">translateX</span><span class="o">(-</span><span class="nt">50</span><span class="err">%</span><span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">y</span><span class="nd">:</span> <span class="nt">translateY</span><span class="o">(-</span><span class="nt">50</span><span class="err">%</span><span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
677
docs/5.2/utilities/shadows/index.html
Normal file
677
docs/5.2/utilities/shadows/index.html
Normal file
@@ -0,0 +1,677 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Add or remove shadows to elements with box-shadow utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Shadows · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/shadows/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Shadows">
|
||||
<meta name="twitter:description" content="Add or remove shadows to elements with box-shadow utilities.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/shadows/">
|
||||
<meta property="og:title" content="Shadows">
|
||||
<meta property="og:description" content="Add or remove shadows to elements with box-shadow utilities.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/shadows/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/shadows/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/utilities/shadows/">v5.0.2</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded active" aria-current="page">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/shadows.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Shadows</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Add or remove shadows to elements with box-shadow utilities.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
|
||||
On this page
|
||||
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
|
||||
</button>
|
||||
<strong class="d-none d-md-block h6 my-2">On this page</strong>
|
||||
<hr class="d-none d-md-block my-2">
|
||||
<div class="collapse bd-toc-collapse" id="tocContents">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#examples">Examples</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="examples">Examples <a class="anchor-link" href="#examples" aria-label="Link to this section: Examples"></a></h2>
|
||||
<p>While shadows on components are disabled by default in Bootstrap and can be enabled via <code>$enable-shadows</code>, you can also quickly add or remove a shadow with our <code>box-shadow</code> utility classes. Includes support for <code>.shadow-none</code> and three default sizes (which have associated variables to match).</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
|
||||
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
|
||||
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
|
||||
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"shadow-none p-3 mb-5 bg-light rounded"</span><span class="p">></span>No shadow<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"shadow-sm p-3 mb-5 bg-body rounded"</span><span class="p">></span>Small shadow<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"shadow p-3 mb-5 bg-body rounded"</span><span class="p">></span>Regular shadow<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"shadow-lg p-3 mb-5 bg-body rounded"</span><span class="p">></span>Larger shadow<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<h3 id="variables">Variables <a class="anchor-link" href="#variables" aria-label="Link to this section: Variables"></a></h3>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$box-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="mf">.5</span><span class="kt">rem</span> <span class="mi">1</span><span class="kt">rem</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.15</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$box-shadow-sm</span><span class="o">:</span> <span class="mi">0</span> <span class="mf">.125</span><span class="kt">rem</span> <span class="mf">.25</span><span class="kt">rem</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.075</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$box-shadow-lg</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">1</span><span class="kt">rem</span> <span class="mi">3</span><span class="kt">rem</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.175</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$box-shadow-inset</span><span class="o">:</span> <span class="ni">inset</span> <span class="mi">0</span> <span class="mi">1</span><span class="kt">px</span> <span class="mi">2</span><span class="kt">px</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.075</span><span class="p">);</span>
|
||||
</span></span></code></pre></div>
|
||||
<h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Shadow utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"shadow"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">box-shadow</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">shadow</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">null</span><span class="nd">:</span> <span class="err">$</span><span class="nt">box-shadow</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">sm</span><span class="nd">:</span> <span class="err">$</span><span class="nt">box-shadow-sm</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">lg</span><span class="nd">:</span> <span class="err">$</span><span class="nt">box-shadow-lg</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">none</span><span class="nd">:</span> <span class="nt">none</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
781
docs/5.2/utilities/sizing/index.html
Normal file
781
docs/5.2/utilities/sizing/index.html
Normal file
@@ -0,0 +1,781 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Easily make an element as wide or as tall with our width and height utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Sizing · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/sizing/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Sizing">
|
||||
<meta name="twitter:description" content="Easily make an element as wide or as tall with our width and height utilities.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/sizing/">
|
||||
<meta property="og:title" content="Sizing">
|
||||
<meta property="og:description" content="Easily make an element as wide or as tall with our width and height utilities.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/sizing/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/sizing/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/utilities/sizing/">v5.0.2</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded active" aria-current="page">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/sizing.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Sizing</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Easily make an element as wide or as tall with our width and height utilities.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
|
||||
On this page
|
||||
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
|
||||
</button>
|
||||
<strong class="d-none d-md-block h6 my-2">On this page</strong>
|
||||
<hr class="d-none d-md-block my-2">
|
||||
<div class="collapse bd-toc-collapse" id="tocContents">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#relative-to-the-parent">Relative to the parent</a></li>
|
||||
<li><a href="#relative-to-the-viewport">Relative to the viewport</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="relative-to-the-parent">Relative to the parent <a class="anchor-link" href="#relative-to-the-parent" aria-label="Link to this section: Relative to the parent"></a></h2>
|
||||
<p>Width and height utilities are generated from the utility API in <code>_utilities.scss</code>. Includes support for <code>25%</code>, <code>50%</code>, <code>75%</code>, <code>100%</code>, and <code>auto</code> by default. Modify those values as you need to generate different utilities here.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
|
||||
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
|
||||
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
|
||||
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
|
||||
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"w-25 p-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"background-color: #eee;"</span><span class="p">></span>Width 25%<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"w-50 p-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"background-color: #eee;"</span><span class="p">></span>Width 50%<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"w-75 p-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"background-color: #eee;"</span><span class="p">></span>Width 75%<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"w-100 p-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"background-color: #eee;"</span><span class="p">></span>Width 100%<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"w-auto p-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"background-color: #eee;"</span><span class="p">></span>Width auto<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
|
||||
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
|
||||
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
|
||||
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
|
||||
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
|
||||
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
|
||||
</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 100px; background-color: rgba(255,0,0,0.1);"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"h-25 d-inline-block"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 120px; background-color: rgba(0,0,255,.1)"</span><span class="p">></span>Height 25%<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"h-50 d-inline-block"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 120px; background-color: rgba(0,0,255,.1)"</span><span class="p">></span>Height 50%<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"h-75 d-inline-block"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 120px; background-color: rgba(0,0,255,.1)"</span><span class="p">></span>Height 75%<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"h-100 d-inline-block"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 120px; background-color: rgba(0,0,255,.1)"</span><span class="p">></span>Height 100%<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"h-auto d-inline-block"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 120px; background-color: rgba(0,0,255,.1)"</span><span class="p">></span>Height auto<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<p>You can also use <code>max-width: 100%;</code> and <code>max-height: 100%;</code> utilities as needed.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<svg class="bd-placeholder-img mw-100" width="100%" height="100" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Max-width 100%" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Max-width 100%</text></svg>
|
||||
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"mw-100"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div style="height: 100px; background-color: rgba(255,0,0,.1);">
|
||||
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">Max-height 100%</div>
|
||||
</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 100px; background-color: rgba(255,0,0,.1);"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mh-100"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 100px; height: 200px; background-color: rgba(0,0,255,.1);"</span><span class="p">></span>Max-height 100%<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="relative-to-the-viewport">Relative to the viewport <a class="anchor-link" href="#relative-to-the-viewport" aria-label="Link to this section: Relative to the viewport"></a></h2>
|
||||
<p>You can also use utilities to set the width and height relative to the viewport.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"min-vw-100"</span><span class="p">></span>Min-width 100vw<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"min-vh-100"</span><span class="p">></span>Min-height 100vh<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"vw-100"</span><span class="p">></span>Width 100vw<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"vh-100"</span><span class="p">></span>Height 100vh<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Sizing utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"width"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">width</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">w</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">25</span><span class="nd">:</span> <span class="nt">25</span><span class="err">%</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">50</span><span class="nd">:</span> <span class="nt">50</span><span class="err">%</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">75</span><span class="nd">:</span> <span class="nt">75</span><span class="err">%</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">100</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"max-width"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">max-width</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">mw</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">100</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"viewport-width"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">width</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">vw</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">100</span><span class="nd">:</span> <span class="nt">100vw</span><span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"min-viewport-width"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">min-width</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">min-vw</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">100</span><span class="nd">:</span> <span class="nt">100vw</span><span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"height"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">height</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">h</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">25</span><span class="nd">:</span> <span class="nt">25</span><span class="err">%</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">50</span><span class="nd">:</span> <span class="nt">50</span><span class="err">%</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">75</span><span class="nd">:</span> <span class="nt">75</span><span class="err">%</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">100</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"max-height"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">max-height</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">mh</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">100</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"viewport-height"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">height</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">vh</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">100</span><span class="nd">:</span> <span class="nt">100vh</span><span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"min-viewport-height"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">min-height</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">min-vh</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">100</span><span class="nd">:</span> <span class="nt">100vh</span><span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
888
docs/5.2/utilities/spacing/index.html
Normal file
888
docs/5.2/utilities/spacing/index.html
Normal file
@@ -0,0 +1,888 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Spacing · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/spacing/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Spacing">
|
||||
<meta name="twitter:description" content="Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/spacing/">
|
||||
<meta property="og:title" content="Spacing">
|
||||
<meta property="og:description" content="Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/spacing/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/spacing/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/utilities/spacing/">v5.0.2</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded active" aria-current="page">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/spacing.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Spacing</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
|
||||
On this page
|
||||
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
|
||||
</button>
|
||||
<strong class="d-none d-md-block h6 my-2">On this page</strong>
|
||||
<hr class="d-none d-md-block my-2">
|
||||
<div class="collapse bd-toc-collapse" id="tocContents">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#margin-and-padding">Margin and padding</a>
|
||||
<ul>
|
||||
<li><a href="#notation">Notation</a></li>
|
||||
<li><a href="#examples">Examples</a></li>
|
||||
<li><a href="#horizontal-centering">Horizontal centering</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#negative-margin">Negative margin</a></li>
|
||||
<li><a href="#gap">Gap</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#maps">Maps</a></li>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="margin-and-padding">Margin and padding <a class="anchor-link" href="#margin-and-padding" aria-label="Link to this section: Margin and padding"></a></h2>
|
||||
<p>Assign responsive-friendly <code>margin</code> or <code>padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code>.25rem</code> to <code>3rem</code>.</p>
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<strong>Using the CSS Grid layout module?</strong> Consider using <a href="#gap">the gap utility</a> instead.
|
||||
</div>
|
||||
|
||||
<h3 id="notation">Notation <a class="anchor-link" href="#notation" aria-label="Link to this section: Notation"></a></h3>
|
||||
<p>Spacing utilities that apply to all breakpoints, from <code>xs</code> to <code>xxl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code>min-width: 0</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
|
||||
<p>The classes are named using the format <code>{property}{sides}-{size}</code> for <code>xs</code> and <code>{property}{sides}-{breakpoint}-{size}</code> for <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>xxl</code>.</p>
|
||||
<p>Where <em>property</em> is one of:</p>
|
||||
<ul>
|
||||
<li><code>m</code> - for classes that set <code>margin</code></li>
|
||||
<li><code>p</code> - for classes that set <code>padding</code></li>
|
||||
</ul>
|
||||
<p>Where <em>sides</em> is one of:</p>
|
||||
<ul>
|
||||
<li><code>t</code> - for classes that set <code>margin-top</code> or <code>padding-top</code></li>
|
||||
<li><code>b</code> - for classes that set <code>margin-bottom</code> or <code>padding-bottom</code></li>
|
||||
<li><code>s</code> - (start) for classes that set <code>margin-left</code> or <code>padding-left</code> in LTR, <code>margin-right</code> or <code>padding-right</code> in RTL</li>
|
||||
<li><code>e</code> - (end) for classes that set <code>margin-right</code> or <code>padding-right</code> in LTR, <code>margin-left</code> or <code>padding-left</code> in RTL</li>
|
||||
<li><code>x</code> - for classes that set both <code>*-left</code> and <code>*-right</code></li>
|
||||
<li><code>y</code> - for classes that set both <code>*-top</code> and <code>*-bottom</code></li>
|
||||
<li>blank - for classes that set a <code>margin</code> or <code>padding</code> on all 4 sides of the element</li>
|
||||
</ul>
|
||||
<p>Where <em>size</em> is one of:</p>
|
||||
<ul>
|
||||
<li><code>0</code> - for classes that eliminate the <code>margin</code> or <code>padding</code> by setting it to <code>0</code></li>
|
||||
<li><code>1</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer * .25</code></li>
|
||||
<li><code>2</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer * .5</code></li>
|
||||
<li><code>3</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer</code></li>
|
||||
<li><code>4</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer * 1.5</code></li>
|
||||
<li><code>5</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer * 3</code></li>
|
||||
<li><code>auto</code> - for classes that set the <code>margin</code> to auto</li>
|
||||
</ul>
|
||||
<p>(You can add more sizes by adding entries to the <code>$spacers</code> Sass map variable.)</p>
|
||||
<h3 id="examples">Examples <a class="anchor-link" href="#examples" aria-label="Link to this section: Examples"></a></h3>
|
||||
<p>Here are some representative examples of these classes:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nc">.mt-0</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">margin-top</span><span class="o">:</span> <span class="mi">0</span> <span class="k">!important</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="nc">.ms-1</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">margin-left</span><span class="o">:</span> <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.25</span><span class="p">)</span> <span class="k">!important</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="nc">.px-2</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">padding-left</span><span class="o">:</span> <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</span><span class="p">)</span> <span class="k">!important</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">padding-right</span><span class="o">:</span> <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</span><span class="p">)</span> <span class="k">!important</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="nc">.p-3</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">padding</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="k">!important</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div><h3 id="horizontal-centering">Horizontal centering <a class="anchor-link" href="#horizontal-centering" aria-label="Link to this section: Horizontal centering"></a></h3>
|
||||
<p>Additionally, Bootstrap also includes an <code>.mx-auto</code> class for horizontally centering fixed-width block level content—that is, content that has <code>display: block</code> and a <code>width</code> set—by setting the horizontal margins to <code>auto</code>.</p>
|
||||
<div class="bd-example">
|
||||
<div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
|
||||
Centered element
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mx-auto"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 200px;"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> Centered element
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h2 id="negative-margin">Negative margin <a class="anchor-link" href="#negative-margin" aria-label="Link to this section: Negative margin"></a></h2>
|
||||
<p>In CSS, <code>margin</code> properties can utilize negative values (<code>padding</code> cannot). These negative margins are <strong>disabled by default</strong>, but can be enabled in Sass by setting <code>$enable-negative-margins: true</code>.</p>
|
||||
<p>The syntax is nearly the same as the default, positive margin utilities, but with the addition of <code>n</code> before the requested size. Here’s an example class that’s the opposite of <code>.mt-1</code>:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nc">.mt-n1</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">margin-top</span><span class="o">:</span> <span class="o">-</span><span class="mi">0</span><span class="mf">.25</span><span class="kt">rem</span> <span class="k">!important</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div><h2 id="gap">Gap <a class="anchor-link" href="#gap" aria-label="Link to this section: Gap"></a></h2>
|
||||
<p>When using <code>display: grid</code>, you can make use of <code>gap</code> utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a <code>display: grid</code> container). Gap utilities are responsive by default, and are generated via our utilities API, based on the <code>$spacers</code> Sass map.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="d-grid gap-3">
|
||||
<div class="p-2 bg-light border">Grid item 1</div>
|
||||
<div class="p-2 bg-light border">Grid item 2</div>
|
||||
<div class="p-2 bg-light border">Grid item 3</div>
|
||||
</div>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-grid gap-3"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bg-light border"</span><span class="p">></span>Grid item 1<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bg-light border"</span><span class="p">></span>Grid item 2<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bg-light border"</span><span class="p">></span>Grid item 3<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<p>Support includes responsive options for all of Bootstrap’s grid breakpoints, as well as six sizes from the <code>$spacers</code> map (<code>0</code>–<code>5</code>). There is no <code>.gap-auto</code> utility class as it’s effectively the same as <code>.gap-0</code>.</p>
|
||||
<h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<h3 id="maps">Maps <a class="anchor-link" href="#maps" aria-label="Link to this section: Maps"></a></h3>
|
||||
<p>Spacing utilities are declared via Sass map and then generated with our utilities API.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$spacer</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$spacers</span><span class="o">:</span> <span class="p">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">1</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.25</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">2</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">3</span><span class="o">:</span> <span class="nv">$spacer</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">4</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mi">1</span><span class="mf">.5</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">5</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mi">3</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">);</span>
|
||||
</span></span></code></pre></div>
|
||||
<h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Spacing utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"margin"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">m</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"margin-x"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-right</span> <span class="nt">margin-left</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">mx</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"margin-y"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-top</span> <span class="nt">margin-bottom</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">my</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"margin-top"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-top</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">mt</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"margin-end"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-right</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">me</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"margin-bottom"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-bottom</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">mb</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"margin-start"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-left</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">ms</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="nt">Negative</span> <span class="nt">margin</span> <span class="nt">utilities</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"negative-margin"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">m</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"negative-margin-x"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-right</span> <span class="nt">margin-left</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">mx</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"negative-margin-y"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-top</span> <span class="nt">margin-bottom</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">my</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"negative-margin-top"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-top</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">mt</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"negative-margin-end"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-right</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">me</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"negative-margin-bottom"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-bottom</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">mb</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"negative-margin-start"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-left</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">ms</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="nt">Padding</span> <span class="nt">utilities</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"padding"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">padding</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">p</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"padding-x"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">padding-right</span> <span class="nt">padding-left</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">px</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"padding-y"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">padding-top</span> <span class="nt">padding-bottom</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">py</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"padding-top"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">padding-top</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">pt</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"padding-end"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">padding-right</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">pe</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"padding-bottom"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">padding-bottom</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">pb</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"padding-start"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">padding-left</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">ps</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="nt">Gap</span> <span class="nt">utility</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"gap"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">gap</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">gap</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1015
docs/5.2/utilities/text/index.html
Normal file
1015
docs/5.2/utilities/text/index.html
Normal file
File diff suppressed because it is too large
Load Diff
687
docs/5.2/utilities/vertical-align/index.html
Normal file
687
docs/5.2/utilities/vertical-align/index.html
Normal file
@@ -0,0 +1,687 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Vertical alignment · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/vertical-align/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Vertical alignment">
|
||||
<meta name="twitter:description" content="Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/vertical-align/">
|
||||
<meta property="og:title" content="Vertical alignment">
|
||||
<meta property="og:description" content="Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/vertical-align/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/vertical-align/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/utilities/vertical-align/">v5.0.2</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded active" aria-current="page">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/vertical-align.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Vertical alignment</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-alignment</code></a> utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.</p>
|
||||
<p>Choose from <code>.align-baseline</code>, <code>.align-top</code>, <code>.align-middle</code>, <code>.align-bottom</code>, <code>.align-text-bottom</code>, and <code>.align-text-top</code> as needed.</p>
|
||||
<p>To vertically center non-inline content (like <code><div></code>s and more), use our <a href="/docs/5.2/utilities/flex/#align-items">flex box utilities</a>.</p>
|
||||
<p>With inline elements:</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<span class="align-baseline">baseline</span>
|
||||
<span class="align-top">top</span>
|
||||
<span class="align-middle">middle</span>
|
||||
<span class="align-bottom">bottom</span>
|
||||
<span class="align-text-top">text-top</span>
|
||||
<span class="align-text-bottom">text-bottom</span>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-baseline"</span><span class="p">></span>baseline<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-top"</span><span class="p">></span>top<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-middle"</span><span class="p">></span>middle<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-bottom"</span><span class="p">></span>bottom<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-text-top"</span><span class="p">></span>text-top<span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-text-bottom"</span><span class="p">></span>text-bottom<span class="p"></</span><span class="nt">span</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<p>With table cells:</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<table style="height: 100px;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="align-baseline">baseline</td>
|
||||
<td class="align-top">top</td>
|
||||
<td class="align-middle">middle</td>
|
||||
<td class="align-bottom">bottom</td>
|
||||
<td class="align-text-top">text-top</td>
|
||||
<td class="align-text-bottom">text-bottom</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
|
||||
<small class="font-monospace text-muted text-uppercase">html</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard" title="Copy to clipboard">
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">table</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 100px;"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">tbody</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">tr</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-baseline"</span><span class="p">></span>baseline<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-top"</span><span class="p">></span>top<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-middle"</span><span class="p">></span>middle<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-bottom"</span><span class="p">></span>bottom<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-text-top"</span><span class="p">></span>text-top<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-text-bottom"</span><span class="p">></span>text-bottom<span class="p"></</span><span class="nt">td</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">tr</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">tbody</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">table</span><span class="p">></span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Vertical align utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"align"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">vertical-align</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">align</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="nt">baseline</span> <span class="nt">top</span> <span class="nt">middle</span> <span class="nt">bottom</span> <span class="nt">text-bottom</span> <span class="nt">text-top</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">),</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
640
docs/5.2/utilities/visibility/index.html
Normal file
640
docs/5.2/utilities/visibility/index.html
Normal file
@@ -0,0 +1,640 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Control the visibility of elements, without modifying their display, with visibility utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.98.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
|
||||
<title>Visibility · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/utilities/visibility/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Visibility">
|
||||
<meta name="twitter:description" content="Control the visibility of elements, without modifying their display, with visibility utilities.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/utilities/visibility/">
|
||||
<meta property="og:title" content="Visibility">
|
||||
<meta property="og:description" content="Control the visibility of elements, without modifying their display, with visibility utilities.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</symbol>
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
<symbol id="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2 active" aria-current="true" href="/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-lg-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none">Bootstrap</span> v5.2
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item current" aria-current="true" href="/docs/5.2/utilities/visibility/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/utilities/visibility/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/utilities/visibility/">v5.0.2</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"><ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Getting started
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/getting-started/introduction/" class="bd-links-link d-inline-block rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/download/" class="bd-links-link d-inline-block rounded">Download</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contents/" class="bd-links-link d-inline-block rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/browsers-devices/" class="bd-links-link d-inline-block rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/javascript/" class="bd-links-link d-inline-block rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/webpack/" class="bd-links-link d-inline-block rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/parcel/" class="bd-links-link d-inline-block rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/accessibility/" class="bd-links-link d-inline-block rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rfs/" class="bd-links-link d-inline-block rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/rtl/" class="bd-links-link d-inline-block rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/" class="bd-links-link d-inline-block rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
Customize
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/customize/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/customize/sass/" class="bd-links-link d-inline-block rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.2/customize/options/" class="bd-links-link d-inline-block rounded">Options</a></li>
|
||||
<li><a href="/docs/5.2/customize/color/" class="bd-links-link d-inline-block rounded">Color</a></li>
|
||||
<li><a href="/docs/5.2/customize/components/" class="bd-links-link d-inline-block rounded">Components</a></li>
|
||||
<li><a href="/docs/5.2/customize/css-variables/" class="bd-links-link d-inline-block rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.2/customize/optimize/" class="bd-links-link d-inline-block rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"><use xlink:href="#grid-fill"></use></svg>
|
||||
Layout
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/layout/breakpoints/" class="bd-links-link d-inline-block rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.2/layout/containers/" class="bd-links-link d-inline-block rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.2/layout/grid/" class="bd-links-link d-inline-block rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.2/layout/columns/" class="bd-links-link d-inline-block rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.2/layout/gutters/" class="bd-links-link d-inline-block rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.2/layout/utilities/" class="bd-links-link d-inline-block rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.2/layout/z-index/" class="bd-links-link d-inline-block rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.2/layout/css-grid/" class="bd-links-link d-inline-block rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"><use xlink:href="#file-earmark-richtext"></use></svg>
|
||||
Content
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/content/reboot/" class="bd-links-link d-inline-block rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.2/content/typography/" class="bd-links-link d-inline-block rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.2/content/images/" class="bd-links-link d-inline-block rounded">Images</a></li>
|
||||
<li><a href="/docs/5.2/content/tables/" class="bd-links-link d-inline-block rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.2/content/figures/" class="bd-links-link d-inline-block rounded">Figures</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#ui-radios"></use></svg>
|
||||
Forms
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/forms/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/forms/form-control/" class="bd-links-link d-inline-block rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.2/forms/select/" class="bd-links-link d-inline-block rounded">Select</a></li>
|
||||
<li><a href="/docs/5.2/forms/checks-radios/" class="bd-links-link d-inline-block rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.2/forms/range/" class="bd-links-link d-inline-block rounded">Range</a></li>
|
||||
<li><a href="/docs/5.2/forms/input-group/" class="bd-links-link d-inline-block rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.2/forms/floating-labels/" class="bd-links-link d-inline-block rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.2/forms/layout/" class="bd-links-link d-inline-block rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.2/forms/validation/" class="bd-links-link d-inline-block rounded">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
Components
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/components/accordion/" class="bd-links-link d-inline-block rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.2/components/alerts/" class="bd-links-link d-inline-block rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.2/components/badge/" class="bd-links-link d-inline-block rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.2/components/breadcrumb/" class="bd-links-link d-inline-block rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.2/components/buttons/" class="bd-links-link d-inline-block rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.2/components/button-group/" class="bd-links-link d-inline-block rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.2/components/card/" class="bd-links-link d-inline-block rounded">Card</a></li>
|
||||
<li><a href="/docs/5.2/components/carousel/" class="bd-links-link d-inline-block rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.2/components/close-button/" class="bd-links-link d-inline-block rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.2/components/collapse/" class="bd-links-link d-inline-block rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.2/components/dropdowns/" class="bd-links-link d-inline-block rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.2/components/list-group/" class="bd-links-link d-inline-block rounded">List group</a></li>
|
||||
<li><a href="/docs/5.2/components/modal/" class="bd-links-link d-inline-block rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.2/components/navbar/" class="bd-links-link d-inline-block rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.2/components/navs-tabs/" class="bd-links-link d-inline-block rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.2/components/offcanvas/" class="bd-links-link d-inline-block rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.2/components/pagination/" class="bd-links-link d-inline-block rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.2/components/placeholders/" class="bd-links-link d-inline-block rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.2/components/popovers/" class="bd-links-link d-inline-block rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.2/components/progress/" class="bd-links-link d-inline-block rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.2/components/scrollspy/" class="bd-links-link d-inline-block rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.2/components/spinners/" class="bd-links-link d-inline-block rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.2/components/toasts/" class="bd-links-link d-inline-block rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.2/components/tooltips/" class="bd-links-link d-inline-block rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"><use xlink:href="#magic"></use></svg>
|
||||
Helpers
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/helpers/clearfix/" class="bd-links-link d-inline-block rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.2/helpers/color-background/" class="bd-links-link d-inline-block rounded">Color & background</a></li>
|
||||
<li><a href="/docs/5.2/helpers/colored-links/" class="bd-links-link d-inline-block rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.2/helpers/ratio/" class="bd-links-link d-inline-block rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.2/helpers/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stacks/" class="bd-links-link d-inline-block rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.2/helpers/visually-hidden/" class="bd-links-link d-inline-block rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.2/helpers/stretched-link/" class="bd-links-link d-inline-block rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.2/helpers/text-truncation/" class="bd-links-link d-inline-block rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.2/helpers/vertical-rule/" class="bd-links-link d-inline-block rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
Utilities
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/utilities/api/" class="bd-links-link d-inline-block rounded">API</a></li>
|
||||
<li><a href="/docs/5.2/utilities/background/" class="bd-links-link d-inline-block rounded">Background</a></li>
|
||||
<li><a href="/docs/5.2/utilities/borders/" class="bd-links-link d-inline-block rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.2/utilities/colors/" class="bd-links-link d-inline-block rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.2/utilities/display/" class="bd-links-link d-inline-block rounded">Display</a></li>
|
||||
<li><a href="/docs/5.2/utilities/flex/" class="bd-links-link d-inline-block rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.2/utilities/float/" class="bd-links-link d-inline-block rounded">Float</a></li>
|
||||
<li><a href="/docs/5.2/utilities/interactions/" class="bd-links-link d-inline-block rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.2/utilities/opacity/" class="bd-links-link d-inline-block rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.2/utilities/overflow/" class="bd-links-link d-inline-block rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.2/utilities/position/" class="bd-links-link d-inline-block rounded">Position</a></li>
|
||||
<li><a href="/docs/5.2/utilities/shadows/" class="bd-links-link d-inline-block rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.2/utilities/sizing/" class="bd-links-link d-inline-block rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/spacing/" class="bd-links-link d-inline-block rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.2/utilities/text/" class="bd-links-link d-inline-block rounded">Text</a></li>
|
||||
<li><a href="/docs/5.2/utilities/vertical-align/" class="bd-links-link d-inline-block rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.2/utilities/visibility/" class="bd-links-link d-inline-block rounded active" aria-current="page">Visibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"><use xlink:href="#tools"></use></svg>
|
||||
Extend
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/extend/approach/" class="bd-links-link d-inline-block rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.2/extend/icons/" class="bd-links-link d-inline-block rounded">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
<svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
About
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
<li><a href="/docs/5.2/about/overview/" class="bd-links-link d-inline-block rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.2/about/team/" class="bd-links-link d-inline-block rounded">Team</a></li>
|
||||
<li><a href="/docs/5.2/about/brand/" class="bd-links-link d-inline-block rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.2/about/license/" class="bd-links-link d-inline-block rounded">License</a></li>
|
||||
<li><a href="/docs/5.2/about/translations/" class="bd-links-link d-inline-block rounded">Translations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
<a href="/docs/5.2/migration/" class="bd-links-link d-inline-block rounded small ">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/utilities/visibility.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Visibility</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Control the visibility of elements, without modifying their display, with visibility utilities.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<p>Set the <code>visibility</code> of elements with our visibility utilities. These utility classes do not modify the <code>display</code> value at all and do not affect layout – <code>.invisible</code> elements still take up space in the page.</p>
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
Elements with the <code>.invisible</code> class will be hidden <em>both</em> visually and for assistive technology/screen reader users.
|
||||
</div>
|
||||
|
||||
<p>Apply <code>.visible</code> or <code>.invisible</code> as needed.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"visible"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"invisible"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="c1">// Class
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nc">.visible</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">visibility</span><span class="o">:</span> <span class="ni">visible</span> <span class="k">!important</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nc">.invisible</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">visibility</span><span class="o">:</span> <span class="ni">hidden</span> <span class="k">!important</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div><h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<h3 id="utilities-api">Utilities API <a class="anchor-link" href="#utilities-api" aria-label="Link to this section: Utilities API"></a></h3>
|
||||
<p>Visibility utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.2/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"> <span class="s2">"visibility"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">property</span><span class="nd">:</span> <span class="nt">visibility</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">class</span><span class="nd">:</span> <span class="nt">null</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">visible</span><span class="nd">:</span> <span class="nt">visible</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">invisible</span><span class="nd">:</span> <span class="nt">hidden</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">)</span>
|
||||
</span></span><span class="line"><span class="cl"> </span></span></code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.0-beta1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
|
||||
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
|
||||
<li class="mb-2"><a href="">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.2/getting-started/parcel/">Parcel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
|
||||
|
||||
<script src="/docs/5.2/assets/js/docs.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(btn => {
|
||||
btn.addEventListener('click', event => {
|
||||
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
|
||||
StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
|
||||
})
|
||||
})
|
||||
|
||||
StackBlitzSDK.openBootstrapSnippet = snippet => {
|
||||
const markup = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Example Code -->
|
||||
${snippet.replace(/^/gm, ' ')}
|
||||
<!-- End Example Code -->
|
||||
|
||||
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
const project = {
|
||||
files: {
|
||||
'index.html': markup
|
||||
},
|
||||
title: 'Bootstrap Example',
|
||||
description: `Official example from ${window.location.href}`,
|
||||
template: 'html',
|
||||
tags: ['bootstrap']
|
||||
}
|
||||
|
||||
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="position-fixed"><input type="text"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user