mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 03:41:19 +02:00
Code Issues Releases Wiki Activity

Add v5.2.1 docs (#37099)

Browse Source
This commit is contained in:
XhmikosR
2022-09-07 18:36:43 +03:00
committed by GitHub
parent c2b4f59e0c
commit 1510239c8f
188 changed files with 4103 additions and 3875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
docs/5.2/getting-started/accessibility/index.html
View File

@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<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&rsquo;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">
<meta name="twitter:image" content="/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&rsquo;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">
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +480,7 @@
</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
@@ -505,10 +505,10 @@
</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>
@@ -560,7 +560,7 @@
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -609,7 +609,7 @@
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -618,12 +618,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -637,10 +637,10 @@
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -667,7 +667,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

53
docs/5.2/getting-started/best-practices/index.html
View File

@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<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&rsquo;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">
<meta name="twitter:image" content="/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&rsquo;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">
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,10 +480,10 @@
</div>
<div class="bd-content ps-lg-2">
<p>We&rsquo;ve designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we&rsquo;ve gathered from years of working on and using it ourselves.</p>
<div class="bd-callout bd-callout-info">
@@ -496,6 +496,7 @@
<li>Working with Sass files</li>
<li>Building new CSS components</li>
<li>Working with flexbox</li>
<li>Ask in <a href="https://github.com/twbs/bootstrap/discussions">our GitHub Discussions</a></li>
</ul>
</div>
@@ -514,7 +515,7 @@
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -563,7 +564,7 @@
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -572,12 +573,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -591,10 +592,10 @@
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -621,7 +622,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

58
docs/5.2/getting-started/browsers-devices/index.html
View File

@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<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">
<meta name="twitter:image" content="/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">
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +480,7 @@
</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
@@ -511,15 +511,15 @@
</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&rsquo;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/.browserslistrc">in our <code>.browserslistrc file</code></a>:</p>
<p>You can find our supported range of browsers and their versions <a href="https://github.com/twbs/bootstrap/blob/v5.2.1/.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
&gt;= 0.5%
@@ -553,7 +553,7 @@ not Explorer &lt;= 11
<td>v6.0+</td>
</tr>
<tr>
<td><strong>Windows</strong></td>
<td><strong>iOS</strong></td>
<td>Supported</td>
<td>Supported</td>
<td>Supported</td>
@@ -629,7 +629,7 @@ not Explorer &lt;= 11
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -678,7 +678,7 @@ not Explorer &lt;= 11
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -687,12 +687,12 @@ not Explorer &lt;= 11
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -706,10 +706,10 @@ not Explorer &lt;= 11
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -736,7 +736,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

84
docs/5.2/getting-started/contents/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Discover what&rsquo;s included in Bootstrap, including our precompiled and source code flavors.">
<meta name="description" content="Discover what&rsquo;s included in Bootstrap, including our compiled and source code flavors.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.101.0">
@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<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&rsquo;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">
<meta name="twitter:description" content="Discover what&rsquo;s included in Bootstrap, including our compiled and source code flavors.">
<meta name="twitter:image" content="/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&rsquo;s included in Bootstrap, including our precompiled and source code flavors.">
<meta property="og:description" content="Discover what&rsquo;s included in Bootstrap, including our compiled 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">
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -475,12 +475,12 @@
</a>
<h1 class="bd-title mb-0" id="content">Contents</h1>
</div>
<p class="bd-lead">Discover what&rsquo;s included in Bootstrap, including our precompiled and source code flavors.</p>
<p class="bd-lead">Discover what&rsquo;s included in Bootstrap, including our compiled 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
@@ -491,20 +491,23 @@
<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="#compiled-bootstrap">Compiled Bootstrap</a>
<ul>
<li><a href="#css-files">CSS files</a></li>
<li><a href="#js-files">JS files</a></li>
</ul>
</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>
<h2 id="compiled-bootstrap">Compiled Bootstrap <a class="anchor-link" href="#compiled-bootstrap" aria-label="Link to this section: Compiled Bootstrap"></a></h2>
<p>Once downloaded, unzip the compressed folder and you&rsquo;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/
@@ -554,8 +557,8 @@
</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&rsquo; 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>
</span></span></code></pre></div><p>This is the most basic form of Bootstrap: compiled 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&rsquo; 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>
<h3 id="css-files">CSS files <a class="anchor-link" href="#css-files" aria-label="Link to this section: CSS files"></a></h3>
<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>
@@ -599,7 +602,7 @@
</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>
<h3 id="js-files">JS files <a class="anchor-link" href="#js-files" aria-label="Link to this section: JS files"></a></h3>
<p>Similarly, we have options for including some or all of our compiled JavaScript.</p>
<div class="table-responsive"><table class="table">
<thead>
@@ -621,7 +624,7 @@
</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>
<p>The Bootstrap source code download includes the compiled 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/
@@ -633,7 +636,8 @@
</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>
</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 compiled download section above. The <code>site/content/docs/</code> folder includes the source code for our hosted documentation, including our live examples of Bootstrap usage.</p>
<p>Beyond that, any other included file provides support for packages, license information, and development.</p>
</div>
</main>
@@ -651,7 +655,7 @@
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -700,7 +704,7 @@
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -709,12 +713,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -728,10 +732,10 @@
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -758,7 +762,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

64
docs/5.2/getting-started/contribute/index.html
View File

@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<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">
<meta name="twitter:image" content="/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">
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +480,7 @@
</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
@@ -502,22 +502,22 @@
</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/package.json">package.json</a> houses these scripts for compiling code, running tests, and more. These aren&rsquo;t intended for use outside our repository and documentation.</p>
<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.1/package.json">package.json</a> houses these scripts for compiling code, running tests, and more. These aren&rsquo;t intended for use outside our repository and documentation.</p>
<p>To use our build system and run our documentation locally, you&rsquo;ll need a copy of Bootstrap&rsquo;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.zip">download Bootstrap&rsquo;s sources</a> or fork <a href="https://github.com/twbs/bootstrap">Bootstrap&rsquo;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/package.json">package.json</a>.</li>
<li>Either <a href="https://github.com/twbs/bootstrap/archive/v5.2.1.zip">download Bootstrap&rsquo;s sources</a> or fork <a href="https://github.com/twbs/bootstrap">Bootstrap&rsquo;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.1/package.json">package.json</a>.</li>
</ol>
<p>When completed, you&rsquo;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/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>
<p>Our <a href="https://github.com/twbs/bootstrap/blob/v5.2.1/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>
@@ -554,7 +554,7 @@
<p>Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don&rsquo;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/.browserslistrc">.browserslistrc</a> for details.</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.1/.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 (e.g. <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>
@@ -584,7 +584,7 @@
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -633,7 +633,7 @@
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -642,12 +642,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -661,10 +661,10 @@
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -691,7 +691,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

82
docs/5.2/getting-started/download/index.html
View File

@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<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">
<meta name="twitter:image" content="/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">
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +480,7 @@
</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
@@ -508,19 +508,19 @@
</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</strong> to easily drop into your project, which includes:</p>
<p>Download ready-to-use compiled code for <strong>Bootstrap v5.2.1</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&rsquo;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/bootstrap-5.2.0-dist.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a></p>
<p><a href="https://github.com/twbs/bootstrap/releases/download/v5.2.1/bootstrap-5.2.1-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>
@@ -528,28 +528,28 @@
<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&rsquo;re likely unsuitable for your own purposes.</p>
<p><a href="https://github.com/twbs/bootstrap/archive/v5.2.0.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a></p>
<p><a href="https://github.com/twbs/bootstrap/archive/v5.2.1.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/bootstrap-5.2.0-examples.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Examples');">Download Examples</a></p>
<p><a href="https://github.com/twbs/bootstrap/releases/download/v5.2.1/bootstrap-5.2.1-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&rsquo;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">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css&#34;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css&#34;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span></code></pre></div><p>If you&rsquo;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">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</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&rsquo;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
<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.1
</span></span></code></pre></div><p><code>const bootstrap = require('bootstrap')</code> or <code>import bootstrap from 'bootstrap'</code> will load all of Bootstrap&rsquo;s plugins onto a <code>bootstrap</code> object.
The <code>bootstrap</code> module itself exports all of our plugins. You can manually load Bootstrap&rsquo;s plugins individually by loading the <code>/js/dist/*.js</code> files under the package&rsquo;s top-level directory.</p>
<p>Bootstrap&rsquo;s <code>package.json</code> contains some additional metadata under the following keys:</p>
<ul>
<li><code>sass</code> - path to Bootstrap&rsquo;s main <a href="https://sass-lang.com/">Sass</a> source file</li>
<li><code>style</code> - path to Bootstrap&rsquo;s non-minified CSS that&rsquo;s been precompiled using the default settings (no customization)</li>
<li><code>style</code> - path to Bootstrap&rsquo;s non-minified CSS that&rsquo;s been compiled 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.
@@ -557,16 +557,16 @@ The <code>bootstrap</code> module itself exports all of our plugins. You can man
<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
<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.1
</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">&#39;bootstrap&#39;</span><span class="p">,</span> <span class="s1">&#39;~&gt; 5.2.0&#39;</span>
<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">&#39;bootstrap&#39;</span><span class="p">,</span> <span class="s1">&#39;~&gt; 5.2.1&#39;</span>
</span></span></code></pre></div><p>Alternatively, if you&rsquo;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
<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.1
</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap-rubygem/blob/master/README.md">See the gem&rsquo;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&rsquo;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
<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.1
</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&rsquo;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>
@@ -588,7 +588,7 @@ The <code>bootstrap</code> module itself exports all of our plugins. You can man
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -637,7 +637,7 @@ The <code>bootstrap</code> module itself exports all of our plugins. You can man
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -646,12 +646,12 @@ The <code>bootstrap</code> module itself exports all of our plugins. You can man
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -665,10 +665,10 @@ The <code>bootstrap</code> module itself exports all of our plugins. You can man
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -695,7 +695,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

71
docs/5.2/getting-started/introduction/index.html
View File

@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<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">
<meta name="twitter:image" content="/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">
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +480,7 @@
</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
@@ -508,10 +508,10 @@
</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&rsquo;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>
@@ -539,16 +539,16 @@
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Bootstrap demo<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css&#34;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css&#34;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Hello, world!<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</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&rsquo;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">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</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>
@@ -566,11 +566,11 @@
<tbody>
<tr>
<td>CSS</td>
<td><code>https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css</code></td>
<td><code>https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css</code></td>
</tr>
<tr>
<td>JS</td>
<td><code>https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js</code></td>
<td><code>https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js</code></td>
</tr>
</tbody>
</table></div>
@@ -582,7 +582,7 @@
<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&rsquo;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>
<p>Read about what&rsquo;s included in Bootstrap in our <a href="/docs/5.2/getting-started/contents/">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>
@@ -634,9 +634,10 @@
<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>
<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>Ask and explore <a href="https://github.com/twbs/bootstrap/discussions">our GitHub Discussions</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>
@@ -659,7 +660,7 @@
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -708,7 +709,7 @@
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -717,12 +718,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -736,10 +737,10 @@
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -766,7 +767,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

60
docs/5.2/getting-started/javascript/index.html
View File

@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<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">
<meta name="twitter:image" content="/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">
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +480,7 @@
</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
@@ -522,10 +522,10 @@
</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&rsquo;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&rsquo;t include both).</p>
@@ -561,7 +561,7 @@
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css&#34;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css&#34;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Hello, modularity!<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
@@ -572,8 +572,8 @@
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;importmap&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;imports&#34;</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;@popperjs/core&#34;</span><span class="o">:</span> <span class="s2">&#34;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;bootstrap&#34;</span><span class="o">:</span> <span class="s2">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.esm.min.js&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;@popperjs/core&#34;</span><span class="o">:</span> <span class="s2">&#34;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="s2">&#34;bootstrap&#34;</span><span class="o">:</span> <span class="s2">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.esm.min.js&#34;</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">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
@@ -791,7 +791,7 @@
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -840,7 +840,7 @@
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -849,12 +849,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -868,10 +868,10 @@
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -898,7 +898,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

54
docs/5.2/getting-started/parcel/index.html
View File

@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Bootstrap &amp; Parcel">
<meta name="twitter:description" content="The official guide for how to include and bundle Bootstrap&rsquo;s CSS and JavaScript in your project using Parcel.">
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
<meta name="twitter:image" content="/docs/5.2/assets/img/guides/bootstrap-parcel@2x.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/getting-started/parcel/">
<meta property="og:title" content="Bootstrap &amp; Parcel">
<meta property="og:description" content="The official guide for how to include and bundle Bootstrap&rsquo;s CSS and JavaScript 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">
<meta property="og:image" content="/docs/5.2/assets/img/guides/bootstrap-parcel@2x.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +480,7 @@
</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
@@ -499,10 +499,10 @@
</nav>
</div>
</div>
<div class="bd-content ps-lg-2">
<img class="mb-4 img-fluid rounded-3" srcset="/docs/5.2/assets/img/guides/bootstrap-parcel.png, /docs/5.2/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/5.2/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">
<div class="bd-callout bd-callout-info">
@@ -631,7 +631,7 @@
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -680,7 +680,7 @@
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -689,12 +689,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -708,10 +708,10 @@
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -738,7 +738,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

54
docs/5.2/getting-started/rfs/index.html
View File

@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="RFS">
<meta name="twitter:description" content="Bootstrap&rsquo;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">
<meta name="twitter:image" content="/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&rsquo;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">
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +480,7 @@
</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
@@ -503,10 +503,10 @@
</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&rsquo;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>
@@ -573,7 +573,7 @@
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -622,7 +622,7 @@
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -631,12 +631,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -650,10 +650,10 @@
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -680,7 +680,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

66
docs/5.2/getting-started/rtl/index.html
View File

@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<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">
<meta name="twitter:image" content="/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">
<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +480,7 @@
</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
@@ -512,17 +512,17 @@
</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&rsquo;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&rsquo;d love to get your insights.
<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/choose">Open an issue</a>, we&rsquo;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>
@@ -532,7 +532,7 @@
<li>Add an appropriate <code>lang</code> attribute, like <code>lang=&quot;ar&quot;</code>, on the <code>&lt;html&gt;</code> element.</li>
</ol>
<p>From there, you&rsquo;ll need to include an RTL version of our CSS. For example, here&rsquo;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">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.rtl.min.css&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-+4j30LffJ4tgIMrq9CwHvn0NjEvmuDCOfk6Rpg2xg7zgOxWWtLtozDEEVvBPgHqE&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.rtl.min.css&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</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">&lt;!doctype html&gt;</span>
@@ -543,7 +543,7 @@
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- Bootstrap CSS --&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.rtl.min.css&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-+4j30LffJ4tgIMrq9CwHvn0NjEvmuDCOfk6Rpg2xg7zgOxWWtLtozDEEVvBPgHqE&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.rtl.min.css&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>مرحبًا بالعالم!<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
@@ -553,12 +553,12 @@
</span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- Optional JavaScript; choose one of the two! --&gt;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- Option 1: Bootstrap Bundle with Popper --&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c">&lt;!-- Option 2: Separate Popper and Bootstrap JS --&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="c">&lt;!--
</span></span></span><span class="line"><span class="cl"><span class="c"> &lt;script src=&#34;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js&#34; integrity=&#34;sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt;
</span></span></span><span class="line"><span class="cl"><span class="c"> &lt;script src=&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js&#34; integrity=&#34;sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt;
</span></span></span><span class="line"><span class="cl"><span class="c"> &lt;script src=&#34;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js&#34; integrity=&#34;sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt;
</span></span></span><span class="line"><span class="cl"><span class="c"> &lt;script src=&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js&#34; integrity=&#34;sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt;
</span></span></span><span class="line"><span class="cl"><span class="c"> --&gt;</span>
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
@@ -669,7 +669,7 @@
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -718,7 +718,7 @@
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -727,12 +727,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -746,10 +746,10 @@
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -776,7 +776,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

54
docs/5.2/getting-started/vite/index.html
View File

@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Bootstrap &amp; Vite">
<meta name="twitter:description" content="The official guide for how to include and bundle Bootstrap&rsquo;s CSS and JavaScript in your project using Vite.">
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
<meta name="twitter:image" content="/docs/5.2/assets/img/guides/bootstrap-vite@2x.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/getting-started/vite/">
<meta property="og:title" content="Bootstrap &amp; Vite">
<meta property="og:description" content="The official guide for how to include and bundle Bootstrap&rsquo;s CSS and JavaScript in your project using Vite.">
<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">
<meta property="og:image" content="/docs/5.2/assets/img/guides/bootstrap-vite@2x.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +480,7 @@
</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
@@ -499,10 +499,10 @@
</nav>
</div>
</div>
<div class="bd-content ps-lg-2">
<img class="mb-4 img-fluid rounded-3" srcset="/docs/5.2/assets/img/guides/bootstrap-vite.png, /docs/5.2/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/5.2/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">
<div class="bd-callout bd-callout-info">
@@ -667,7 +667,7 @@
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -716,7 +716,7 @@
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -725,12 +725,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -744,10 +744,10 @@
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -774,7 +774,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

123
docs/5.2/getting-started/webpack/index.html
View File

@@ -18,7 +18,7 @@
<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-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
@@ -31,23 +31,21 @@
<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:card" content="summary_large_image">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Bootstrap &amp; Webpack">
<meta name="twitter:description" content="The official guide for how to include and bundle Bootstrap&rsquo;s CSS and JavaScript in your project using Webpack.">
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
<meta name="twitter:image" content="/docs/5.2/assets/img/guides/bootstrap-webpack@2x.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/5.2/getting-started/webpack/">
<meta property="og:title" content="Bootstrap &amp; Webpack">
<meta property="og:description" content="The official guide for how to include and bundle Bootstrap&rsquo;s CSS and JavaScript in your project using Webpack.">
<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">
<meta property="og:image" content="/docs/5.2/assets/img/guides/bootstrap-webpack@2x.png">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
@@ -145,6 +143,7 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@
<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">
@@ -218,7 +218,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +254,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +480,7 @@
</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
@@ -495,14 +495,20 @@
<li><a href="#project-structure">Project structure</a></li>
<li><a href="#configure-webpack">Configure Webpack</a></li>
<li><a href="#import-bootstrap">Import Bootstrap</a></li>
<li><a href="#production-optimizations">Production optimizations</a>
<ul>
<li><a href="#extracting-css">Extracting CSS</a></li>
<li><a href="#extracting-svg-files">Extracting SVG files</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="bd-content ps-lg-2">
<img class="mb-4 img-fluid rounded-3" srcset="/docs/5.2/assets/img/guides/bootstrap-webpack.png, /docs/5.2/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/5.2/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt="">
<div class="bd-callout bd-callout-info">
@@ -682,6 +688,69 @@
<p>Now you can start adding any Bootstrap components you want to use. Be sure to <a href="https://github.com/twbs/examples/tree/main/webpack">check out the complete Webpack example project</a> for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap&rsquo;s CSS and JS that you need.</p>
</li>
</ol>
<h2 id="production-optimizations">Production optimizations <a class="anchor-link" href="#production-optimizations" aria-label="Link to this section: Production optimizations"></a></h2>
<p>Depending on your setup, you may want to implement some additional security and speed optimizations useful for running the project in production. Note that these optimizations are not applied on <a href="https://github.com/twbs/examples/tree/main/webpack">the Webpack example project</a> and are up to you to implement.</p>
<h3 id="extracting-css">Extracting CSS <a class="anchor-link" href="#extracting-css" aria-label="Link to this section: Extracting CSS"></a></h3>
<p>The <code>style-loader</code> we configured above conveniently emits CSS into the bundle so that manually loading a CSS file in <code>dist/index.html</code> isn&rsquo;t necessary. This approach may not work with a strict Content Security Policy, however, and it may become a bottleneck in your application due to the large bundle size.</p>
<p>To separate the CSS so that we can load it directly from <code>dist/index.html</code>, use the <code>mini-css-extract-loader</code> Webpack plugin.</p>
<p>First, install the plugin:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm install --save-dev mini-css-extract-plugin
</span></span></code></pre></div><p>Then instantiate and use the plugin in the Webpack configuration:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-diff" data-lang="diff"><span class="line"><span class="cl"><span class="gd">--- a/webpack/webpack.config.js
</span></span></span><span class="line"><span class="cl"><span class="gd"></span><span class="gi">+++ b/webpack/webpack.config.js
</span></span></span><span class="line"><span class="cl"><span class="gi"></span><span class="gu">@@ -1,8 +1,10 @@
</span></span></span><span class="line"><span class="cl"><span class="gu"></span><span class="gi">+const miniCssExtractPlugin = require(&#39;mini-css-extract-plugin&#39;)
</span></span></span><span class="line"><span class="cl"><span class="gi"></span> const path = require(&#39;path&#39;)
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> module.exports = {
</span></span><span class="line"><span class="cl"> mode: &#39;development&#39;,
</span></span><span class="line"><span class="cl"> entry: &#39;./src/js/main.js&#39;,
</span></span><span class="line"><span class="cl"><span class="gi">+ plugins: [new miniCssExtractPlugin()],
</span></span></span><span class="line"><span class="cl"><span class="gi"></span> output: {
</span></span><span class="line"><span class="cl"> filename: &#34;main.js&#34;,
</span></span><span class="line"><span class="cl"> path: path.resolve(__dirname, &#34;dist&#34;),
</span></span><span class="line"><span class="cl"><span class="gu">@@ -18,8 +20,8 @@ module.exports = {
</span></span></span><span class="line"><span class="cl"><span class="gu"></span> test: /\.(scss)$/,
</span></span><span class="line"><span class="cl"> use: [
</span></span><span class="line"><span class="cl"> {
</span></span><span class="line"><span class="cl"><span class="gd">- // Adds CSS to the DOM by injecting a `&lt;style&gt;` tag
</span></span></span><span class="line"><span class="cl"><span class="gd">- loader: &#39;style-loader&#39;
</span></span></span><span class="line"><span class="cl"><span class="gd"></span><span class="gi">+ // Extracts CSS for each JS file that includes CSS
</span></span></span><span class="line"><span class="cl"><span class="gi">+ loader: miniCssExtractPlugin.loader
</span></span></span><span class="line"><span class="cl"><span class="gi"></span> },
</span></span><span class="line"><span class="cl"> {
</span></span></code></pre></div><p>After running <code>npm run build</code> again, there will be a new file <code>dist/main.css</code>, which will contain all of the CSS imported by <code>src/js/main.js</code>. If you view <code>dist/index.html</code> in your browser now, the style will be missing, as it is now in <code>dist/main.css</code>. You can include the generated CSS in <code>dist/index.html</code> like this:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-diff" data-lang="diff"><span class="line"><span class="cl"><span class="gd">--- a/webpack/dist/index.html
</span></span></span><span class="line"><span class="cl"><span class="gd"></span><span class="gi">+++ b/webpack/dist/index.html
</span></span></span><span class="line"><span class="cl"><span class="gi"></span><span class="gu">@@ -3,6 +3,7 @@
</span></span></span><span class="line"><span class="cl"><span class="gu"></span> &lt;head&gt;
</span></span><span class="line"><span class="cl"> &lt;meta charset=&#34;utf-8&#34;&gt;
</span></span><span class="line"><span class="cl"> &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt;
</span></span><span class="line"><span class="cl"><span class="gi">+ &lt;link rel=&#34;stylesheet&#34; href=&#34;./main.css&#34;&gt;
</span></span></span><span class="line"><span class="cl"><span class="gi"></span> &lt;title&gt;Bootstrap w/ Webpack&lt;/title&gt;
</span></span><span class="line"><span class="cl"> &lt;/head&gt;
</span></span><span class="line"><span class="cl"> &lt;body&gt;
</span></span></code></pre></div><h3 id="extracting-svg-files">Extracting SVG files <a class="anchor-link" href="#extracting-svg-files" aria-label="Link to this section: Extracting SVG files"></a></h3>
<p>Bootstrap&rsquo;s CSS includes multiple references to SVG files via inline <code>data:</code> URIs. If you define a Content Security Policy for your project that blocks <code>data:</code> URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack&rsquo;s asset modules feature.</p>
<p>Configure Webpack to extract inline SVG files like this:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-diff" data-lang="diff"><span class="line"><span class="cl"><span class="gd">--- a/webpack/webpack.config.js
</span></span></span><span class="line"><span class="cl"><span class="gd"></span><span class="gi">+++ b/webpack/webpack.config.js
</span></span></span><span class="line"><span class="cl"><span class="gi"></span><span class="gu">@@ -16,6 +16,14 @@ module.exports = {
</span></span></span><span class="line"><span class="cl"><span class="gu"></span> },
</span></span><span class="line"><span class="cl"> module: {
</span></span><span class="line"><span class="cl"> rules: [
</span></span><span class="line"><span class="cl"><span class="gi">+ {
</span></span></span><span class="line"><span class="cl"><span class="gi">+ mimetype: &#39;image/svg+xml&#39;,
</span></span></span><span class="line"><span class="cl"><span class="gi">+ scheme: &#39;data&#39;,
</span></span></span><span class="line"><span class="cl"><span class="gi">+ type: &#39;asset/resource&#39;,
</span></span></span><span class="line"><span class="cl"><span class="gi">+ generator: {
</span></span></span><span class="line"><span class="cl"><span class="gi">+ filename: &#39;icons/[hash].svg&#39;
</span></span></span><span class="line"><span class="cl"><span class="gi">+ }
</span></span></span><span class="line"><span class="cl"><span class="gi">+ },
</span></span></span><span class="line"><span class="cl"><span class="gi"></span> {
</span></span><span class="line"><span class="cl"> test: /\.(scss)$/,
</span></span><span class="line"><span class="cl"> use: [
</span></span></code></pre></div><p>After running <code>npm run build</code> again, you&rsquo;ll find the SVG files extracted into <code>dist/icons</code> and properly referenced from CSS.</p>
<hr class="my-5">
<p><em>See something wrong or out of date here? Please <a href="https://github.com/twbs/bootstrap/issues/new/choose">open an issue on GitHub</a>. Need help troubleshooting? <a href="https://github.com/twbs/bootstrap/discussions">Search or start a discussion</a> on GitHub.</em>
@@ -701,7 +770,7 @@
<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.</li>
<li class="mb-2">Currently v5.2.1.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -750,7 +819,7 @@
</div>
</footer>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -759,12 +828,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -778,10 +847,10 @@
<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\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
@@ -808,7 +877,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>