mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-15 10:05:40 +02:00
Add v5.2.0-beta1 docs (#36338)
This commit is contained in:
XhmikosR
GitHub
671
docs/5.2/getting-started/accessibility/index.html
Normal file
671
docs/5.2/getting-started/accessibility/index.html
Normal file
@@ -0,0 +1,671 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="A brief overview of Bootstrap’s features and limitations for the creation of accessible content.">
|
||||
<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>Accessibility · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/accessibility/"><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="Accessibility">
|
||||
<meta name="twitter:description" content="A brief overview of Bootstrap’s features and limitations for the creation of accessible content.">
|
||||
<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/getting-started/accessibility/">
|
||||
<meta property="og:title" content="Accessibility">
|
||||
<meta property="og:description" content="A brief overview of Bootstrap’s features and limitations for the creation of accessible content.">
|
||||
<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/getting-started/accessibility/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/getting-started/accessibility/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/getting-started/accessibility/">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 active" aria-current="page">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">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/getting-started/accessibility.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">Accessibility</h1>
|
||||
</div>
|
||||
<p class="bd-lead">A brief overview of Bootstrap’s features and limitations for the creation of accessible content.</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-and-limitations">Overview and limitations</a>
|
||||
<ul>
|
||||
<li><a href="#structural-markup">Structural markup</a></li>
|
||||
<li><a href="#interactive-components">Interactive components</a></li>
|
||||
<li><a href="#color-contrast">Color contrast</a></li>
|
||||
<li><a href="#visually-hidden-content">Visually hidden content</a></li>
|
||||
<li><a href="#reduced-motion">Reduced motion</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#additional-resources">Additional resources</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<p>Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.</p>
|
||||
<h2 id="overview-and-limitations">Overview and limitations <a class="anchor-link" href="#overview-and-limitations" aria-label="Link to this section: Overview and limitations"></a></h2>
|
||||
<p>The overall accessibility of any project built with Bootstrap depends in large part on the author’s markup, additional styling, and scripting they’ve included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill <a href="https://www.w3.org/TR/WCAG/"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1</a> (A/AA/AAA), <a href="https://www.section508.gov/">Section 508</a>, and similar accessibility standards and requirements.</p>
|
||||
<h3 id="structural-markup">Structural markup <a class="anchor-link" href="#structural-markup" aria-label="Link to this section: Structural markup"></a></h3>
|
||||
<p>Bootstrap’s styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of Bootstrap itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.</p>
|
||||
<h3 id="interactive-components">Interactive components <a class="anchor-link" href="#interactive-components" aria-label="Link to this section: Interactive components"></a></h3>
|
||||
<p>Bootstrap’s interactive components—such as modal dialogs, dropdown menus, and custom tooltips—are designed to work for touch, mouse, and keyboard users. Through the use of relevant <a href="https://www.w3.org/WAI/standards-guidelines/aria/"><abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr></a> roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers).</p>
|
||||
<p>Because Bootstrap’s components are purposely designed to be fairly generic, authors may need to include further <abbr title="Accessible Rich Internet Applications">ARIA</abbr> roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation.</p>
|
||||
<h3 id="color-contrast">Color contrast <a class="anchor-link" href="#color-contrast" aria-label="Link to this section: Color contrast"></a></h3>
|
||||
<p>Some combinations of colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to <em>insufficient</em> color contrast (below the recommended <a href="https://www.w3.org/TR/WCAG/#contrast-minimum">WCAG 2.1 text color contrast ratio of 4.5:1</a> and the <a href="https://www.w3.org/TR/WCAG/#non-text-contrast">WCAG 2.1 non-text color contrast ratio of 3:1</a>), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.</p>
|
||||
<h3 id="visually-hidden-content">Visually hidden content <a class="anchor-link" href="#visually-hidden-content" aria-label="Link to this section: Visually hidden content"></a></h3>
|
||||
<p>Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the <code>.visually-hidden</code> class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.</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">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-danger"</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">"visually-hidden"</span><span class="p">></span>Danger: <span class="p"></</span><span class="nt">span</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> This action is not reversible
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p>For visually hidden interactive controls, such as traditional “skip” links, use the <code>.visually-hidden-focusable</code> class. This will ensure that the control becomes visible once focused (for sighted keyboard users). <strong>Watch out, compared to the equivalent <code>.sr-only</code> and <code>.sr-only-focusable</code> classes in past versions, Bootstrap 5’s <code>.visually-hidden-focusable</code> is a standalone class, and must not be used in combination with the <code>.visually-hidden</code> class.</strong></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">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"visually-hidden-focusable"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#content"</span><span class="p">></span>Skip to main content<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h3 id="reduced-motion">Reduced motion <a class="anchor-link" href="#reduced-motion" aria-label="Link to this section: Reduced motion"></a></h3>
|
||||
<p>Bootstrap includes support for the <a href="https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion"><code>prefers-reduced-motion</code> media feature</a>. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.</p>
|
||||
<p>On browsers that support <code>prefers-reduced-motion</code>, and where the user has <em>not</em> explicitly signaled that they’d prefer reduced motion (i.e. where <code>prefers-reduced-motion: no-preference</code>), Bootstrap enables smooth scrolling using the <code>scroll-behavior</code> property.</p>
|
||||
<h2 id="additional-resources">Additional resources <a class="anchor-link" href="#additional-resources" aria-label="Link to this section: Additional resources"></a></h2>
|
||||
<ul>
|
||||
<li><a href="https://www.w3.org/TR/WCAG/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li>
|
||||
<li><a href="https://www.a11yproject.com/">The A11Y Project</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN accessibility documentation</a></li>
|
||||
<li><a href="https://tenon.io/">Tenon.io Accessibility Checker</a></li>
|
||||
<li><a href="https://www.tpgi.com/color-contrast-checker/">Color Contrast Analyser (CCA)</a></li>
|
||||
<li><a href="https://github.com/squizlabs/HTML_CodeSniffer">“HTML Codesniffer” bookmarklet for identifying accessibility issues</a></li>
|
||||
<li><a href="https://accessibilityinsights.io/">Microsoft Accessibility Insights</a></li>
|
||||
<li><a href="https://www.deque.com/axe/">Deque Axe testing tools</a></li>
|
||||
<li><a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">Introduction to Web Accessibility</a></li>
|
||||
</ul>
|
||||
|
||||
</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>
|
||||
626
docs/5.2/getting-started/best-practices/index.html
Normal file
626
docs/5.2/getting-started/best-practices/index.html
Normal file
@@ -0,0 +1,626 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.">
|
||||
<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>Best practices · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/best-practices/"><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="Best practices">
|
||||
<meta name="twitter:description" content="Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.">
|
||||
<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/getting-started/best-practices/">
|
||||
<meta property="og:title" content="Best practices">
|
||||
<meta property="og:description" content="Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.">
|
||||
<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/getting-started/best-practices/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/getting-started/best-practices/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/getting-started/best-practices/">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">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/getting-started/best-practices.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">Best practices</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<p>We’ve designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we’ve gathered from years of working on and using it ourselves.</p>
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<strong>Heads up!</strong> This copy is a work in progress.
|
||||
</div>
|
||||
|
||||
<h3 id="general-outline">General outline <a class="anchor-link" href="#general-outline" aria-label="Link to this section: General outline"></a></h3>
|
||||
<ul>
|
||||
<li>Working with CSS</li>
|
||||
<li>Working with Sass files</li>
|
||||
<li>Building new CSS components</li>
|
||||
<li>Working with flexbox</li>
|
||||
<li>Ask in <a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
</ul>
|
||||
|
||||
</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>
|
||||
740
docs/5.2/getting-started/browsers-devices/index.html
Normal file
740
docs/5.2/getting-started/browsers-devices/index.html
Normal file
@@ -0,0 +1,740 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.">
|
||||
<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>Browsers and devices · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/browsers-devices/"><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="Browsers and devices">
|
||||
<meta name="twitter:description" content="Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.">
|
||||
<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/getting-started/browsers-devices/">
|
||||
<meta property="og:title" content="Browsers and devices">
|
||||
<meta property="og:description" content="Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.">
|
||||
<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/getting-started/browsers-devices/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/getting-started/browsers-devices/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/">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 active" aria-current="page">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">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/getting-started/browsers-devices.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">Browsers and devices</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.</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="#supported-browsers">Supported browsers</a>
|
||||
<ul>
|
||||
<li><a href="#mobile-devices">Mobile devices</a></li>
|
||||
<li><a href="#desktop-browsers">Desktop browsers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#internet-explorer">Internet Explorer</a></li>
|
||||
<li><a href="#modals-and-dropdowns-on-mobile">Modals and dropdowns on mobile</a>
|
||||
<ul>
|
||||
<li><a href="#overflow-and-scrolling">Overflow and scrolling</a></li>
|
||||
<li><a href="#ios-text-fields-and-scrolling">iOS text fields and scrolling</a></li>
|
||||
<li><a href="#navbar-dropdowns">Navbar Dropdowns</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#browser-zooming">Browser zooming</a></li>
|
||||
<li><a href="#validators">Validators</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="supported-browsers">Supported browsers <a class="anchor-link" href="#supported-browsers" aria-label="Link to this section: Supported browsers"></a></h2>
|
||||
<p>Bootstrap supports the <strong>latest, stable releases</strong> of all major browsers and platforms.</p>
|
||||
<p>Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.</p>
|
||||
<p>You can find our supported range of browsers and their versions <a href="https://github.com/twbs/bootstrap/blob/v5.2.0-beta1/.browserslistrc">in our <code>.browserslistrc file</code></a>:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl"># https://github.com/browserslist/browserslist#readme
|
||||
|
||||
>= 0.5%
|
||||
last 2 major versions
|
||||
not dead
|
||||
Chrome >= 60
|
||||
Firefox >= 60
|
||||
Firefox ESR
|
||||
iOS >= 12
|
||||
Safari >= 12
|
||||
not Explorer <= 11
|
||||
</span></span></code></pre></div><p>We use <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> to handle intended browser support via CSS prefixes, which uses <a href="https://github.com/browserslist/browserslist">Browserslist</a> to manage these browser versions. Consult their documentation for how to integrate these tools into your projects.</p>
|
||||
<h3 id="mobile-devices">Mobile devices <a class="anchor-link" href="#mobile-devices" aria-label="Link to this section: Mobile devices"></a></h3>
|
||||
<p>Generally speaking, Bootstrap supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported.</p>
|
||||
<div class="table-responsive"><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Chrome</th>
|
||||
<th>Firefox</th>
|
||||
<th>Safari</th>
|
||||
<th>Android Browser & WebView</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Android</strong></td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td><span class="text-muted">—</span></td>
|
||||
<td>v6.0+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Windows</strong></td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td><span class="text-muted">—</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h3 id="desktop-browsers">Desktop browsers <a class="anchor-link" href="#desktop-browsers" aria-label="Link to this section: Desktop browsers"></a></h3>
|
||||
<p>Similarly, the latest versions of most desktop browsers are supported.</p>
|
||||
<div class="table-responsive"><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Chrome</th>
|
||||
<th>Firefox</th>
|
||||
<th>Microsoft Edge</th>
|
||||
<th>Opera</th>
|
||||
<th>Safari</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Mac</strong></td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Windows</strong></td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td><span class="text-muted">—</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<p>For Firefox, in addition to the latest normal stable release, we also support the latest <a href="https://www.mozilla.org/en-US/firefox/enterprise/">Extended Support Release (ESR)</a> version of Firefox.</p>
|
||||
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, and Firefox for Linux, though they are not officially supported.</p>
|
||||
<h2 id="internet-explorer">Internet Explorer <a class="anchor-link" href="#internet-explorer" aria-label="Link to this section: Internet Explorer"></a></h2>
|
||||
<p>Internet Explorer is not supported. <strong>If you require Internet Explorer support, please use Bootstrap v4.</strong></p>
|
||||
<h2 id="modals-and-dropdowns-on-mobile">Modals and dropdowns on mobile <a class="anchor-link" href="#modals-and-dropdowns-on-mobile" aria-label="Link to this section: Modals and dropdowns on mobile"></a></h2>
|
||||
<h3 id="overflow-and-scrolling">Overflow and scrolling <a class="anchor-link" href="#overflow-and-scrolling" aria-label="Link to this section: Overflow and scrolling"></a></h3>
|
||||
<p>Support for <code>overflow: hidden;</code> on the <code><body></code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices’ browsers, the <code><body></code> content will begin to scroll. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=175502">Chrome bug #175502</a> (fixed in Chrome v40) and <a href="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a>.</p>
|
||||
<h3 id="ios-text-fields-and-scrolling">iOS text fields and scrolling <a class="anchor-link" href="#ios-text-fields-and-scrolling" aria-label="Link to this section: iOS text fields and scrolling"></a></h3>
|
||||
<p>As of iOS 9.2, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual <code><input></code> or a <code><textarea></code>, the <code><body></code> content underneath the modal will be scrolled instead of the modal itself. See <a href="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a>.</p>
|
||||
<h3 id="navbar-dropdowns">Navbar Dropdowns <a class="anchor-link" href="#navbar-dropdowns" aria-label="Link to this section: Navbar Dropdowns"></a></h3>
|
||||
<p>The <code>.dropdown-backdrop</code> element isn’t used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile">any other element which will fire a click event in iOS</a>).</p>
|
||||
<h2 id="browser-zooming">Browser zooming <a class="anchor-link" href="#browser-zooming" aria-label="Link to this section: Browser zooming"></a></h2>
|
||||
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
|
||||
<h2 id="validators">Validators <a class="anchor-link" href="#validators" aria-label="Link to this section: Validators"></a></h2>
|
||||
<p>In order to provide the best possible experience to old and buggy browsers, Bootstrap uses <a href="http://browserhacks.com/">CSS browser hacks</a> in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.</p>
|
||||
<p>These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.</p>
|
||||
<p>Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">a certain Firefox bug</a>.</p>
|
||||
|
||||
</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/getting-started/build-tools/index.html
Normal file
12
docs/5.2/getting-started/build-tools/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/getting-started/contribute/</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/contribute/">
|
||||
<meta name="robots" content="noindex">
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/5.2/getting-started/contribute/">
|
||||
</head>
|
||||
</html>
|
||||
|
||||
762
docs/5.2/getting-started/contents/index.html
Normal file
762
docs/5.2/getting-started/contents/index.html
Normal file
@@ -0,0 +1,762 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Discover what’s included in Bootstrap, including our precompiled and source code flavors.">
|
||||
<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>Contents · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/contents/"><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="Contents">
|
||||
<meta name="twitter:description" content="Discover what’s included in Bootstrap, including our precompiled and source code flavors.">
|
||||
<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/getting-started/contents/">
|
||||
<meta property="og:title" content="Contents">
|
||||
<meta property="og:description" content="Discover what’s included in Bootstrap, including our precompiled and source code flavors.">
|
||||
<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/getting-started/contents/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/getting-started/contents/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/getting-started/contents/">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 active" aria-current="page">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">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/getting-started/contents.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">Contents</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Discover what’s included in Bootstrap, including our precompiled and source code flavors.</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="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
|
||||
<li><a href="#css-files">CSS files</a></li>
|
||||
<li><a href="#js-files">JS files</a></li>
|
||||
<li><a href="#bootstrap-source-code">Bootstrap source code</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="precompiled-bootstrap">Precompiled Bootstrap <a class="anchor-link" href="#precompiled-bootstrap" aria-label="Link to this section: Precompiled Bootstrap"></a></h2>
|
||||
<p>Once downloaded, unzip the compressed folder and you’ll see something like this:</p>
|
||||
<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too, but be sure to keep in mind to add the `dist` folder. -->
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">bootstrap/
|
||||
</span></span><span class="line"><span class="cl">├── css/
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-grid.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-grid.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-grid.min.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-grid.min.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-grid.rtl.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-grid.rtl.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-grid.rtl.min.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-grid.rtl.min.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-reboot.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-reboot.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-reboot.min.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-reboot.min.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-reboot.rtl.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-reboot.rtl.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-reboot.rtl.min.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-reboot.rtl.min.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-utilities.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-utilities.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-utilities.min.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-utilities.min.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-utilities.rtl.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-utilities.rtl.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-utilities.rtl.min.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap-utilities.rtl.min.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap.min.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap.min.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap.rtl.css
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap.rtl.css.map
|
||||
</span></span><span class="line"><span class="cl">│ ├── bootstrap.rtl.min.css
|
||||
</span></span><span class="line"><span class="cl">│ └── bootstrap.rtl.min.css.map
|
||||
</span></span><span class="line"><span class="cl">└── js/
|
||||
</span></span><span class="line"><span class="cl"> ├── bootstrap.bundle.js
|
||||
</span></span><span class="line"><span class="cl"> ├── bootstrap.bundle.js.map
|
||||
</span></span><span class="line"><span class="cl"> ├── bootstrap.bundle.min.js
|
||||
</span></span><span class="line"><span class="cl"> ├── bootstrap.bundle.min.js.map
|
||||
</span></span><span class="line"><span class="cl"> ├── bootstrap.esm.js
|
||||
</span></span><span class="line"><span class="cl"> ├── bootstrap.esm.js.map
|
||||
</span></span><span class="line"><span class="cl"> ├── bootstrap.esm.min.js
|
||||
</span></span><span class="line"><span class="cl"> ├── bootstrap.esm.min.js.map
|
||||
</span></span><span class="line"><span class="cl"> ├── bootstrap.js
|
||||
</span></span><span class="line"><span class="cl"> ├── bootstrap.js.map
|
||||
</span></span><span class="line"><span class="cl"> ├── bootstrap.min.js
|
||||
</span></span><span class="line"><span class="cl"> └── bootstrap.min.js.map
|
||||
</span></span></code></pre></div><p>This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps">Source maps</a> (<code>bootstrap.*.map</code>) are available for use with certain browsers’ developer tools. Bundled JS files (<code>bootstrap.bundle.js</code> and minified <code>bootstrap.bundle.min.js</code>) include <a href="https://popper.js.org/">Popper</a>.</p>
|
||||
<h2 id="css-files">CSS files <a class="anchor-link" href="#css-files" aria-label="Link to this section: CSS files"></a></h2>
|
||||
<p>Bootstrap includes a handful of options for including some or all of our compiled CSS.</p>
|
||||
<div class="table-responsive"><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>CSS files</th>
|
||||
<th>Layout</th>
|
||||
<th>Content</th>
|
||||
<th>Components</th>
|
||||
<th>Utilities</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>bootstrap.css</code><br> <code>bootstrap.min.css</code><br> <code>bootstrap.rtl.css</code><br> <code>bootstrap.rtl.min.css</code></td>
|
||||
<td>Included</td>
|
||||
<td>Included</td>
|
||||
<td>Included</td>
|
||||
<td>Included</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>bootstrap-grid.css</code><br> <code>bootstrap-grid.rtl.css</code><br> <code>bootstrap-grid.min.css</code><br> <code>bootstrap-grid.rtl.min.css</code></td>
|
||||
<td><a href="/docs/5.2/layout/grid/">Only grid system</a></td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td><a href="/docs/5.2/utilities/flex/">Only flex utilities</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>bootstrap-utilities.css</code><br> <code>bootstrap-utilities.rtl.css</code><br> <code>bootstrap-utilities.min.css</code><br> <code>bootstrap-utilities.rtl.min.css</code></td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td>Included</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>bootstrap-reboot.css</code><br> <code>bootstrap-reboot.rtl.css</code><br> <code>bootstrap-reboot.min.css</code><br> <code>bootstrap-reboot.rtl.min.css</code></td>
|
||||
<td>—</td>
|
||||
<td><a href="/docs/5.2/content/reboot/">Only Reboot</a></td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h2 id="js-files">JS files <a class="anchor-link" href="#js-files" aria-label="Link to this section: JS files"></a></h2>
|
||||
<p>Similarly, we have options for including some or all of our compiled JavaScript.</p>
|
||||
<div class="table-responsive"><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>JS Files</th>
|
||||
<th>Popper</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>bootstrap.bundle.js</code><br> <code>bootstrap.bundle.min.js</code><br></td>
|
||||
<td>Included</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>bootstrap.js</code><br> <code>bootstrap.min.js</code><br></td>
|
||||
<td>–</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h2 id="bootstrap-source-code">Bootstrap source code <a class="anchor-link" href="#bootstrap-source-code" aria-label="Link to this section: Bootstrap source code"></a></h2>
|
||||
<p>The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">bootstrap/
|
||||
</span></span><span class="line"><span class="cl">├── dist/
|
||||
</span></span><span class="line"><span class="cl">│ ├── css/
|
||||
</span></span><span class="line"><span class="cl">│ └── js/
|
||||
</span></span><span class="line"><span class="cl">├── site/
|
||||
</span></span><span class="line"><span class="cl">│ └──content/
|
||||
</span></span><span class="line"><span class="cl">│ └── docs/
|
||||
</span></span><span class="line"><span class="cl">│ └── 5.2/
|
||||
</span></span><span class="line"><span class="cl">│ └── examples/
|
||||
</span></span><span class="line"><span class="cl">├── js/
|
||||
</span></span><span class="line"><span class="cl">└── scss/
|
||||
</span></span></code></pre></div><p>The <code>scss/</code> and <code>js/</code> are the source code for our CSS and JavaScript. The <code>dist/</code> folder includes everything listed in the precompiled download section above. The <code>site/docs/</code> folder includes the source code for our documentation, and <code>examples/</code> of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.</p>
|
||||
|
||||
</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>
|
||||
695
docs/5.2/getting-started/contribute/index.html
Normal file
695
docs/5.2/getting-started/contribute/index.html
Normal file
@@ -0,0 +1,695 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Help develop Bootstrap with our documentation build scripts and tests.">
|
||||
<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>Contribute · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/contribute/"><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="Contribute">
|
||||
<meta name="twitter:description" content="Help develop Bootstrap with our documentation build scripts and tests.">
|
||||
<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/getting-started/contribute/">
|
||||
<meta property="og:title" content="Contribute">
|
||||
<meta property="og:description" content="Help develop Bootstrap with our documentation build scripts and tests.">
|
||||
<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/getting-started/contribute/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/getting-started/contribute/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/getting-started/contribute/">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 active" aria-current="page">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">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/getting-started/contribute.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">Contribute</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Help develop Bootstrap with our documentation build scripts and tests.</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="#tooling-setup">Tooling setup</a></li>
|
||||
<li><a href="#using-npm-scripts">Using npm scripts</a></li>
|
||||
<li><a href="#sass">Sass</a></li>
|
||||
<li><a href="#autoprefixer">Autoprefixer</a></li>
|
||||
<li><a href="#rtlcss">RTLCSS</a></li>
|
||||
<li><a href="#local-documentation">Local documentation</a></li>
|
||||
<li><a href="#troubleshooting">Troubleshooting</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="tooling-setup">Tooling setup <a class="anchor-link" href="#tooling-setup" aria-label="Link to this section: Tooling setup"></a></h2>
|
||||
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts/">npm scripts</a> to build the documentation and compile source files. Our <a href="https://github.com/twbs/bootstrap/blob/v5.2.0-beta1/package.json">package.json</a> houses these scripts for compiling code, running tests, and more. These aren’t intended for use outside our repository and documentation.</p>
|
||||
<p>To use our build system and run our documentation locally, you’ll need a copy of Bootstrap’s source files and Node. Follow these steps and you should be ready to rock:</p>
|
||||
<ol>
|
||||
<li><a href="https://nodejs.org/en/download/">Download and install Node.js</a>, which we use to manage our dependencies.</li>
|
||||
<li>Either <a href="https://github.com/twbs/bootstrap/archive/v5.2.0-beta1.zip">download Bootstrap’s sources</a> or fork <a href="https://github.com/twbs/bootstrap">Bootstrap’s repository</a>.</li>
|
||||
<li>Navigate to the root <code>/bootstrap</code> directory and run <code>npm install</code> to install our local dependencies listed in <a href="https://github.com/twbs/bootstrap/blob/v5.2.0-beta1/package.json">package.json</a>.</li>
|
||||
</ol>
|
||||
<p>When completed, you’ll be able to run the various commands provided from the command line.</p>
|
||||
<h2 id="using-npm-scripts">Using npm scripts <a class="anchor-link" href="#using-npm-scripts" aria-label="Link to this section: Using npm scripts"></a></h2>
|
||||
<p>Our <a href="https://github.com/twbs/bootstrap/blob/v5.2.0-beta1/package.json">package.json</a> includes numerous tasks for developing the project. Run <code>npm run</code> to see all the npm scripts in your terminal. <strong>Primary tasks include:</strong></p>
|
||||
<div class="table-responsive"><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Task</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>npm start</code></td>
|
||||
<td>Compiles CSS and JavaScript, builds the documentation, and starts a local server.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>npm run dist</code></td>
|
||||
<td>Creates the <code>dist/</code> directory with compiled files. Uses <a href="https://sass-lang.com/">Sass</a>, <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, and <a href="https://github.com/terser/terser">terser</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>npm test</code></td>
|
||||
<td>Runs tests locally after running <code>npm run dist</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>npm run docs-serve</code></td>
|
||||
<td>Builds and runs the documentation locally.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<strong>Get started with Bootstrap via npm with our starter project!</strong> Head to the <a href="https://github.com/twbs/bootstrap-npm-starter">twbs/bootstrap-npm-starter</a> template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons.
|
||||
</div>
|
||||
|
||||
<h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
|
||||
<p>Bootstrap uses <a href="https://sass-lang.com/dart-sass">Dart Sass</a> for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you’re compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now <a href="https://sass-lang.com/blog/libsass-is-deprecated">deprecated</a>.</p>
|
||||
<p>Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don’t lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding.</p>
|
||||
<h2 id="autoprefixer">Autoprefixer <a class="anchor-link" href="#autoprefixer" aria-label="Link to this section: Autoprefixer"></a></h2>
|
||||
<p>Bootstrap uses <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.</p>
|
||||
<p>We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See <a href="https://github.com/twbs/bootstrap/blob/v5.2.0-beta1/.browserslistrc">.browserslistrc</a> for details.</p>
|
||||
<h2 id="rtlcss">RTLCSS <a class="anchor-link" href="#rtlcss" aria-label="Link to this section: RTLCSS"></a></h2>
|
||||
<p>Bootstrap uses <a href="https://rtlcss.com/">RTLCSS</a> to process compiled CSS and convert them to RTL – basically replacing horizontal direction aware properties (eg. <code>padding-left</code>) with their opposite. It allows us only write our CSS a single time and make minor tweaks using RTLCSS <a href="https://rtlcss.com/learn/usage-guide/control-directives/">control</a> and <a href="https://rtlcss.com/learn/usage-guide/value-directives/">value</a> directives.</p>
|
||||
<h2 id="local-documentation">Local documentation <a class="anchor-link" href="#local-documentation" aria-label="Link to this section: Local documentation"></a></h2>
|
||||
<p>Running our documentation locally requires the use of Hugo, which gets installed via the <a href="https://www.npmjs.com/package/hugo-bin">hugo-bin</a> npm package. Hugo is a blazingly fast and quite extensible static site generator that provides us: basic includes, Markdown-based files, templates, and more. Here’s how to get it started:</p>
|
||||
<ol>
|
||||
<li>Run through the <a href="#tooling-setup">tooling setup</a> above to install all dependencies.</li>
|
||||
<li>From the root <code>/bootstrap</code> directory, run <code>npm run docs-serve</code> in the command line.</li>
|
||||
<li>Open <code>http://localhost:9001/</code> in your browser, and voilà.</li>
|
||||
</ol>
|
||||
<p>Learn more about using Hugo by reading its <a href="https://gohugo.io/documentation/">documentation</a>.</p>
|
||||
<h2 id="troubleshooting">Troubleshooting <a class="anchor-link" href="#troubleshooting" aria-label="Link to this section: Troubleshooting"></a></h2>
|
||||
<p>Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun <code>npm install</code>.</p>
|
||||
|
||||
</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>
|
||||
699
docs/5.2/getting-started/download/index.html
Normal file
699
docs/5.2/getting-started/download/index.html
Normal file
@@ -0,0 +1,699 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
|
||||
<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>Download · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/download/"><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="Download">
|
||||
<meta name="twitter:description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
|
||||
<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/getting-started/download/">
|
||||
<meta property="og:title" content="Download">
|
||||
<meta property="og:description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
|
||||
<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/getting-started/download/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/getting-started/download/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/getting-started/download/">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 active" aria-current="page">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">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/getting-started/download.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">Download</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-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="#compiled-css-and-js">Compiled CSS and JS</a></li>
|
||||
<li><a href="#source-files">Source files</a></li>
|
||||
<li><a href="#examples">Examples</a></li>
|
||||
<li><a href="#cdn-via-jsdelivr">CDN via jsDelivr</a></li>
|
||||
<li><a href="#package-managers">Package managers</a>
|
||||
<ul>
|
||||
<li><a href="#npm">npm</a></li>
|
||||
<li><a href="#yarn">yarn</a></li>
|
||||
<li><a href="#rubygems">RubyGems</a></li>
|
||||
<li><a href="#composer">Composer</a></li>
|
||||
<li><a href="#nuget">NuGet</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="compiled-css-and-js">Compiled CSS and JS <a class="anchor-link" href="#compiled-css-and-js" aria-label="Link to this section: Compiled CSS and JS"></a></h2>
|
||||
<p>Download ready-to-use compiled code for <strong>Bootstrap v5.2.0-beta1</strong> to easily drop into your project, which includes:</p>
|
||||
<ul>
|
||||
<li>Compiled and minified CSS bundles (see <a href="/docs/5.2/getting-started/contents/#css-files">CSS files comparison</a>)</li>
|
||||
<li>Compiled and minified JavaScript plugins (see <a href="/docs/5.2/getting-started/contents/#js-files">JS files comparison</a>)</li>
|
||||
</ul>
|
||||
<p>This doesn’t include documentation, source files, or any optional JavaScript dependencies like Popper.</p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v5.2.0-beta1/bootstrap-5.2.0-beta1-dist.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a></p>
|
||||
<h2 id="source-files">Source files <a class="anchor-link" href="#source-files" aria-label="Link to this section: Source files"></a></h2>
|
||||
<p>Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:</p>
|
||||
<ul>
|
||||
<li><a href="/docs/5.2/getting-started/contribute/#sass">Sass compiler</a> for compiling Sass source files into CSS files</li>
|
||||
<li><a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> for CSS vendor prefixing</li>
|
||||
</ul>
|
||||
<p>Should you require our full set of <a href="/docs/5.2/getting-started/contribute/#tooling-setup">build tools</a>, they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.</p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/archive/v5.2.0-beta1.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a></p>
|
||||
<h2 id="examples">Examples <a class="anchor-link" href="#examples" aria-label="Link to this section: Examples"></a></h2>
|
||||
<p>If you want to download and examine our <a href="/docs/5.2/examples/">examples</a>, you can grab the already built examples:</p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v5.2.0-beta1/bootstrap-5.2.0-beta1-examples.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Examples');">Download Examples</a></p>
|
||||
<h2 id="cdn-via-jsdelivr">CDN via jsDelivr <a class="anchor-link" href="#cdn-via-jsdelivr" aria-label="Link to this section: CDN via jsDelivr"></a></h2>
|
||||
<p>Skip the download with <a href="https://www.jsdelivr.com/">jsDelivr</a> to deliver cached version of Bootstrap’s compiled CSS and JS to your project.</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">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p>If you’re using our compiled JavaScript and prefer to include Popper separately, add Popper before our JS, via a CDN preferably.</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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h2 id="package-managers">Package managers <a class="anchor-link" href="#package-managers" aria-label="Link to this section: Package managers"></a></h2>
|
||||
<p>Pull in Bootstrap’s <strong>source files</strong> into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will <strong>require a <a href="/docs/5.2/getting-started/contribute/#sass">Sass compiler</a> and <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a></strong> for a setup that matches our official compiled versions.</p>
|
||||
<h3 id="npm">npm <a class="anchor-link" href="#npm" aria-label="Link to this section: npm"></a></h3>
|
||||
<p>Install Bootstrap in your Node.js powered apps with <a href="https://www.npmjs.com/package/bootstrap">the npm package</a>:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm install bootstrap@5.2.0-beta1
|
||||
</span></span></code></pre></div><p><code>const bootstrap = require('bootstrap')</code> or <code>import bootstrap from 'bootstrap'</code> will load all of Bootstrap’s plugins onto a <code>bootstrap</code> object.
|
||||
The <code>bootstrap</code> module itself exports all of our plugins. You can manually load Bootstrap’s plugins individually by loading the <code>/js/dist/*.js</code> files under the package’s top-level directory.</p>
|
||||
<p>Bootstrap’s <code>package.json</code> contains some additional metadata under the following keys:</p>
|
||||
<ul>
|
||||
<li><code>sass</code> - path to Bootstrap’s main <a href="https://sass-lang.com/">Sass</a> source file</li>
|
||||
<li><code>style</code> - path to Bootstrap’s non-minified CSS that’s been precompiled using the default settings (no customization)</li>
|
||||
</ul>
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<strong>Get started with Bootstrap via npm with our starter project!</strong> Head to the <a href="https://github.com/twbs/bootstrap-npm-starter">twbs/bootstrap-npm-starter</a> template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons.
|
||||
</div>
|
||||
|
||||
<h3 id="yarn">yarn <a class="anchor-link" href="#yarn" aria-label="Link to this section: yarn"></a></h3>
|
||||
<p>Install Bootstrap in your Node.js powered apps with <a href="https://yarnpkg.com/en/package/bootstrap">the yarn package</a>:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">yarn add bootstrap@5.2.0-beta1
|
||||
</span></span></code></pre></div><h3 id="rubygems">RubyGems <a class="anchor-link" href="#rubygems" aria-label="Link to this section: RubyGems"></a></h3>
|
||||
<p>Install Bootstrap in your Ruby apps using <a href="https://bundler.io/">Bundler</a> (<strong>recommended</strong>) and <a href="https://rubygems.org/">RubyGems</a> by adding the following line to your <a href="https://bundler.io/gemfile.html"><code>Gemfile</code></a>:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-ruby" data-lang="ruby"><span class="line"><span class="cl"><span class="n">gem</span> <span class="s1">'bootstrap'</span><span class="p">,</span> <span class="s1">'~> 5.2.0-beta1'</span>
|
||||
</span></span></code></pre></div><p>Alternatively, if you’re not using Bundler, you can install the gem by running this command:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">gem install bootstrap -v 5.2.0-beta1
|
||||
</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap-rubygem/blob/master/README.md">See the gem’s README</a> for further details.</p>
|
||||
<h3 id="composer">Composer <a class="anchor-link" href="#composer" aria-label="Link to this section: Composer"></a></h3>
|
||||
<p>You can also install and manage Bootstrap’s Sass and JavaScript using <a href="https://getcomposer.org/">Composer</a>:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">composer require twbs/bootstrap:5.2.0-beta1
|
||||
</span></span></code></pre></div><h3 id="nuget">NuGet <a class="anchor-link" href="#nuget" aria-label="Link to this section: NuGet"></a></h3>
|
||||
<p>If you develop in .NET Framework, you can also install and manage Bootstrap’s <a href="https://www.nuget.org/packages/bootstrap/">CSS</a> or <a href="https://www.nuget.org/packages/bootstrap.sass/">Sass</a> and JavaScript using <a href="https://www.nuget.org/">NuGet</a>. Newer projects should use <a href="https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/">libman</a> or another method as NuGet is designed for compiled code, not frontend assets.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-powershell" data-lang="powershell"><span class="line"><span class="cl"><span class="nb">Install-Package</span> <span class="n">bootstrap</span>
|
||||
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-powershell" data-lang="powershell"><span class="line"><span class="cl"><span class="nb">Install-Package</span> <span class="n">bootstrap</span><span class="p">.</span><span class="n">sass</span>
|
||||
</span></span></code></pre></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.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/getting-started/index.html
Normal file
12
docs/5.2/getting-started/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/getting-started/introduction/</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/introduction/">
|
||||
<meta name="robots" content="noindex">
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/5.2/getting-started/introduction/">
|
||||
</head>
|
||||
</html>
|
||||
|
||||
771
docs/5.2/getting-started/introduction/index.html
Normal file
771
docs/5.2/getting-started/introduction/index.html
Normal file
@@ -0,0 +1,771 @@
|
||||
<!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 is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.">
|
||||
<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>Get started with Bootstrap · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/introduction/"><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="Get started with Bootstrap">
|
||||
<meta name="twitter:description" content="Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.">
|
||||
<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/getting-started/introduction/">
|
||||
<meta property="og:title" content="Get started with Bootstrap">
|
||||
<meta property="og:description" content="Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.">
|
||||
<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/getting-started/introduction/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/getting-started/introduction/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/getting-started/introduction/">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 active" aria-current="page">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">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/getting-started/introduction.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">Get started with Bootstrap</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.</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="#quick-start">Quick start</a></li>
|
||||
<li><a href="#cdn-links">CDN links</a></li>
|
||||
<li><a href="#next-steps">Next steps</a></li>
|
||||
<li><a href="#js-components">JS components</a></li>
|
||||
<li><a href="#important-globals">Important globals</a>
|
||||
<ul>
|
||||
<li><a href="#html5-doctype">HTML5 doctype</a></li>
|
||||
<li><a href="#responsive-meta-tag">Responsive meta tag</a></li>
|
||||
<li><a href="#box-sizing">Box-sizing</a></li>
|
||||
<li><a href="#reboot">Reboot</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#community">Community</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="quick-start">Quick start <a class="anchor-link" href="#quick-start" aria-label="Link to this section: Quick start"></a></h2>
|
||||
<p>Get started by including Bootstrap’s production-ready CSS and JavaScript via CDN without the need for any build steps. See it in practice with this <a href="https://codepen.io/team/bootstrap/pen/qBamdLj">Bootstrap CodePen demo</a>.</p>
|
||||
<br>
|
||||
<ol>
|
||||
<li>
|
||||
<p><strong>Create a new <code>index.html</code> file in your project root.</strong> Include the <code><meta name="viewport></code> tag as well for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag">proper responsive behavior</a> in mobile devices.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!doctype html></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Bootstrap demo<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello, world!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
||||
</span></span></code></pre></div></li>
|
||||
<li>
|
||||
<p><strong>Include Bootstrap’s CSS and JS.</strong> Place the <code><link></code> tag in the <code><head></code> for our CSS, and the <code><script></code> tag for our JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing <code></body></code>. Learn more about our <a href="#cdn-links">CDN links</a>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!doctype html></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Bootstrap demo<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello, world!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p>You can also include <a href="https://popper.js.org/">Popper</a> and our JS separately. If you don’t plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.</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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
||||
</span></span></code></pre></div></li>
|
||||
<li>
|
||||
<p><strong>Hello, world!</strong> Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own <a href="/docs/5.2/layout/grid/">layout</a>, adding dozens of <a href="/docs/5.2/components/buttons/">components</a>, and utilizing <a href="/docs/5.2/examples/">our official examples</a>.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<h2 id="cdn-links">CDN links <a class="anchor-link" href="#cdn-links" aria-label="Link to this section: CDN links"></a></h2>
|
||||
<p>As reference, here are our primary CDN links.</p>
|
||||
<div class="table-responsive"><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<th>URL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>CSS</td>
|
||||
<td><code>https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>JS</td>
|
||||
<td><code>https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<p>You can also use the CDN to fetch any of our <a href="/docs/5.2/getting-started/contents/">additional builds listed in the Contents page</a>.</p>
|
||||
<h2 id="next-steps">Next steps <a class="anchor-link" href="#next-steps" aria-label="Link to this section: Next steps"></a></h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Read a bit more about some <a href="#important-globals">important global environment settings</a> that Bootstrap utilizes.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Read about what’s included in Bootstrap in our <a href="/docs/5.2/getting-started/contents/#precompiled-bootstrap">contents section</a> and the list of <a href="#js-components">components that require JavaScript</a> below.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Need a little more power? Consider building with Bootstrap by <a href="/docs/5.2/getting-started/download/#package-managers">including the source files via package manager</a>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Looking to use Bootstrap as a module with <code><script type="module"></code>? Please refer to our <a href="/docs/5.2/getting-started/javascript/#using-bootstrap-as-a-module">using Bootstrap as a module</a> section.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2 id="js-components">JS components <a class="anchor-link" href="#js-components" aria-label="Link to this section: JS components"></a></h2>
|
||||
<p>Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.</p>
|
||||
<details>
|
||||
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
|
||||
<ul>
|
||||
<li>Alerts for dismissing</li>
|
||||
<li>Buttons for toggling states and checkbox/radio functionality</li>
|
||||
<li>Carousel for all slide behaviors, controls, and indicators</li>
|
||||
<li>Collapse for toggling visibility of content</li>
|
||||
<li>Dropdowns for displaying and positioning (also requires <a href="https://popper.js.org/">Popper</a>)</li>
|
||||
<li>Modals for displaying, positioning, and scroll behavior</li>
|
||||
<li>Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors</li>
|
||||
<li>Navs with the Tab plugin for toggling content panes</li>
|
||||
<li>Offcanvases for displaying, positioning, and scroll behavior</li>
|
||||
<li>Scrollspy for scroll behavior and navigation updates</li>
|
||||
<li>Toasts for displaying and dismissing</li>
|
||||
<li>Tooltips and popovers for displaying and positioning (also requires <a href="https://popper.js.org/">Popper</a>)</li>
|
||||
</ul>
|
||||
|
||||
</details>
|
||||
<h2 id="important-globals">Important globals <a class="anchor-link" href="#important-globals" aria-label="Link to this section: Important globals"></a></h2>
|
||||
<p>Bootstrap employs a handful of important global styles and settings, all of which are almost exclusively geared towards the <em>normalization</em> of cross browser styles. Let’s dive in.</p>
|
||||
<h3 id="html5-doctype">HTML5 doctype <a class="anchor-link" href="#html5-doctype" aria-label="Link to this section: HTML5 doctype"></a></h3>
|
||||
<p>Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky and incomplete styling.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!doctype html></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</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">html</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h3 id="responsive-meta-tag">Responsive meta tag <a class="anchor-link" href="#responsive-meta-tag" aria-label="Link to this section: Responsive meta tag"></a></h3>
|
||||
<p>Bootstrap is developed <em>mobile first</em>, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <code><head></code>.</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">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p>You can see an example of this in action in the <a href="#quick-start">quick start</a>.</p>
|
||||
<h3 id="box-sizing">Box-sizing <a class="anchor-link" href="#box-sizing" aria-label="Link to this section: Box-sizing"></a></h3>
|
||||
<p>For more straightforward sizing in CSS, we switch the global <code>box-sizing</code> value from <code>content-box</code> to <code>border-box</code>. This ensures <code>padding</code> does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.</p>
|
||||
<p>On the rare occasion you need to override it, use something like the following:</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">selector-for-some-widget</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">box-sizing</span><span class="p">:</span> <span class="kc">content-box</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div><p>With the above snippet, nested elements—including generated content via <code>::before</code> and <code>::after</code>—will all inherit the specified <code>box-sizing</code> for that <code>.selector-for-some-widget</code>.</p>
|
||||
<p>Learn more about <a href="https://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
|
||||
<h3 id="reboot">Reboot <a class="anchor-link" href="#reboot" aria-label="Link to this section: Reboot"></a></h3>
|
||||
<p>For improved cross-browser rendering, we use <a href="/docs/5.2/content/reboot/">Reboot</a> to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.</p>
|
||||
<h2 id="community">Community <a class="anchor-link" href="#community" aria-label="Link to this section: Community"></a></h2>
|
||||
<p>Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
|
||||
<ul>
|
||||
<li>Read and subscribe to <a href="https://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
|
||||
<li>Join <a href="https://bootstrap-slack.herokuapp.com/">the official Slack room</a>.</li>
|
||||
<li>Chat with fellow Bootstrappers in IRC. On the <code>irc.libera.chat</code> server, in the <code>#bootstrap</code> channel.</li>
|
||||
<li>Implementation help may be found at Stack Overflow (tagged <a href="https://stackoverflow.com/questions/tagged/bootstrap-5"><code>bootstrap-5</code></a>).</li>
|
||||
<li>Developers should use the keyword <code>bootstrap</code> on packages that modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/search?q=keywords:bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
|
||||
</ul>
|
||||
<p>You can also follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
|
||||
|
||||
</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>
|
||||
806
docs/5.2/getting-started/javascript/index.html
Normal file
806
docs/5.2/getting-started/javascript/index.html
Normal file
@@ -0,0 +1,806 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Bring Bootstrap to life with our optional JavaScript plugins. Learn about each plugin, our data and programmatic API options, and more.">
|
||||
<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>JavaScript · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/javascript/"><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="JavaScript">
|
||||
<meta name="twitter:description" content="Bring Bootstrap to life with our optional JavaScript plugins. Learn about each plugin, our data and programmatic API options, and more.">
|
||||
<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/getting-started/javascript/">
|
||||
<meta property="og:title" content="JavaScript">
|
||||
<meta property="og:description" content="Bring Bootstrap to life with our optional JavaScript plugins. Learn about each plugin, our data and programmatic API options, and more.">
|
||||
<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/getting-started/javascript/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/getting-started/javascript/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/getting-started/javascript/">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 active" aria-current="page">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">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/getting-started/javascript.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">JavaScript</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Bring Bootstrap to life with our optional JavaScript plugins. Learn about each plugin, our data and programmatic API options, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-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="#individual-or-compiled">Individual or compiled</a></li>
|
||||
<li><a href="#usage-with-javascript-frameworks">Usage with JavaScript frameworks</a></li>
|
||||
<li><a href="#using-bootstrap-as-a-module">Using Bootstrap as a module</a></li>
|
||||
<li><a href="#dependencies">Dependencies</a></li>
|
||||
<li><a href="#still-want-to-use-jquery-its-possible">Still want to use jQuery? It’s possible!</a></li>
|
||||
<li><a href="#data-attributes">Data attributes</a></li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
<li><a href="#programmatic-api">Programmatic API</a>
|
||||
<ul>
|
||||
<li><a href="#css-selectors-in-constructors">CSS selectors in constructors</a></li>
|
||||
<li><a href="#asynchronous-functions-and-transitions">Asynchronous functions and transitions</a></li>
|
||||
<li><a href="#default-settings">Default settings</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#no-conflict-only-if-you-use-jquery">No conflict (only if you use jQuery)</a></li>
|
||||
<li><a href="#version-numbers">Version numbers</a></li>
|
||||
<li><a href="#no-special-fallbacks-when-javascript-is-disabled">No special fallbacks when JavaScript is disabled</a></li>
|
||||
<li><a href="#sanitizer">Sanitizer</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="individual-or-compiled">Individual or compiled <a class="anchor-link" href="#individual-or-compiled" aria-label="Link to this section: Individual or compiled"></a></h2>
|
||||
<p>Plugins can be included individually (using Bootstrap’s individual <code>js/dist/*.js</code>), or all at once using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code> (don’t include both).</p>
|
||||
<p>If you use a bundler (Webpack, Rollup…), you can use <code>/js/dist/*.js</code> files which are UMD ready.</p>
|
||||
<h2 id="usage-with-javascript-frameworks">Usage with JavaScript frameworks <a class="anchor-link" href="#usage-with-javascript-frameworks" aria-label="Link to this section: Usage with JavaScript frameworks"></a></h2>
|
||||
<p>While the Bootstrap CSS can be used with any framework, <strong>the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular</strong> which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the “open” position.</p>
|
||||
<p>A better alternative for those using this type of frameworks is to use a framework-specific package <strong>instead of</strong> the Bootstrap JavaScript. Here are some of the most popular options:</p>
|
||||
<ul>
|
||||
<li>React: <a href="https://react-bootstrap.github.io/">React Bootstrap</a></li>
|
||||
<li>Vue: <a href="https://bootstrap-vue.org/">BootstrapVue</a></li>
|
||||
<li>Angular: <a href="https://ng-bootstrap.github.io/">ng-bootstrap</a></li>
|
||||
</ul>
|
||||
<h2 id="using-bootstrap-as-a-module">Using Bootstrap as a module <a class="anchor-link" href="#using-bootstrap-as-a-module" aria-label="Link to this section: Using Bootstrap as a module"></a></h2>
|
||||
<p>We provide a version of Bootstrap built as <code>ESM</code> (<code>bootstrap.esm.js</code> and <code>bootstrap.esm.min.js</code>) which allows you to use Bootstrap as a module in your browser, if your <a href="https://caniuse.com/es6-module">targeted browsers support it</a>.</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">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"module"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="kr">import</span> <span class="p">{</span> <span class="nx">Toast</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">'bootstrap.esm.min.js'</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"> <span class="nb">Array</span><span class="p">.</span><span class="nx">from</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.toast'</span><span class="p">))</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">toastNode</span> <span class="p">=></span> <span class="k">new</span> <span class="nx">Toast</span><span class="p">(</span><span class="nx">toastNode</span><span class="p">))</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
||||
</span></span></code></pre></div><div class="bd-callout bd-callout-warning">
|
||||
<h2 id="incompatible-plugins">Incompatible plugins <a class="anchor-link" href="#incompatible-plugins" aria-label="Link to this section: Incompatible plugins"></a></h2>
|
||||
<p>Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a <code><script></code> tag with <code>module</code> type because they depend on Popper. For more information about the issue see <a href="https://v8.dev/features/modules#specifiers">here</a>.
|
||||
</div>
|
||||
|
||||
<h2 id="dependencies">Dependencies <a class="anchor-link" href="#dependencies" aria-label="Link to this section: Dependencies"></a></h2>
|
||||
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.</p>
|
||||
<p>Our dropdowns, popovers and tooltips also depend on <a href="https://popper.js.org/">Popper</a>.</p>
|
||||
<h2 id="still-want-to-use-jquery-its-possible">Still want to use jQuery? It’s possible! <a class="anchor-link" href="#still-want-to-use-jquery-its-possible" aria-label="Link to this section: Still want to use jQuery? It’s possible!"></a></h2>
|
||||
<p>Bootstrap 5 is designed to be used without jQuery, but it’s still possible to use our components with jQuery. <strong>If Bootstrap detects <code>jQuery</code> in the <code>window</code> object</strong> it’ll add all of our components in jQuery’s plugin system; this means you’ll be able to do <code>$('[data-bs-toggle="tooltip"]').tooltip()</code> to enable tooltips. The same goes for our other components.</p>
|
||||
<h2 id="data-attributes">Data attributes <a class="anchor-link" href="#data-attributes" aria-label="Link to this section: Data attributes"></a></h2>
|
||||
<p>Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to <strong>only use one set of data attributes on a single element</strong> (e.g., you cannot trigger a tooltip and modal from the same button.)</p>
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h2 id="selectors">Selectors <a class="anchor-link" href="#selectors" aria-label="Link to this section: Selectors"></a></h2>
|
||||
<p>Currently to query DOM elements we use the native methods <code>querySelector</code> and <code>querySelectorAll</code> for performance reasons, so you have to use <a href="https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">valid selectors</a>.
|
||||
If you use special selectors, for example: <code>collapse:Example</code> be sure to escape them.
|
||||
</div>
|
||||
|
||||
<h2 id="events">Events <a class="anchor-link" href="#events" aria-label="Link to this section: Events"></a></h2>
|
||||
<p>Bootstrap provides custom events for most plugins’ unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is triggered on the completion of an action.</p>
|
||||
<p>All infinitive events provide <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault"><code>preventDefault()</code></a> functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call <code>preventDefault()</code>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myModal</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myModal'</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="nx">myModal</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'show.bs.modal'</span><span class="p">,</span> <span class="nx">event</span> <span class="p">=></span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="c1">// stops modal from being shown
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">})</span>
|
||||
</span></span></code></pre></div><div class="bd-callout bd-callout-warning">
|
||||
<h2 id="jquery-events">jQuery events <a class="anchor-link" href="#jquery-events" aria-label="Link to this section: jQuery events"></a></h2>
|
||||
<p>Bootstrap will detect jQuery if <code>jQuery</code> is present in the <code>window</code> object and there is no <code>data-bs-no-jquery</code> attribute set on <code><body></code>. If jQuery is found, Bootstrap will emit events thanks to jQuery’s event system. So if you want to listen to Bootstrap’s events, you’ll have to use the jQuery methods (<code>.on</code>, <code>.one</code>) instead of <code>addEventListener</code>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.tab'</span><span class="p">,</span> <span class="p">()</span> <span class="p">=></span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// do something...
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span>
|
||||
</span></span></code></pre></div>
|
||||
</div>
|
||||
|
||||
<h2 id="programmatic-api">Programmatic API <a class="anchor-link" href="#programmatic-api" aria-label="Link to this section: Programmatic API"></a></h2>
|
||||
<p>All constructors accept an optional options object or nothing (which initiates a plugin with its default behavior):</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myModalEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myModal'</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">modal</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Modal</span><span class="p">(</span><span class="nx">myModalEl</span><span class="p">)</span> <span class="c1">// initialized with defaults
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">modal1</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Modal</span><span class="p">(</span><span class="nx">myModalEl</span><span class="p">,</span> <span class="p">{</span> <span class="nx">keyboard</span><span class="o">:</span> <span class="kc">false</span> <span class="p">})</span> <span class="c1">// initialized with no keyboard
|
||||
</span></span></span></code></pre></div><p>If you’d like to get a particular plugin instance, each plugin exposes a <code>getInstance</code> method. In order to retrieve it directly from an element, do this: <code>bootstrap.Popover.getInstance(myPopoverEl)</code>.</p>
|
||||
<h3 id="css-selectors-in-constructors">CSS selectors in constructors <a class="anchor-link" href="#css-selectors-in-constructors" aria-label="Link to this section: CSS selectors in constructors"></a></h3>
|
||||
<p>You can also use a CSS selector as the first argument instead of a DOM element to initialize the plugin. Currently the element for the plugin is found by the <code>querySelector</code> method since our plugins support a single element only.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">modal</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Modal</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">dropdown</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Dropdown</span><span class="p">(</span><span class="s1">'[data-bs-toggle="dropdown"]'</span><span class="p">)</span>
|
||||
</span></span></code></pre></div><h3 id="asynchronous-functions-and-transitions">Asynchronous functions and transitions <a class="anchor-link" href="#asynchronous-functions-and-transitions" aria-label="Link to this section: Asynchronous functions and transitions"></a></h3>
|
||||
<p>All programmatic API methods are <strong>asynchronous</strong> and return to the caller once the transition is started but <strong>before it ends</strong>.</p>
|
||||
<p>In order to execute an action once the transition is complete, you can listen to the corresponding event.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myCollapseEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myCollapse'</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="nx">myCollapseEl</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'shown.bs.collapse'</span><span class="p">,</span> <span class="nx">event</span> <span class="p">=></span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Action to execute once the collapsible area is expanded
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span>
|
||||
</span></span></code></pre></div><p>In addition a method call on a <strong>transitioning component will be ignored</strong>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myCarouselEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myCarousel'</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">carousel</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Carousel</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">myCarouselEl</span><span class="p">)</span> <span class="c1">// Retrieve a Carousel instance
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nx">myCarouselEl</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'slid.bs.carousel'</span><span class="p">,</span> <span class="nx">event</span> <span class="p">=></span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">carousel</span><span class="p">.</span><span class="nx">to</span><span class="p">(</span><span class="s1">'2'</span><span class="p">)</span> <span class="c1">// Will slide to the slide 2 as soon as the transition to slide 1 is finished
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="nx">carousel</span><span class="p">.</span><span class="nx">to</span><span class="p">(</span><span class="s1">'1'</span><span class="p">)</span> <span class="c1">// Will start sliding to the slide 1 and returns to the caller
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">carousel</span><span class="p">.</span><span class="nx">to</span><span class="p">(</span><span class="s1">'2'</span><span class="p">)</span> <span class="c1">// !! Will be ignored, as the transition to the slide 1 is not finished !!
|
||||
</span></span></span></code></pre></div><h3 id="default-settings">Default settings <a class="anchor-link" href="#default-settings" aria-label="Link to this section: Default settings"></a></h3>
|
||||
<p>You can change the default settings for a plugin by modifying the plugin’s <code>Constructor.Default</code> object:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="c1">// changes default for the modal plugin's `keyboard` option to false
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Modal</span><span class="p">.</span><span class="nx">Default</span><span class="p">.</span><span class="nx">keyboard</span> <span class="o">=</span> <span class="kc">false</span>
|
||||
</span></span></code></pre></div><h2 id="no-conflict-only-if-you-use-jquery">No conflict (only if you use jQuery) <a class="anchor-link" href="#no-conflict-only-if-you-use-jquery" aria-label="Link to this section: No conflict (only if you use jQuery)"></a></h2>
|
||||
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">bootstrapButton</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">button</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">()</span> <span class="c1">// return $.fn.button to previously assigned value
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapBtn</span> <span class="o">=</span> <span class="nx">bootstrapButton</span> <span class="c1">// give $().bootstrapBtn the Bootstrap functionality
|
||||
</span></span></span></code></pre></div><h2 id="version-numbers">Version numbers <a class="anchor-link" href="#version-numbers" aria-label="Link to this section: Version numbers"></a></h2>
|
||||
<p>The version of each of Bootstrap’s plugins can be accessed via the <code>VERSION</code> property of the plugin’s constructor. For example, for the tooltip plugin:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tooltip</span><span class="p">.</span><span class="nx">VERSION</span> <span class="c1">// => "5.2.0-beta1"
|
||||
</span></span></span></code></pre></div><h2 id="no-special-fallbacks-when-javascript-is-disabled">No special fallbacks when JavaScript is disabled <a class="anchor-link" href="#no-special-fallbacks-when-javascript-is-disabled" aria-label="Link to this section: No special fallbacks when JavaScript is disabled"></a></h2>
|
||||
<p>Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript"><code><noscript></code></a> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.</p>
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="third-party-libraries">Third-party libraries <a class="anchor-link" href="#third-party-libraries" aria-label="Link to this section: Third-party libraries"></a></h5>
|
||||
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own.
|
||||
</div>
|
||||
|
||||
<h2 id="sanitizer">Sanitizer <a class="anchor-link" href="#sanitizer" aria-label="Link to this section: Sanitizer"></a></h2>
|
||||
<p>Tooltips and Popovers use our built-in sanitizer to sanitize options which accept HTML.</p>
|
||||
<p>The default <code>allowList</code> value is the following:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">ARIA_ATTRIBUTE_PATTERN</span> <span class="o">=</span> <span class="sr">/^aria-[\w-]*$/i</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">DefaultAllowlist</span> <span class="o">=</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Global attributes allowed on any supplied element below.
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="s1">'*'</span><span class="o">:</span> <span class="p">[</span><span class="s1">'class'</span><span class="p">,</span> <span class="s1">'dir'</span><span class="p">,</span> <span class="s1">'id'</span><span class="p">,</span> <span class="s1">'lang'</span><span class="p">,</span> <span class="s1">'role'</span><span class="p">,</span> <span class="nx">ARIA_ATTRIBUTE_PATTERN</span><span class="p">],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">a</span><span class="o">:</span> <span class="p">[</span><span class="s1">'target'</span><span class="p">,</span> <span class="s1">'href'</span><span class="p">,</span> <span class="s1">'title'</span><span class="p">,</span> <span class="s1">'rel'</span><span class="p">],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">area</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">b</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">br</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">col</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">code</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">div</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">em</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">hr</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">h1</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">h2</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">h3</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">h4</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">h5</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">h6</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">i</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">img</span><span class="o">:</span> <span class="p">[</span><span class="s1">'src'</span><span class="p">,</span> <span class="s1">'srcset'</span><span class="p">,</span> <span class="s1">'alt'</span><span class="p">,</span> <span class="s1">'title'</span><span class="p">,</span> <span class="s1">'width'</span><span class="p">,</span> <span class="s1">'height'</span><span class="p">],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">li</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">ol</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">p</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">pre</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">s</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">small</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">span</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">sub</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">sup</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">strong</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">u</span><span class="o">:</span> <span class="p">[],</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">ul</span><span class="o">:</span> <span class="p">[]</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div><p>If you want to add new values to this default <code>allowList</code> you can do the following:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">myDefaultAllowList</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tooltip</span><span class="p">.</span><span class="nx">Default</span><span class="p">.</span><span class="nx">allowList</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// To allow table elements
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">myDefaultAllowList</span><span class="p">.</span><span class="nx">table</span> <span class="o">=</span> <span class="p">[]</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// To allow td elements and data-bs-option attributes on td elements
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">myDefaultAllowList</span><span class="p">.</span><span class="nx">td</span> <span class="o">=</span> <span class="p">[</span><span class="s1">'data-bs-option'</span><span class="p">]</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// You can push your custom regex to validate your attributes.
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1">// Be careful about your regular expressions being too lax
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">const</span> <span class="nx">myCustomRegex</span> <span class="o">=</span> <span class="sr">/^data-my-app-[\w-]+/</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nx">myDefaultAllowList</span><span class="p">[</span><span class="s1">'*'</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">myCustomRegex</span><span class="p">)</span>
|
||||
</span></span></code></pre></div><p>If you want to bypass our sanitizer because you prefer to use a dedicated library, for example <a href="https://www.npmjs.com/package/dompurify">DOMPurify</a>, you should do the following:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">yourTooltipEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'yourTooltip'</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">tooltip</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tooltip</span><span class="p">(</span><span class="nx">yourTooltipEl</span><span class="p">,</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">sanitizeFn</span><span class="p">(</span><span class="nx">content</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">DOMPurify</span><span class="p">.</span><span class="nx">sanitize</span><span class="p">(</span><span class="nx">content</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>
|
||||
</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>
|
||||
696
docs/5.2/getting-started/parcel/index.html
Normal file
696
docs/5.2/getting-started/parcel/index.html
Normal file
@@ -0,0 +1,696 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn how to include Bootstrap in your project using Parcel.">
|
||||
<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>Parcel · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/parcel/"><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="Parcel">
|
||||
<meta name="twitter:description" content="Learn how to include Bootstrap in your project using Parcel.">
|
||||
<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/getting-started/parcel/">
|
||||
<meta property="og:title" content="Parcel">
|
||||
<meta property="og:description" content="Learn how to include Bootstrap in your project using Parcel.">
|
||||
<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/getting-started/parcel/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/getting-started/parcel/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/getting-started/parcel/">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 active" aria-current="page">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">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/getting-started/parcel.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">Parcel</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Learn how to include Bootstrap in your project using Parcel.</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="#install-parcel">Install Parcel</a></li>
|
||||
<li><a href="#install-bootstrap">Install Bootstrap</a></li>
|
||||
<li><a href="#importing-javascript">Importing JavaScript</a></li>
|
||||
<li><a href="#importing-css">Importing CSS</a></li>
|
||||
<li><a href="#build-app">Build app</a>
|
||||
<ul>
|
||||
<li><a href="#edit-packagejson">Edit <code>package.json</code></a></li>
|
||||
<li><a href="#run-dev-script">Run dev script</a></li>
|
||||
<li><a href="#build-app-files">Build app files</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="install-parcel">Install Parcel <a class="anchor-link" href="#install-parcel" aria-label="Link to this section: Install Parcel"></a></h2>
|
||||
<p>Install <a href="https://parceljs.org/getting-started/webapp/">Parcel Bundler</a>.</p>
|
||||
<h2 id="install-bootstrap">Install Bootstrap <a class="anchor-link" href="#install-bootstrap" aria-label="Link to this section: Install Bootstrap"></a></h2>
|
||||
<p><a href="/docs/5.2/getting-started/download/#npm">Install bootstrap</a> as a Node.js module using npm.</p>
|
||||
<p>Bootstrap depends on <a href="https://popper.js.org/">Popper</a>, which is specified in the <code>peerDependencies</code> property. This means that you will have to make sure to add both of them to your <code>package.json</code> using <code>npm install @popperjs/core</code>.</p>
|
||||
<p>When all will be completed, your project will be structured like this:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">project-name/
|
||||
</span></span><span class="line"><span class="cl">├── build/
|
||||
</span></span><span class="line"><span class="cl">├── node_modules/
|
||||
</span></span><span class="line"><span class="cl">│ └── bootstrap/
|
||||
</span></span><span class="line"><span class="cl">│ └── @popperjs/
|
||||
</span></span><span class="line"><span class="cl">| └── core/
|
||||
</span></span><span class="line"><span class="cl">├── scss/
|
||||
</span></span><span class="line"><span class="cl">│ └── custom.scss
|
||||
</span></span><span class="line"><span class="cl">├── src/
|
||||
</span></span><span class="line"><span class="cl">│ └── index.html
|
||||
</span></span><span class="line"><span class="cl">│ └── index.js
|
||||
</span></span><span class="line"><span class="cl">└── package.json
|
||||
</span></span></code></pre></div><h2 id="importing-javascript">Importing JavaScript <a class="anchor-link" href="#importing-javascript" aria-label="Link to this section: Importing JavaScript"></a></h2>
|
||||
<p>Import <a href="/docs/5.2/getting-started/javascript/">Bootstrap’s JavaScript</a> in your app’s entry point (usually <code>src/index.js</code>). You can import all our plugins in one file or separately if you require only a subset of them.</p>
|
||||
<!-- eslint-skip -->
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="c1">// Import all plugins
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="o">*</span> <span class="nx">as</span> <span class="nx">bootstrap</span> <span class="nx">from</span> <span class="s1">'bootstrap'</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// Or import only needed plugins
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="p">{</span> <span class="nx">Tooltip</span> <span class="nx">as</span> <span class="nx">Tooltip</span><span class="p">,</span> <span class="nx">Toast</span> <span class="nx">as</span> <span class="nx">Toast</span><span class="p">,</span> <span class="nx">Popover</span> <span class="nx">as</span> <span class="nx">Popover</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">'bootstrap'</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// Or import just one
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="nx">Alert</span> <span class="nx">as</span> <span class="nx">Alert</span> <span class="nx">from</span> <span class="s1">'../node_modules/bootstrap/js/dist/alert'</span><span class="p">;</span>
|
||||
</span></span></code></pre></div><h2 id="importing-css">Importing CSS <a class="anchor-link" href="#importing-css" aria-label="Link to this section: Importing CSS"></a></h2>
|
||||
<p>To utilize the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project’s bundling process.</p>
|
||||
<p>Create your own <code>scss/custom.scss</code> to <a href="/docs/5.2/customize/sass/#importing">import Bootstrap’s Sass files</a> and then override the <a href="/docs/5.2/customize/sass/#variable-defaults">built-in custom variables</a>.</p>
|
||||
<h2 id="build-app">Build app <a class="anchor-link" href="#build-app" aria-label="Link to this section: Build app"></a></h2>
|
||||
<p>Include <code>src/index.js</code> before the closing <code></body></code> tag.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!doctype html></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"module"</span> <span class="na">src</span><span class="o">=</span><span class="s">"./index.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h3 id="edit-packagejson">Edit <code>package.json</code> <a class="anchor-link" href="#edit-packagejson" aria-label="Link to this section: Edit package.json"></a></h3>
|
||||
<p>Add <code>dev</code> and <code>build</code> scripts in your <code>package.json</code> file.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="s2">"scripts"</span><span class="err">:</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">"dev"</span><span class="p">:</span> <span class="s2">"parcel ./src/index.html"</span><span class="p">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">"prebuild"</span><span class="p">:</span> <span class="s2">"npx rimraf build"</span><span class="p">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nt">"build"</span><span class="p">:</span> <span class="s2">"parcel build --public-url ./ ./src/index.html --dist-dir build"</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div><h3 id="run-dev-script">Run dev script <a class="anchor-link" href="#run-dev-script" aria-label="Link to this section: Run dev script"></a></h3>
|
||||
<p>Your app will be accessible at <code>http://127.0.0.1:1234</code>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm run dev
|
||||
</span></span></code></pre></div><h3 id="build-app-files">Build app files <a class="anchor-link" href="#build-app-files" aria-label="Link to this section: Build app files"></a></h3>
|
||||
<p>Built files are in the <code>build/</code> folder.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm run build
|
||||
</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>
|
||||
684
docs/5.2/getting-started/rfs/index.html
Normal file
684
docs/5.2/getting-started/rfs/index.html
Normal file
@@ -0,0 +1,684 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Bootstrap’s resizing engine responsively scales common CSS properties to better utilize available space across viewports and devices.">
|
||||
<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>RFS · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/rfs/"><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="RFS">
|
||||
<meta name="twitter:description" content="Bootstrap’s resizing engine responsively scales common CSS properties to better utilize available space across viewports and devices.">
|
||||
<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/getting-started/rfs/">
|
||||
<meta property="og:title" content="RFS">
|
||||
<meta property="og:description" content="Bootstrap’s resizing engine responsively scales common CSS properties to better utilize available space across viewports and devices.">
|
||||
<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/getting-started/rfs/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/getting-started/rfs/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/getting-started/rfs/">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 active" aria-current="page">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">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/getting-started/rfs.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">RFS</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Bootstrap’s resizing engine responsively scales common CSS properties to better utilize available space across viewports and devices.</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="#what-is-rfs">What is RFS?</a></li>
|
||||
<li><a href="#using-rfs">Using RFS</a>
|
||||
<ul>
|
||||
<li><a href="#using-the-mixins">Using the mixins</a></li>
|
||||
<li><a href="#using-the-functions">Using the functions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#extended-documentation">Extended documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="what-is-rfs">What is RFS? <a class="anchor-link" href="#what-is-rfs" aria-label="Link to this section: What is RFS?"></a></h2>
|
||||
<p>Bootstrap’s side project <a href="https://github.com/twbs/rfs/tree/v9.0.6">RFS</a> is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like <code>margin</code>, <code>padding</code>, <code>border-radius</code>, or even <code>box-shadow</code>.</p>
|
||||
<p>The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into <code>calc()</code> functions with a mix of <code>rem</code> and viewport units to enable the responsive scaling behavior.</p>
|
||||
<h2 id="using-rfs">Using RFS <a class="anchor-link" href="#using-rfs" aria-label="Link to this section: Using RFS"></a></h2>
|
||||
<p>The mixins are included in Bootstrap and are available once you include Bootstrap’s <code>scss</code>. RFS can also be <a href="https://github.com/twbs/rfs/tree/v9.0.6#installation">installed standalone</a> if needed.</p>
|
||||
<h3 id="using-the-mixins">Using the mixins <a class="anchor-link" href="#using-the-mixins" aria-label="Link to this section: Using the mixins"></a></h3>
|
||||
<p>The <code>rfs()</code> mixin has shorthands for <code>font-size</code>, <code>margin</code>, <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, <code>margin-left</code>, <code>padding</code>, <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code>. See the example below for source Sass and compiled CSS.</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">.title</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">@include</span><span class="nd"> font-size</span><span class="p">(</span><span class="mi">4</span><span class="kt">rem</span><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-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">title</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="nb">calc</span><span class="p">(</span><span class="mf">1.525</span><span class="kt">rem</span> <span class="o">+</span> <span class="mf">3.3</span><span class="kt">vw</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="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">1200px</span><span class="o">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nc">title</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">4</span><span class="kt">rem</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><p>Any other property can be passed to the <code>rfs()</code> mixin like this:</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">.selector</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">@include</span><span class="nd"> rfs</span><span class="p">(</span><span class="mi">4</span><span class="kt">rem</span><span class="o">,</span> <span class="n">border-radius</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div><p><code>!important</code> can also just be added to whatever value you want:</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">.selector</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">@include</span><span class="nd"> padding</span><span class="p">(</span><span class="mi">2</span><span class="mf">.5</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><h3 id="using-the-functions">Using the functions <a class="anchor-link" href="#using-the-functions" aria-label="Link to this section: Using the functions"></a></h3>
|
||||
<p>When you don’t want to use the includes, there are also two functions:</p>
|
||||
<ul>
|
||||
<li><code>rfs-value()</code> converts a value into a <code>rem</code> value if a <code>px</code> value is passed, in other cases it returns the same result.</li>
|
||||
<li><code>rfs-fluid-value()</code> returns the fluid version of a value if the property needs rescaling.</li>
|
||||
</ul>
|
||||
<p>In this example, we use one of Bootstrap’s built-in <a href="/docs/5.2/layout/breakpoints/">responsive breakpoint mixins</a> to only apply styling below the <code>lg</code> breakpoint.</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">.selector</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">@include</span><span class="nd"> media-breakpoint-down</span><span class="p">(</span><span class="n">lg</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">padding</span><span class="o">:</span> <span class="nf">rfs-fluid-value</span><span class="p">(</span><span class="mi">2</span><span class="kt">rem</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">font-size</span><span class="o">:</span> <span class="nf">rfs-fluid-value</span><span class="p">(</span><span class="mi">1</span><span class="mf">.125</span><span class="kt">rem</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-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">max-width</span><span class="o">:</span> <span class="nt">991</span><span class="p">.</span><span class="nc">98px</span><span class="o">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nc">selector</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">padding</span><span class="p">:</span> <span class="nb">calc</span><span class="p">(</span><span class="mf">1.325</span><span class="kt">rem</span> <span class="o">+</span> <span class="mf">0.9</span><span class="kt">vw</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mf">1.125</span><span class="kt">rem</span><span class="p">;</span> <span class="c">/* 1.125rem is small enough, so RFS won't rescale this */</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><h2 id="extended-documentation">Extended documentation <a class="anchor-link" href="#extended-documentation" aria-label="Link to this section: Extended documentation"></a></h2>
|
||||
<p>RFS is a separate project under the Bootstrap organization. More about RFS and its configuration can be found on its <a href="https://github.com/twbs/rfs/tree/v9.0.6">GitHub repository</a>.</p>
|
||||
|
||||
</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>
|
||||
780
docs/5.2/getting-started/rtl/index.html
Normal file
780
docs/5.2/getting-started/rtl/index.html
Normal file
@@ -0,0 +1,780 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn how to enable support for right-to-left text in Bootstrap across our layout, components, and 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>RTL · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/rtl/"><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="RTL">
|
||||
<meta name="twitter:description" content="Learn how to enable support for right-to-left text in Bootstrap across our layout, components, and 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/getting-started/rtl/">
|
||||
<meta property="og:title" content="RTL">
|
||||
<meta property="og:description" content="Learn how to enable support for right-to-left text in Bootstrap across our layout, components, and 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/getting-started/rtl/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/getting-started/rtl/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/getting-started/rtl/">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 active" aria-current="page">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">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/getting-started/rtl.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">RTL</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Learn how to enable support for right-to-left text in Bootstrap across our layout, components, and 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="#get-familiar">Get familiar</a></li>
|
||||
<li><a href="#required-html">Required HTML</a>
|
||||
<ul>
|
||||
<li><a href="#starter-template">Starter template</a></li>
|
||||
<li><a href="#rtl-examples">RTL examples</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#approach">Approach</a></li>
|
||||
<li><a href="#customize-from-source">Customize from source</a>
|
||||
<ul>
|
||||
<li><a href="#custom-rtl-values">Custom RTL values</a></li>
|
||||
<li><a href="#alternative-font-stack">Alternative font stack</a></li>
|
||||
<li><a href="#ltr-and-rtl-at-the-same-time">LTR and RTL at the same time</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#the-breadcrumb-case">The breadcrumb case</a></li>
|
||||
<li><a href="#additional-resources">Additional resources</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="get-familiar">Get familiar <a class="anchor-link" href="#get-familiar" aria-label="Link to this section: Get familiar"></a></h2>
|
||||
<p>We recommend getting familiar with Bootstrap first by reading through our <a href="/docs/5.2/getting-started/introduction/">Getting Started Introduction page</a>. Once you’ve run through it, continue reading here for how to enable RTL.</p>
|
||||
<p>You may also want to read up on <a href="https://rtlcss.com/">the RTLCSS project</a>, as it powers our approach to RTL.</p>
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h3 id="experimental-feature">Experimental feature <a class="anchor-link" href="#experimental-feature" aria-label="Link to this section: Experimental feature"></a></h3>
|
||||
<p>The RTL feature is still <strong>experimental</strong> and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? <a href="https://github.com/twbs/bootstrap/issues/new">Open an issue</a>, we’d love to get your insights.
|
||||
</div>
|
||||
|
||||
<h2 id="required-html">Required HTML <a class="anchor-link" href="#required-html" aria-label="Link to this section: Required HTML"></a></h2>
|
||||
<p>There are two strict requirements for enabling RTL in Bootstrap-powered pages.</p>
|
||||
<ol>
|
||||
<li>Set <code>dir="rtl"</code> on the <code><html></code> element.</li>
|
||||
<li>Add an appropriate <code>lang</code> attribute, like <code>lang="ar"</code>, on the <code><html></code> element.</li>
|
||||
</ol>
|
||||
<p>From there, you’ll need to include an RTL version of our CSS. For example, here’s the stylesheet for our compiled and minified CSS with RTL enabled:</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">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.rtl.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-dc2NSrAXbAkjrdm9IYrX10fQq9SDG6Vjz7nQVKdKcJl3pC+k37e7qJR5MVSCS+wR"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h3 id="starter-template">Starter template <a class="anchor-link" href="#starter-template" aria-label="Link to this section: Starter template"></a></h3>
|
||||
<p>You can see the above requirements reflected in this modified RTL starter template.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!doctype html></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ar"</span> <span class="na">dir</span><span class="o">=</span><span class="s">"rtl"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c"><!-- Required meta tags --></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"> <span class="c"><!-- Bootstrap CSS --></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.rtl.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-dc2NSrAXbAkjrdm9IYrX10fQq9SDG6Vjz7nQVKdKcJl3pC+k37e7qJR5MVSCS+wR"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</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">title</span><span class="p">></span>مرحبًا بالعالم!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>مرحبًا بالعالم!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"> <span class="c"><!-- Optional JavaScript; choose one of the two! --></span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"> <span class="c"><!-- Option 1: Bootstrap Bundle with Popper --></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"> <span class="c"><!-- Option 2: Separate Popper and Bootstrap JS --></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c"><!--
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c"> --></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h3 id="rtl-examples">RTL examples <a class="anchor-link" href="#rtl-examples" aria-label="Link to this section: RTL examples"></a></h3>
|
||||
<p>Get started with one of our several <a href="/docs/5.2/examples/#rtl">RTL examples</a>.</p>
|
||||
<h2 id="approach">Approach <a class="anchor-link" href="#approach" aria-label="Link to this section: Approach"></a></h2>
|
||||
<p>Our approach to building RTL support into Bootstrap comes with two important decisions that impact how we write and use our CSS:</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p><strong>First, we decided to build it with the <a href="https://rtlcss.com/">RTLCSS</a> project.</strong> This gives us some powerful features for managing changes and overrides when moving from LTR to RTL. It also allows us to build two versions of Bootstrap from one codebase.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Second, we’ve renamed a handful of directional classes to adopt a logical properties approach.</strong> Most of you have already interacted with logical properties thanks to our flex utilities—they replace direction properties like <code>left</code> and <code>right</code> in favor <code>start</code> and <code>end</code>. That makes the class names and values appropriate for LTR and RTL without any overhead.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<p>For example, instead of <code>.ml-3</code> for <code>margin-left</code>, use <code>.ms-3</code>.</p>
|
||||
<p>Working with RTL, through our source Sass or compiled CSS, shouldn’t be much different from our default LTR though.</p>
|
||||
<h2 id="customize-from-source">Customize from source <a class="anchor-link" href="#customize-from-source" aria-label="Link to this section: Customize from source"></a></h2>
|
||||
<p>When it comes to <a href="/docs/5.2/customize/sass/">customization</a>, the preferred way is to take advantage of variables, maps, and mixins. This approach works the same for RTL, even if it’s post-processed from the compiled files, thanks to <a href="https://rtlcss.com/learn/getting-started/why-rtlcss/">how RTLCSS works</a>.</p>
|
||||
<h3 id="custom-rtl-values">Custom RTL values <a class="anchor-link" href="#custom-rtl-values" aria-label="Link to this section: Custom RTL values"></a></h3>
|
||||
<p>Using <a href="https://rtlcss.com/learn/usage-guide/value-directives/">RTLCSS value directives</a>, you can make a variable output a different value for RTL. For example, to decrease the weight for <code>$font-weight-bold</code> throughout the codebase, you may use the <code>/*rtl: {value}*/</code> syntax:</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">$font-weight-bold</span><span class="o">:</span> <span class="mi">700</span> <span class="si">#{</span><span class="cm">/* rtl:600 </span><span class="c">*/</span><span class="si">}</span> <span class="k">!default</span><span class="p">;</span>
|
||||
</span></span></code></pre></div><p>Which would output to the following for our default CSS and RTL CSS:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* bootstrap.css */</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nt">dt</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="mi">700</span> <span class="c">/* rtl:600 */</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="c">/* bootstrap.rtl.css */</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nt">dt</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="mi">600</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div><h3 id="alternative-font-stack">Alternative font stack <a class="anchor-link" href="#alternative-font-stack" aria-label="Link to this section: Alternative font stack"></a></h3>
|
||||
<p>In the case you’re using a custom font, be aware that not all fonts support the non-Latin alphabet. To switch from Pan-European to Arabic family, you may need to use <code>/*rtl:insert: {value}*/</code> in your font stack to modify the names of font families.</p>
|
||||
<p>For example, to switch from <code>Helvetica Neue</code> font for LTR to <code>Helvetica Neue Arabic</code> for RTL, your Sass code could look like this:</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">$font-family-sans-serif</span><span class="o">:</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="n">Helvetica</span> <span class="n">Neue</span> <span class="si">#{</span><span class="s2">"/* rtl:insert:Arabic */"</span><span class="si">}</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Cross-platform generic font family (default user interface font)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="ni">system-ui</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Safari for macOS and iOS (San Francisco)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">-</span><span class="n">apple-system</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Chrome < 56 for macOS (San Francisco)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="n">BlinkMacSystemFont</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Windows</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"Segoe UI"</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Android</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="n">Roboto</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Basic web fallback</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="n">Arial</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Linux</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"Noto Sans"</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Sans serif fallback</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="ni">sans-serif</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Emoji fonts</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"Apple Color Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Symbol"</span><span class="o">,</span> <span class="s2">"Noto Color Emoji"</span> <span class="k">!default</span><span class="p">;</span>
|
||||
</span></span></code></pre></div><h3 id="ltr-and-rtl-at-the-same-time">LTR and RTL at the same time <a class="anchor-link" href="#ltr-and-rtl-at-the-same-time" aria-label="Link to this section: LTR and RTL at the same time"></a></h3>
|
||||
<p>Need both LTR and RTL on the same page? Thanks to <a href="https://rtlcss.com/learn/usage-guide/string-map/">RTLCSS String Maps</a>, this is pretty straightforward. Wrap your <code>@import</code>s with a class, and set a custom rename rule for RTLCSS:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="cm">/* rtl:begin:options: {
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> "autoRename": true,
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> "stringMap":[ {
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> "name": "ltr-rtl",
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> "priority": 100,
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> "search": ["ltr"],
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> "replace": ["rtl"],
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> "options": {
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> "scope": "*",
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> "ignoreCase": false
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> }
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> } ]
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm">} */</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nc">.ltr</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/bootstrap"</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="cm">/*rtl:end:options*/</span>
|
||||
</span></span></code></pre></div><p>After running Sass then RTLCSS, each selector in your CSS files will be prepended by <code>.ltr</code>, and <code>.rtl</code> for RTL files. Now you’re able to use both files on the same page, and simply use <code>.ltr</code> or <code>.rtl</code> on your components wrappers to use one or the other direction.</p>
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h4 id="edge-cases-and-known-limitations">Edge cases and known limitations <a class="anchor-link" href="#edge-cases-and-known-limitations" aria-label="Link to this section: Edge cases and known limitations"></a></h4>
|
||||
<p>While this approach is understandable, please pay attention to the following:</p>
|
||||
<ol>
|
||||
<li>When switching <code>.ltr</code> and <code>.rtl</code>, make sure you add <code>dir</code> and <code>lang</code> attributes accordingly.</li>
|
||||
<li>Loading both files can be a real performance bottleneck: consider some <a href="/docs/5.2/customize/optimize/">optimization</a>, and maybe try to <a href="https://www.filamentgroup.com/lab/load-css-simpler/">load one of those files asynchronously</a>.</li>
|
||||
<li>Nesting styles this way will prevent our <code>form-validation-state()</code> mixin from working as intended, thus require you tweak it a bit by yourself. <a href="https://github.com/twbs/bootstrap/issues/31223">See #31223</a>.</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="the-breadcrumb-case">The breadcrumb case <a class="anchor-link" href="#the-breadcrumb-case" aria-label="Link to this section: The breadcrumb case"></a></h2>
|
||||
<p>The <a href="/docs/5.2/components/breadcrumb//#changing-the-separator">breadcrumb separator</a> is the only case requiring its own brand new variable— namely <code>$breadcrumb-divider-flipped</code> —defaulting to <code>$breadcrumb-divider</code>.</p>
|
||||
<h2 id="additional-resources">Additional resources <a class="anchor-link" href="#additional-resources" aria-label="Link to this section: Additional resources"></a></h2>
|
||||
<ul>
|
||||
<li><a href="https://rtlcss.com/">RTLCSS</a></li>
|
||||
<li><a href="https://rtlstyling.com/posts/rtl-styling">RTL Styling 101</a></li>
|
||||
</ul>
|
||||
|
||||
</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>
|
||||
709
docs/5.2/getting-started/webpack/index.html
Normal file
709
docs/5.2/getting-started/webpack/index.html
Normal file
@@ -0,0 +1,709 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn how to include Bootstrap in your project using Webpack or other bundlers.">
|
||||
<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>Webpack and bundlers · Bootstrap v5.2</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/getting-started/webpack/"><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="Webpack and bundlers">
|
||||
<meta name="twitter:description" content="Learn how to include Bootstrap in your project using Webpack or other bundlers.">
|
||||
<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/getting-started/webpack/">
|
||||
<meta property="og:title" content="Webpack and bundlers">
|
||||
<meta property="og:description" content="Learn how to include Bootstrap in your project using Webpack or other bundlers.">
|
||||
<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/getting-started/webpack/">
|
||||
Latest (5.2.x)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/getting-started/webpack/">v5.1.3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/getting-started/webpack/">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 active" aria-current="page">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">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/getting-started/webpack.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">Webpack and bundlers</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Learn how to include Bootstrap in your project using Webpack or other bundlers.</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="#installing-bootstrap">Installing Bootstrap</a></li>
|
||||
<li><a href="#importing-javascript">Importing JavaScript</a></li>
|
||||
<li><a href="#importing-styles">Importing Styles</a>
|
||||
<ul>
|
||||
<li><a href="#importing-precompiled-sass">Importing Precompiled Sass</a></li>
|
||||
<li><a href="#importing-compiled-css">Importing Compiled CSS</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="installing-bootstrap">Installing Bootstrap <a class="anchor-link" href="#installing-bootstrap" aria-label="Link to this section: Installing Bootstrap"></a></h2>
|
||||
<p><a href="/docs/5.2/getting-started/download/#npm">Install bootstrap</a> as a Node.js module using npm.</p>
|
||||
<h2 id="importing-javascript">Importing JavaScript <a class="anchor-link" href="#importing-javascript" aria-label="Link to this section: Importing JavaScript"></a></h2>
|
||||
<p>Import <a href="/docs/5.2/getting-started/javascript/">Bootstrap’s JavaScript</a> by adding this line to your app’s entry point (usually <code>index.js</code> or <code>app.js</code>):</p>
|
||||
<!-- eslint-skip -->
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="s1">'bootstrap'</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// or get all of the named exports for further usage
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="o">*</span> <span class="nx">as</span> <span class="nx">bootstrap</span> <span class="nx">from</span> <span class="s1">'bootstrap'</span><span class="p">;</span>
|
||||
</span></span></code></pre></div><p>Alternatively, if you only need just a few of our plugins, you may <strong>import plugins individually</strong> as needed:</p>
|
||||
<!-- eslint-skip -->
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Alert</span> <span class="nx">from</span> <span class="s1">'bootstrap/js/dist/alert'</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// or, specify which plugins you need:
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kr">import</span> <span class="p">{</span> <span class="nx">Tooltip</span><span class="p">,</span> <span class="nx">Toast</span><span class="p">,</span> <span class="nx">Popover</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">'bootstrap'</span><span class="p">;</span>
|
||||
</span></span></code></pre></div><p>Bootstrap depends on <a href="https://popper.js.org/">Popper</a>, which is specified in the <code>peerDependencies</code> property.
|
||||
This means that you will have to make sure to add it to your <code>package.json</code> using <code>npm install @popperjs/core</code>.</p>
|
||||
<h2 id="importing-styles">Importing Styles <a class="anchor-link" href="#importing-styles" aria-label="Link to this section: Importing Styles"></a></h2>
|
||||
<h3 id="importing-precompiled-sass">Importing Precompiled Sass <a class="anchor-link" href="#importing-precompiled-sass" aria-label="Link to this section: Importing Precompiled Sass"></a></h3>
|
||||
<p>To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project’s bundling process.</p>
|
||||
<p>First, create your own <code>_custom.scss</code> and use it to override the <a href="/docs/5.2/customize/sass/">built-in custom variables</a>. Then, use your main Sass file to import your custom variables, followed by Bootstrap:</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">@import</span> <span class="s2">"custom"</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@import</span> <span class="s2">"~bootstrap/scss/bootstrap"</span><span class="p">;</span>
|
||||
</span></span></code></pre></div><p>For Bootstrap to compile, make sure you install and use the required loaders: <a href="https://github.com/webpack-contrib/sass-loader">sass-loader</a>, <a href="https://github.com/webpack-contrib/postcss-loader">postcss-loader</a> with <a href="https://github.com/postcss/autoprefixer#webpack">Autoprefixer</a>. With minimal setup, your webpack config should include this rule or similar:</p>
|
||||
<!-- eslint-skip -->
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="c1">// ...
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.(scss)$/</span><span class="p">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">use</span><span class="o">:</span> <span class="p">[{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// inject CSS to page
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">loader</span><span class="o">:</span> <span class="s1">'style-loader'</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// translates CSS into CommonJS modules
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">loader</span><span class="o">:</span> <span class="s1">'css-loader'</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Run postcss actions
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">loader</span><span class="o">:</span> <span class="s1">'postcss-loader'</span><span class="p">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// `postcssOptions` is needed for postcss 8.x;
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// if you use postcss 7.x skip the key
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">postcssOptions</span><span class="o">:</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// postcss plugins, can be exported to postcss.config.js
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">plugins</span><span class="o">:</span> <span class="p">()</span> <span class="p">=></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="nx">require</span><span class="p">(</span><span class="s1">'autoprefixer'</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="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 class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// compiles Sass to CSS
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">loader</span><span class="o">:</span> <span class="s1">'sass-loader'</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="c1">// ...
|
||||
</span></span></span></code></pre></div><h3 id="importing-compiled-css">Importing Compiled CSS <a class="anchor-link" href="#importing-compiled-css" aria-label="Link to this section: Importing Compiled CSS"></a></h3>
|
||||
<p>Alternatively, you may use Bootstrap’s ready-to-use CSS by simply adding this line to your project’s entry point:</p>
|
||||
<!-- eslint-skip -->
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="s1">'bootstrap/dist/css/bootstrap.min.css'</span><span class="p">;</span>
|
||||
</span></span></code></pre></div><p>In this case you may use your existing rule for <code>css</code> without any special modifications to webpack config, except you don’t need <code>sass-loader</code> just <a href="https://github.com/webpack-contrib/style-loader">style-loader</a> and <a href="https://github.com/webpack-contrib/css-loader">css-loader</a>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="c1">// ...
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nx">module</span><span class="o">:</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">rules</span><span class="o">:</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="nx">test</span><span class="o">:</span> <span class="sr">/\.css$/</span><span class="p">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">use</span><span class="o">:</span> <span class="p">[</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s1">'style-loader'</span><span class="p">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s1">'css-loader'</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="p">]</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// ...
|
||||
</span></span></span></code></pre></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.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