mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 10:34:07 +02:00
Code Issues Releases Wiki Activity

Add v5.0.2 docs

Browse Source
This commit is contained in:
XhmikosR
2021-06-22 21:28:23 +03:00
parent 258f7e37f3
commit a43dd5a897
181 changed files with 4591 additions and 4253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
docs/5.0/customize/color/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1">
<meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0">
@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -137,7 +137,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +393,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -412,47 +412,47 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="theme-colors">Theme colors</h2>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap&rsquo;s <code>scss/_variables.scss</code> file.</p>
<div class="row">
<div class="col-md-4">
<div class="p-3 mb-3 bg-primary text-white">Primary</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-success text-white">Success</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-danger text-white">Danger</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-warning text-dark">Warning</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-info text-dark">Info</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-light text-dark">Light</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-dark text-white">Dark</div>
</div>
</div>
<p>All these colors are available as a Sass map, <code>$theme-colors</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span>
@@ -471,265 +471,265 @@
<p>All Bootstrap colors are available as Sass variables and a Sass map in <code>scss/_variables.scss</code> file. To avoid increased file sizes, we don&rsquo;t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a <a href="#theme-colors">theme palette</a>.</p>
<p>Be sure to monitor contrast ratios as you customize colors. As shown below, we&rsquo;ve added three contrast ratios to each of the main colors—one for the swatch&rsquo;s current colors, one for against white, and one for against black.</p>
<div class="row font-monospace">
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-blue">
<strong class="d-block">$blue</strong>
#0d6efd
</div>
<div class="p-3 bd-blue-100">$blue-100</div>
<div class="p-3 bd-blue-200">$blue-200</div>
<div class="p-3 bd-blue-300">$blue-300</div>
<div class="p-3 bd-blue-400">$blue-400</div>
<div class="p-3 bd-blue-500">$blue-500</div>
<div class="p-3 bd-blue-600">$blue-600</div>
<div class="p-3 bd-blue-700">$blue-700</div>
<div class="p-3 bd-blue-800">$blue-800</div>
<div class="p-3 bd-blue-900">$blue-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-indigo">
<strong class="d-block">$indigo</strong>
#6610f2
</div>
<div class="p-3 bd-indigo-100">$indigo-100</div>
<div class="p-3 bd-indigo-200">$indigo-200</div>
<div class="p-3 bd-indigo-300">$indigo-300</div>
<div class="p-3 bd-indigo-400">$indigo-400</div>
<div class="p-3 bd-indigo-500">$indigo-500</div>
<div class="p-3 bd-indigo-600">$indigo-600</div>
<div class="p-3 bd-indigo-700">$indigo-700</div>
<div class="p-3 bd-indigo-800">$indigo-800</div>
<div class="p-3 bd-indigo-900">$indigo-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-purple">
<strong class="d-block">$purple</strong>
#6f42c1
</div>
<div class="p-3 bd-purple-100">$purple-100</div>
<div class="p-3 bd-purple-200">$purple-200</div>
<div class="p-3 bd-purple-300">$purple-300</div>
<div class="p-3 bd-purple-400">$purple-400</div>
<div class="p-3 bd-purple-500">$purple-500</div>
<div class="p-3 bd-purple-600">$purple-600</div>
<div class="p-3 bd-purple-700">$purple-700</div>
<div class="p-3 bd-purple-800">$purple-800</div>
<div class="p-3 bd-purple-900">$purple-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-pink">
<strong class="d-block">$pink</strong>
#d63384
</div>
<div class="p-3 bd-pink-100">$pink-100</div>
<div class="p-3 bd-pink-200">$pink-200</div>
<div class="p-3 bd-pink-300">$pink-300</div>
<div class="p-3 bd-pink-400">$pink-400</div>
<div class="p-3 bd-pink-500">$pink-500</div>
<div class="p-3 bd-pink-600">$pink-600</div>
<div class="p-3 bd-pink-700">$pink-700</div>
<div class="p-3 bd-pink-800">$pink-800</div>
<div class="p-3 bd-pink-900">$pink-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-red">
<strong class="d-block">$red</strong>
#dc3545
</div>
<div class="p-3 bd-red-100">$red-100</div>
<div class="p-3 bd-red-200">$red-200</div>
<div class="p-3 bd-red-300">$red-300</div>
<div class="p-3 bd-red-400">$red-400</div>
<div class="p-3 bd-red-500">$red-500</div>
<div class="p-3 bd-red-600">$red-600</div>
<div class="p-3 bd-red-700">$red-700</div>
<div class="p-3 bd-red-800">$red-800</div>
<div class="p-3 bd-red-900">$red-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-orange">
<strong class="d-block">$orange</strong>
#fd7e14
</div>
<div class="p-3 bd-orange-100">$orange-100</div>
<div class="p-3 bd-orange-200">$orange-200</div>
<div class="p-3 bd-orange-300">$orange-300</div>
<div class="p-3 bd-orange-400">$orange-400</div>
<div class="p-3 bd-orange-500">$orange-500</div>
<div class="p-3 bd-orange-600">$orange-600</div>
<div class="p-3 bd-orange-700">$orange-700</div>
<div class="p-3 bd-orange-800">$orange-800</div>
<div class="p-3 bd-orange-900">$orange-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-yellow">
<strong class="d-block">$yellow</strong>
#ffc107
</div>
<div class="p-3 bd-yellow-100">$yellow-100</div>
<div class="p-3 bd-yellow-200">$yellow-200</div>
<div class="p-3 bd-yellow-300">$yellow-300</div>
<div class="p-3 bd-yellow-400">$yellow-400</div>
<div class="p-3 bd-yellow-500">$yellow-500</div>
<div class="p-3 bd-yellow-600">$yellow-600</div>
<div class="p-3 bd-yellow-700">$yellow-700</div>
<div class="p-3 bd-yellow-800">$yellow-800</div>
<div class="p-3 bd-yellow-900">$yellow-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-green">
<strong class="d-block">$green</strong>
#198754
</div>
<div class="p-3 bd-green-100">$green-100</div>
<div class="p-3 bd-green-200">$green-200</div>
<div class="p-3 bd-green-300">$green-300</div>
<div class="p-3 bd-green-400">$green-400</div>
<div class="p-3 bd-green-500">$green-500</div>
<div class="p-3 bd-green-600">$green-600</div>
<div class="p-3 bd-green-700">$green-700</div>
<div class="p-3 bd-green-800">$green-800</div>
<div class="p-3 bd-green-900">$green-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-teal">
<strong class="d-block">$teal</strong>
#20c997
</div>
<div class="p-3 bd-teal-100">$teal-100</div>
<div class="p-3 bd-teal-200">$teal-200</div>
<div class="p-3 bd-teal-300">$teal-300</div>
<div class="p-3 bd-teal-400">$teal-400</div>
<div class="p-3 bd-teal-500">$teal-500</div>
<div class="p-3 bd-teal-600">$teal-600</div>
<div class="p-3 bd-teal-700">$teal-700</div>
<div class="p-3 bd-teal-800">$teal-800</div>
<div class="p-3 bd-teal-900">$teal-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-cyan">
<strong class="d-block">$cyan</strong>
#0dcaf0
</div>
<div class="p-3 bd-cyan-100">$cyan-100</div>
<div class="p-3 bd-cyan-200">$cyan-200</div>
<div class="p-3 bd-cyan-300">$cyan-300</div>
<div class="p-3 bd-cyan-400">$cyan-400</div>
<div class="p-3 bd-cyan-500">$cyan-500</div>
<div class="p-3 bd-cyan-600">$cyan-600</div>
<div class="p-3 bd-cyan-700">$cyan-700</div>
<div class="p-3 bd-cyan-800">$cyan-800</div>
<div class="p-3 bd-cyan-900">$cyan-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-gray-500">
@@ -737,24 +737,24 @@
#adb5bd
</div>
<div class="p-3 bd-gray-100">$gray-100</div>
<div class="p-3 bd-gray-200">$gray-200</div>
<div class="p-3 bd-gray-300">$gray-300</div>
<div class="p-3 bd-gray-400">$gray-400</div>
<div class="p-3 bd-gray-500">$gray-500</div>
<div class="p-3 bd-gray-600">$gray-600</div>
<div class="p-3 bd-gray-700">$gray-700</div>
<div class="p-3 bd-gray-800">$gray-800</div>
<div class="p-3 bd-gray-900">$gray-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 bd-black text-white">
<strong class="d-block">$black</strong>
@@ -797,10 +797,10 @@
<p>Add, remove, or modify values within the map to update how they&rsquo;re used in many other components. Unfortunately at this time, not <em>every</em> component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the <code>${color}</code> variables and this Sass map.</p>
<h3 id="example">Example</h3>
<p>Here&rsquo;s how you can use these in your Sass:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.alpha</span> <span class="p">{</span> <span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">purple</span><span class="p">;</span> <span class="p">}</span>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.alpha</span> <span class="p">{</span> <span class="na">color</span><span class="o">:</span> <span class="nv">$purple</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.beta</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">yellow-300</span><span class="p">;</span>
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">indigo-900</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$yellow-300</span><span class="p">;</span>
<span class="na">background-color</span><span class="o">:</span> <span class="nv">$indigo-900</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div><p><a href="/docs/5.0/utilities/colors/">Color</a> and <a href="/docs/5.0/utilities/background/">background</a> utility classes are also available for setting <code>color</code> and <code>background-color</code> using the <code>500</code> color values.</p>
@@ -820,7 +820,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.0/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.0.1.</li>
<li class="mb-2">Currently v5.0.2.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -867,7 +867,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -875,7 +875,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

50
docs/5.0/customize/components/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn how and why we build nearly all our components responsively and with base and modifier classes.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1">
<meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0">
@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -137,7 +137,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +393,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -405,10 +405,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="base-classes">Base classes</h2>
<p>Bootstrap&rsquo;s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like <code>.btn</code>, and then group individual styles for each variant into modifier classes, like <code>.btn-primary</code> or <code>.btn-success</code>.</p>
@@ -419,7 +419,7 @@
<p>Here are two examples of how we loop over the <code>$theme-colors</code> map to generate modifiers to the <code>.alert</code> and <code>.list-group</code> components.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Generate contextual modifier classes for colorizing the alert.
</span><span class="c1"></span>
<span class="k">@each</span> <span class="err">$</span><span class="nt">state</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
<span class="k">@each</span> <span class="nv">$state</span><span class="o">,</span> <span class="nv">$value</span> <span class="ow">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
<span class="nv">$alert-background</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$alert-bg-scale</span><span class="p">);</span>
<span class="nv">$alert-border</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$alert-border-scale</span><span class="p">);</span>
<span class="nv">$alert-color</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$alert-color-scale</span><span class="p">);</span>
@@ -436,7 +436,7 @@
</span><span class="c1">// Add modifier classes to change text and background color on individual items.
</span><span class="c1">// Organizationally, this must come after the `:hover` states.
</span><span class="c1"></span>
<span class="k">@each</span> <span class="err">$</span><span class="nt">state</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
<span class="k">@each</span> <span class="nv">$state</span><span class="o">,</span> <span class="nv">$value</span> <span class="ow">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
<span class="nv">$list-group-variant-bg</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-bg-scale</span><span class="p">);</span>
<span class="nv">$list-group-variant-color</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$value</span><span class="o">,</span> <span class="nv">$list-group-item-color-scale</span><span class="p">);</span>
<span class="k">@if</span> <span class="p">(</span><span class="nf">contrast-ratio</span><span class="p">(</span><span class="nv">$list-group-variant-bg</span><span class="o">,</span> <span class="nv">$list-group-variant-color</span><span class="p">)</span> <span class="o">&lt;</span> <span class="nv">$min-contrast-ratio</span><span class="p">)</span> <span class="p">{</span>
@@ -451,25 +451,25 @@
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// We deliberately hardcode the `bs-` prefix because we check
</span><span class="c1">// this custom property in JS to determine Popper&#39;s positioning
</span><span class="c1"></span>
<span class="k">@each</span> <span class="err">$</span><span class="nt">breakpoint</span> <span class="nt">in</span> <span class="nt">map-keys</span><span class="o">(</span><span class="err">$</span><span class="nt">grid-breakpoints</span><span class="o">)</span> <span class="p">{</span>
<span class="k">@each</span> <span class="nv">$breakpoint</span> <span class="ow">in</span> <span class="nf">map-keys</span><span class="p">(</span><span class="nv">$grid-breakpoints</span><span class="p">)</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> media-breakpoint-up</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="p">)</span> <span class="p">{</span>
<span class="nv">$infix</span><span class="o">:</span> <span class="nf">breakpoint-infix</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="o">,</span> <span class="nv">$grid-breakpoints</span><span class="p">);</span>
<span class="nc">.dropdown-menu</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-start</span> <span class="p">{</span>
<span class="nt">--bs-position</span><span class="nd">:</span> <span class="nt">start</span><span class="p">;</span>
<span class="na">--bs-position</span><span class="o">:</span> <span class="ni">start</span><span class="p">;</span>
<span class="k">&amp;</span><span class="o">[</span><span class="nt">data-bs-popper</span><span class="o">]</span> <span class="p">{</span>
<span class="nt">right</span><span class="nd">:</span> <span class="nt">auto</span> <span class="nn">#</span><span class="p">{</span><span class="s2">&#34;/* rtl:ignore */&#34;</span><span class="p">};</span>
<span class="nt">left</span><span class="nd">:</span> <span class="nt">0</span> <span class="nn">#</span><span class="p">{</span><span class="s2">&#34;/* rtl:ignore */&#34;</span><span class="p">};</span>
<span class="na">right</span><span class="o">:</span> <span class="ni">auto</span><span class="p">;</span>
<span class="na">left</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nc">.dropdown-menu</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-end</span> <span class="p">{</span>
<span class="nt">--bs-position</span><span class="nd">:</span> <span class="nt">end</span><span class="p">;</span>
<span class="na">--bs-position</span><span class="o">:</span> <span class="ni">end</span><span class="p">;</span>
<span class="k">&amp;</span><span class="o">[</span><span class="nt">data-bs-popper</span><span class="o">]</span> <span class="p">{</span>
<span class="nt">right</span><span class="nd">:</span> <span class="nt">0</span> <span class="nn">#</span><span class="p">{</span><span class="s2">&#34;/* rtl:ignore */&#34;</span><span class="p">};</span>
<span class="nt">left</span><span class="nd">:</span> <span class="nt">auto</span> <span class="nn">#</span><span class="p">{</span><span class="s2">&#34;/* rtl:ignore */&#34;</span><span class="p">};</span>
<span class="na">right</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="na">left</span><span class="o">:</span> <span class="ni">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
@@ -477,12 +477,12 @@
</code></pre></div>
<p>Should you modify your <code>$grid-breakpoints</code>, your changes will apply to all the loops iterating over that map.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$grid-breakpoints</span><span class="o">:</span> <span class="p">(</span>
<span class="n">xs</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
<span class="n">sm</span><span class="o">:</span> <span class="mi">576</span><span class="kt">px</span><span class="o">,</span>
<span class="n">md</span><span class="o">:</span> <span class="mi">768</span><span class="kt">px</span><span class="o">,</span>
<span class="n">lg</span><span class="o">:</span> <span class="mi">992</span><span class="kt">px</span><span class="o">,</span>
<span class="n">xl</span><span class="o">:</span> <span class="mi">1200</span><span class="kt">px</span><span class="o">,</span>
<span class="n">xxl</span><span class="o">:</span> <span class="mi">1400</span><span class="kt">px</span>
<span class="na">xs</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
<span class="na">sm</span><span class="o">:</span> <span class="mi">576</span><span class="kt">px</span><span class="o">,</span>
<span class="na">md</span><span class="o">:</span> <span class="mi">768</span><span class="kt">px</span><span class="o">,</span>
<span class="na">lg</span><span class="o">:</span> <span class="mi">992</span><span class="kt">px</span><span class="o">,</span>
<span class="na">xl</span><span class="o">:</span> <span class="mi">1200</span><span class="kt">px</span><span class="o">,</span>
<span class="na">xxl</span><span class="o">:</span> <span class="mi">1400</span><span class="kt">px</span>
<span class="p">);</span>
</code></pre></div>
<p>For more information and examples on how to modify our Sass maps and variables, please refer to <a href="/docs/5.0/layout/grid/#sass">the Sass section of the Grid documentation</a>.</p>
@@ -532,7 +532,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.0/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.0.1.</li>
<li class="mb-2">Currently v5.0.2.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -579,7 +579,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -587,7 +587,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

20
docs/5.0/customize/css-variables/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Use Bootstrap&rsquo;s CSS custom properties for fast and forward-looking design and development.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1">
<meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0">
@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -137,7 +137,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +393,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -404,10 +404,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<p>Bootstrap includes around two dozen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS custom properties (variables)</a> in its compiled CSS, with dozens more on the way for improved customization on a per-component basis. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser&rsquo;s inspector, a code sandbox, or general prototyping.</p>
<p><strong>All our custom properties are prefixed with <code>bs-</code></strong> to avoid conflicts with third party CSS.</p>
@@ -468,7 +468,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.0/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.0.1.</li>
<li class="mb-2">Currently v5.0.2.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -515,7 +515,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -523,7 +523,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

20
docs/5.0/customize/optimize/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1">
<meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0">
@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -137,7 +137,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +393,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -408,10 +408,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="lean-sass-imports">Lean Sass imports</h2>
<p>When using Sass in your asset pipeline, make sure you optimize Bootstrap by only <code>@import</code>ing the components you need. Your largest optimizations will likely come from the <code>Layout &amp; Components</code> section of our <code>bootstrap.scss</code>.</p>
@@ -528,7 +528,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.0/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.0.1.</li>
<li class="mb-2">Currently v5.0.2.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -575,7 +575,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -583,7 +583,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

18
docs/5.0/customize/options/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1">
<meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0">
@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -137,7 +137,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,10 +393,10 @@
</div>
<div class="bd-content ps-lg-4">
<p>Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new <code>$enable-*</code> Sass variables. Override a variable&rsquo;s value and recompile with <code>npm run test</code> as needed.</p>
<p>You can find and customize these variables for key global options in Bootstrap&rsquo;s <code>scss/_variables.scss</code> file.</p>
@@ -499,7 +499,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.0/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.0.1.</li>
<li class="mb-2">Currently v5.0.2.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -546,7 +546,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -554,7 +554,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

36
docs/5.0/customize/overview/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1">
<meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0">
@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -137,7 +137,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,56 +393,56 @@
</div>
<div class="bd-content ps-lg-4">
<div class="row g-3">
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../sass/">
<strong class="d-block h5 mb-0">Sass</strong>
<span class="text-secondary">Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../options/">
<strong class="d-block h5 mb-0">Options</strong>
<span class="text-secondary">Customize Bootstrap with built-in variables to easily toggle global CSS preferences.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../color/">
<strong class="d-block h5 mb-0">Color</strong>
<span class="text-secondary">Learn about and customize the color systems that support the entire toolkit.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../components/">
<strong class="d-block h5 mb-0">Components</strong>
<span class="text-secondary">Learn how we build nearly all our components responsively and with base and modifier classes.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../css-variables/">
<strong class="d-block h5 mb-0">CSS variables</strong>
<span class="text-secondary">Use Bootstrap&#39;s CSS custom properties for fast and forward-looking design and development.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../optimize/">
<strong class="d-block h5 mb-0">Optimize</strong>
<span class="text-secondary">Keep your projects lean, responsive, and maintainable so you can deliver the best experience.</span>
</a>
</div>
</div>
<h2 id="overview">Overview</h2>
<p>There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you&rsquo;re using, browser support, and more.</p>
@@ -466,7 +466,7 @@
<li><a href="/docs/5.0/components/carousel/#with-controls">Carousel controls</a></li>
<li><a href="/docs/5.0/components/navbar/#responsive-behaviors">Navbar toggle buttons</a></li>
</ul>
<p>Based on <a href="https://github.com/twbs/bootstrap/issues/25394">community conversation</a>, some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on a best path forward, if necessary.</p>
<p>Based on <a href="https://github.com/twbs/bootstrap/issues/25394">community conversation</a>, some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.</p>
</div>
</main>
@@ -484,7 +484,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.0/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.0.1.</li>
<li class="mb-2">Currently v5.0.2.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -531,7 +531,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -539,7 +539,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>

64
docs/5.0/customize/sass/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.83.1">
<meta name="generator" content="Hugo 0.84.0">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.0">
@@ -17,7 +17,7 @@
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
@@ -137,7 +137,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -393,7 +393,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -425,10 +425,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p>
<h2 id="file-structure">File structure</h2>
@@ -482,7 +482,7 @@
<h2 id="variable-defaults">Variable defaults</h2>
<p>Every Sass variable in Bootstrap includes the <code>!default</code> flag allowing you to override the variable&rsquo;s default value in your own Sass without modifying Bootstrap&rsquo;s source code. Copy and paste variables as needed, modify their values, and remove the <code>!default</code> flag. If a variable has already been assigned, then it won&rsquo;t be re-assigned by the default values in Bootstrap.</p>
<p>You will find the complete list of Bootstrap&rsquo;s variables in <code>scss/_variables.scss</code>. Some variables are set to <code>null</code>, these variables don&rsquo;t output the property unless they are overridden in your configuration.</p>
<p>Variable overrides must come after our functions, variables, and mixins are imported, but before the rest of the imports.</p>
<p>Variable overrides must come after our functions are imported, but before the rest of the imports.</p>
<p>Here&rsquo;s an example that changes the <code>background-color</code> and <code>color</code> for the <code>&lt;body&gt;</code> when importing and compiling Bootstrap via npm:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Required
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/functions&#34;</span><span class="p">;</span>
@@ -495,8 +495,6 @@
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/variables&#34;</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/mixins&#34;</span><span class="p">;</span>
<span class="c1">// Bootstrap and its default variables
</span><span class="c1"></span>
<span class="c1">// Optional Bootstrap components here
</span><span class="c1"></span><span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/root&#34;</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">&#34;../node_modules/bootstrap/scss/reboot&#34;</span><span class="p">;</span>
@@ -514,7 +512,7 @@
<p>All variables in the <code>$theme-colors</code> map are defined as standalone variables. To modify an existing color in our <code>$theme-colors</code> map, add the following to your custom Sass file:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$primary</span><span class="o">:</span> <span class="mh">#0074d9</span><span class="p">;</span>
<span class="nv">$danger</span><span class="o">:</span> <span class="mh">#ff4136</span><span class="p">;</span>
</code></pre></div><p>Later on, theses variables are set in Bootstrap&rsquo;s <code>$theme-colors</code> map:</p>
</code></pre></div><p>Later on, these variables are set in Bootstrap&rsquo;s <code>$theme-colors</code> map:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span>
<span class="s2">&#34;primary&#34;</span><span class="o">:</span> <span class="nv">$primary</span><span class="o">,</span>
<span class="s2">&#34;danger&#34;</span><span class="o">:</span> <span class="nv">$danger</span>
@@ -549,49 +547,49 @@
<h3 id="colors">Colors</h3>
<p>Next to the <a href="/docs/5.0/customize/color/#color-sass-maps">Sass maps</a> we have, theme colors can also be used as standalone variables, like <code>$primary</code>.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">gray-100</span><span class="p">;</span>
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">dark</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="nv">$gray-100</span><span class="p">;</span>
<span class="na">background-color</span><span class="o">:</span> <span class="nv">$dark</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div><p>You can lighten or darken colors with Bootstrap&rsquo;s <code>tint-color()</code> and <code>shade-color()</code> functions. These functions will mix colors with black or white, unlike Sass' native <code>lighten()</code> and <code>darken()</code> functions which will change the lightness by a fixed amount, which often doesn&rsquo;t lead to the desired effect.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Tint a color: mix a color with white
</span><span class="c1"></span><span class="k">@function</span> <span class="nt">tint-color</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">weight</span><span class="o">)</span> <span class="p">{</span>
<span class="k">@return</span> <span class="nt">mix</span><span class="o">(</span><span class="nt">white</span><span class="o">,</span> <span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">weight</span><span class="o">)</span><span class="p">;</span>
</span><span class="c1"></span><span class="k">@function</span><span class="nf"> tint-color</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$weight</span><span class="p">)</span> <span class="p">{</span>
<span class="k">@return</span> <span class="nf">mix</span><span class="p">(</span><span class="ni">white</span><span class="o">,</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$weight</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// Shade a color: mix a color with black
</span><span class="c1"></span><span class="k">@function</span> <span class="nt">shade-color</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">weight</span><span class="o">)</span> <span class="p">{</span>
<span class="k">@return</span> <span class="nt">mix</span><span class="o">(</span><span class="nt">black</span><span class="o">,</span> <span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">weight</span><span class="o">)</span><span class="p">;</span>
</span><span class="c1"></span><span class="k">@function</span><span class="nf"> shade-color</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$weight</span><span class="p">)</span> <span class="p">{</span>
<span class="k">@return</span> <span class="nf">mix</span><span class="p">(</span><span class="no">black</span><span class="o">,</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$weight</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// Shade the color if the weight is positive, else tint it
</span><span class="c1"></span><span class="k">@function</span> <span class="nt">shift-color</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">weight</span><span class="o">)</span> <span class="p">{</span>
<span class="k">@return</span> <span class="nt">if</span><span class="o">(</span><span class="err">$</span><span class="nt">weight</span> <span class="o">&gt;</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">shade-color</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">weight</span><span class="o">),</span> <span class="nt">tint-color</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="nt">-</span><span class="err">$</span><span class="nt">weight</span><span class="o">))</span><span class="p">;</span>
</span><span class="c1"></span><span class="k">@function</span><span class="nf"> shift-color</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$weight</span><span class="p">)</span> <span class="p">{</span>
<span class="k">@return</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$weight</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="o">,</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="nv">$weight</span><span class="p">)</span><span class="o">,</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="o">-</span><span class="nv">$weight</span><span class="p">));</span>
<span class="p">}</span>
</code></pre></div>
<p>In practice, you&rsquo;d call the function and pass in the color and weight parameters.</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="nt">tint-color</span><span class="o">(</span><span class="err">$</span><span class="nt">primary</span><span class="o">,</span> <span class="nt">10</span><span class="err">%</span><span class="o">)</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$primary</span><span class="o">,</span> <span class="mi">10</span><span class="kt">%</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.custom-element-2</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="nt">shade-color</span><span class="o">(</span><span class="err">$</span><span class="nt">danger</span><span class="o">,</span> <span class="nt">30</span><span class="err">%</span><span class="o">)</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="nf">shade-color</span><span class="p">(</span><span class="nv">$danger</span><span class="o">,</span> <span class="mi">30</span><span class="kt">%</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div><h3 id="color-contrast">Color contrast</h3>
<p>In order to meet <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">WCAG 2.0 accessibility standards for color contrast</a>, authors <strong>must</strong> provide <a href="https://www.w3.org/WAI/WCAG20/quickref/20160105/Overview.php#visual-audio-contrast-contrast">a contrast ratio of at least 4.5:1</a>, with very few exceptions.</p>
<p>An additional function we include in Bootstrap is the color contrast function, <code>color-contrast</code>. It utilizes the <a href="https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests">WCAG 2.0 algorithm</a> for calculating contrast thresholds based on <a href="https://www.w3.org/WAI/GL/wiki/Relative_luminance">relative luminance</a> in a <code>sRGB</code> colorspace to automatically return a light (<code>#fff</code>), dark (<code>#212529</code>) or black (<code>#000</code>) contrast color based on the specified base color. This function is especially useful for mixins or loops where you&rsquo;re generating multiple classes.</p>
<p>For example, to generate color swatches from our <code>$theme-colors</code> map:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="err">$</span><span class="nt">value</span> <span class="nt">in</span> <span class="err">$</span><span class="nt">theme-colors</span> <span class="p">{</span>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="ow">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
<span class="nc">.swatch-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="nt">color-contrast</span><span class="o">(</span><span class="err">$</span><span class="nt">value</span><span class="o">)</span><span class="p">;</span>
<span class="na">color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$value</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div><p>It can also be used for one-off contrast needs:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="nt">color-contrast</span><span class="o">(</span><span class="nn">#000</span><span class="o">)</span><span class="p">;</span> <span class="c1">// returns `color: #fff`
<span class="na">color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="mh">#000</span><span class="p">);</span> <span class="c1">// returns `color: #fff`
</span><span class="c1"></span><span class="p">}</span>
</code></pre></div><p>You can also specify a base color with our color map functions:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
<span class="nt">color</span><span class="nd">:</span> <span class="nt">color-contrast</span><span class="o">(</span><span class="err">$</span><span class="nt">dark</span><span class="o">)</span><span class="p">;</span> <span class="c1">// returns `color: #fff`
<span class="na">color</span><span class="o">:</span> <span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$dark</span><span class="p">);</span> <span class="c1">// returns `color: #fff`
</span><span class="c1"></span><span class="p">}</span>
</code></pre></div><h3 id="escape-svg">Escape SVG</h3>
<p>We use the <code>escape-svg</code> function to escape the <code>&lt;</code>, <code>&gt;</code> and <code>#</code> characters for SVG background images. When using the <code>escape-svg</code> function, data URIs must be quoted.</p>
@@ -603,12 +601,12 @@
<span class="nc">.element</span> <span class="p">{</span>
<span class="c1">// Output calc(.25rem - 1px) is valid
</span><span class="c1"></span> <span class="nt">border-radius</span><span class="nd">:</span> <span class="nt">calc</span><span class="o">(</span><span class="err">$</span><span class="nt">border-radius</span> <span class="nt">-</span> <span class="err">$</span><span class="nt">border-width</span><span class="o">)</span><span class="p">;</span>
</span><span class="c1"></span> <span class="na">border-radius</span><span class="o">:</span> <span class="nf">calc</span><span class="p">(</span><span class="nv">$border-radius</span> <span class="o">-</span> <span class="nv">$border-width</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.element</span> <span class="p">{</span>
<span class="c1">// Output the same calc(.25rem - 1px) as above
</span><span class="c1"></span> <span class="nt">border-radius</span><span class="nd">:</span> <span class="nt">subtract</span><span class="o">(</span><span class="err">$</span><span class="nt">border-radius</span><span class="o">,</span> <span class="err">$</span><span class="nt">border-width</span><span class="o">)</span><span class="p">;</span>
</span><span class="c1"></span> <span class="na">border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$border-radius</span><span class="o">,</span> <span class="nv">$border-width</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div><p>Example where the calc is invalid:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$border-radius</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
@@ -616,12 +614,12 @@
<span class="nc">.element</span> <span class="p">{</span>
<span class="c1">// Output calc(.25rem - 0) is invalid
</span><span class="c1"></span> <span class="nt">border-radius</span><span class="nd">:</span> <span class="nt">calc</span><span class="o">(</span><span class="err">$</span><span class="nt">border-radius</span> <span class="nt">-</span> <span class="err">$</span><span class="nt">border-width</span><span class="o">)</span><span class="p">;</span>
</span><span class="c1"></span> <span class="na">border-radius</span><span class="o">:</span> <span class="nf">calc</span><span class="p">(</span><span class="nv">$border-radius</span> <span class="o">-</span> <span class="nv">$border-width</span><span class="p">);</span>
<span class="p">}</span>
<span class="nc">.element</span> <span class="p">{</span>
<span class="c1">// Output .25rem
</span><span class="c1"></span> <span class="nt">border-radius</span><span class="nd">:</span> <span class="nt">subtract</span><span class="o">(</span><span class="err">$</span><span class="nt">border-radius</span><span class="o">,</span> <span class="err">$</span><span class="nt">border-width</span><span class="o">)</span><span class="p">;</span>
</span><span class="c1"></span> <span class="na">border-radius</span><span class="o">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$border-radius</span><span class="o">,</span> <span class="nv">$border-width</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div><h2 id="mixins">Mixins</h2>
<p>Our <code>scss/mixins/</code> directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.</p>
@@ -634,7 +632,7 @@
<span class="p">}</span>
</code></pre></div>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> color-scheme</span><span class="p">(</span><span class="n">dark</span><span class="p">)</span> <span class="p">{</span>
<span class="k">@include</span><span class="nd"> color-scheme</span><span class="p">(</span><span class="ni">dark</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Insert dark mode styles here
</span><span class="c1"></span> <span class="p">}</span>
@@ -659,7 +657,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.0/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.0.1.</li>
<li class="mb-2">Currently v5.0.2.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -706,7 +704,7 @@
</div>
</footer>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
@@ -714,7 +712,7 @@
<script src="/docs/5.0/assets/js/docs.min.js"></script>
</body>
</html>