mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-17 19:21:23 +03:00
Add v5.0.0-beta3 docs (#33440)
This commit is contained in:
XhmikosR
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="The utility API is a Sass-based tool to generate utility classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -746,11 +748,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Convey meaning through background-color and add decoration with gradients.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -591,11 +593,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -409,6 +411,13 @@
|
||||
<li><a href="#sizes">Sizes</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#mixins">Mixins</a></li>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -516,6 +525,170 @@
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded-1"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded-2"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded-3"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$border-width</span><span class="o">:</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
|
||||
<span class="nv">$border-widths</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="mi">1</span><span class="o">:</span> <span class="mi">1</span><span class="kt">px</span><span class="o">,</span>
|
||||
<span class="mi">2</span><span class="o">:</span> <span class="mi">2</span><span class="kt">px</span><span class="o">,</span>
|
||||
<span class="mi">3</span><span class="o">:</span> <span class="mi">3</span><span class="kt">px</span><span class="o">,</span>
|
||||
<span class="mi">4</span><span class="o">:</span> <span class="mi">4</span><span class="kt">px</span><span class="o">,</span>
|
||||
<span class="mi">5</span><span class="o">:</span> <span class="mi">5</span><span class="kt">px</span>
|
||||
<span class="p">);</span>
|
||||
|
||||
<span class="nv">$border-color</span><span class="o">:</span> <span class="nv">$gray-300</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<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>
|
||||
<span class="nv">$border-radius-sm</span><span class="o">:</span> <span class="mf">.2</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$border-radius-lg</span><span class="o">:</span> <span class="mf">.3</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$border-radius-pill</span><span class="o">:</span> <span class="mi">50</span><span class="kt">rem</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="mixins">Mixins</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> border-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="o">,</span> <span class="nv">$fallback-border-radius</span><span class="o">:</span> <span class="n">false</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-rounded</span> <span class="p">{</span>
|
||||
<span class="nt">border-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">@else</span> <span class="nt">if</span> <span class="err">$</span><span class="nt">fallback-border-radius</span> <span class="o">!=</span> <span class="nt">false</span> <span class="p">{</span>
|
||||
<span class="nt">border-radius</span><span class="nd">:</span> <span class="err">$</span><span class="nt">fallback-border-radius</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> border-top-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-rounded</span> <span class="p">{</span>
|
||||
<span class="nt">border-top-left-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="nt">border-top-right-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> border-end-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-rounded</span> <span class="p">{</span>
|
||||
<span class="nt">border-top-right-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="nt">border-bottom-right-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> border-bottom-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-rounded</span> <span class="p">{</span>
|
||||
<span class="nt">border-bottom-right-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="nt">border-bottom-left-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> border-start-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-rounded</span> <span class="p">{</span>
|
||||
<span class="nt">border-top-left-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="nt">border-bottom-left-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> border-top-start-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-rounded</span> <span class="p">{</span>
|
||||
<span class="nt">border-top-left-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> border-top-end-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-rounded</span> <span class="p">{</span>
|
||||
<span class="nt">border-top-right-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> border-bottom-end-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-rounded</span> <span class="p">{</span>
|
||||
<span class="nt">border-bottom-right-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> border-bottom-start-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">@if</span> <span class="nv">$enable-rounded</span> <span class="p">{</span>
|
||||
<span class="nt">border-bottom-left-radius</span><span class="nd">:</span> <span class="nt">valid-radius</span><span class="o">(</span><span class="err">$</span><span class="nt">radius</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
<p>Border utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.0/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"border"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">border</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">null</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-width</span> <span class="nt">solid</span> <span class="err">$</span><span class="nt">border-color</span><span class="o">,</span>
|
||||
<span class="nt">0</span><span class="nd">:</span> <span class="nt">0</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"border-top"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">border-top</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">null</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-width</span> <span class="nt">solid</span> <span class="err">$</span><span class="nt">border-color</span><span class="o">,</span>
|
||||
<span class="nt">0</span><span class="nd">:</span> <span class="nt">0</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"border-end"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">border-right</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">border-end</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">null</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-width</span> <span class="nt">solid</span> <span class="err">$</span><span class="nt">border-color</span><span class="o">,</span>
|
||||
<span class="nt">0</span><span class="nd">:</span> <span class="nt">0</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"border-bottom"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">border-bottom</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">null</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-width</span> <span class="nt">solid</span> <span class="err">$</span><span class="nt">border-color</span><span class="o">,</span>
|
||||
<span class="nt">0</span><span class="nd">:</span> <span class="nt">0</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"border-start"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">border-left</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">border-start</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">null</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-width</span> <span class="nt">solid</span> <span class="err">$</span><span class="nt">border-color</span><span class="o">,</span>
|
||||
<span class="nt">0</span><span class="nd">:</span> <span class="nt">0</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"border-color"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">border-color</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">border</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">theme-colors</span><span class="o">,</span> <span class="o">(</span><span class="s2">"white"</span><span class="nd">:</span> <span class="err">$</span><span class="nt">white</span><span class="o">))</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"border-width"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">border-width</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">border</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-widths</span>
|
||||
<span class="o">),</span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"rounded"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">border-radius</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">rounded</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">null</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-radius</span><span class="o">,</span>
|
||||
<span class="nt">0</span><span class="nd">:</span> <span class="nt">0</span><span class="o">,</span>
|
||||
<span class="nt">1</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-radius-sm</span><span class="o">,</span>
|
||||
<span class="nt">2</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-radius</span><span class="o">,</span>
|
||||
<span class="nt">3</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-radius-lg</span><span class="o">,</span>
|
||||
<span class="nt">circle</span><span class="nd">:</span> <span class="nt">50</span><span class="err">%</span><span class="o">,</span>
|
||||
<span class="nt">pill</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-radius-pill</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"rounded-top"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">border-top-left-radius</span> <span class="nt">border-top-right-radius</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">rounded-top</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">null</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-radius</span><span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"rounded-end"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">border-top-right-radius</span> <span class="nt">border-bottom-right-radius</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">rounded-end</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">null</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-radius</span><span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"rounded-bottom"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">border-bottom-right-radius</span> <span class="nt">border-bottom-left-radius</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">rounded-bottom</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">null</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-radius</span><span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"rounded-start"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">border-bottom-left-radius</span> <span class="nt">border-top-left-radius</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">rounded-start</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">null</span><span class="nd">:</span> <span class="err">$</span><span class="nt">border-radius</span><span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -531,11 +704,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -546,11 +548,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -572,11 +574,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -411,6 +413,12 @@
|
||||
<li><a href="#wrap">Wrap</a></li>
|
||||
<li><a href="#order">Order</a></li>
|
||||
<li><a href="#align-content">Align content</a></li>
|
||||
<li><a href="#media-object">Media object</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -540,7 +548,7 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-around bd-highlight">
|
||||
<div class="d-flex justify-content-around bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
@@ -1165,6 +1173,151 @@
|
||||
<li><code>.align-content-xxl-stretch</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="media-object">Media object</h2>
|
||||
<p>Looking to replicate the <a href="https://getbootstrap.com/docs/4.6/components/media-object/">media object component</a> from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.</p>
|
||||
<div class="bd-example">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="bd-placeholder-img" width="100" height="100" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#e5e5e5"/><text x="50%" y="50%" fill="#999" dy=".3em">Image</text></svg>
|
||||
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
This is some content from a media component. You can replace this with any content and adjust it as needed.
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"flex-shrink-0"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"flex-grow-1 ms-3"</span><span class="p">></span>
|
||||
This is some content from a media component. You can replace this with any content and adjust it as needed.
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<p>And say you want to vertically center the content next to the image:</p>
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="bd-placeholder-img" width="100" height="100" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#e5e5e5"/><text x="50%" y="50%" fill="#999" dy=".3em">Image</text></svg>
|
||||
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
This is some content from a media component. You can replace this with any content and adjust it as needed.
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-center"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"flex-shrink-0"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"flex-grow-1 ms-3"</span><span class="p">></span>
|
||||
This is some content from a media component. You can replace this with any content and adjust it as needed.
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
<p>Flexbox utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.0/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"flex"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">flex</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">fill</span><span class="nd">:</span> <span class="nt">1</span> <span class="nt">1</span> <span class="nt">auto</span><span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"flex-direction"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">flex-direction</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">flex</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">row</span> <span class="nt">column</span> <span class="nt">row-reverse</span> <span class="nt">column-reverse</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"flex-grow"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">flex-grow</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">flex</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">grow-0</span><span class="nd">:</span> <span class="nt">0</span><span class="o">,</span>
|
||||
<span class="nt">grow-1</span><span class="nd">:</span> <span class="nt">1</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"flex-shrink"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">flex-shrink</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">flex</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">shrink-0</span><span class="nd">:</span> <span class="nt">0</span><span class="o">,</span>
|
||||
<span class="nt">shrink-1</span><span class="nd">:</span> <span class="nt">1</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"flex-wrap"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">flex-wrap</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">flex</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">wrap</span> <span class="nt">nowrap</span> <span class="nt">wrap-reverse</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"gap"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">gap</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">gap</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"justify-content"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">justify-content</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">start</span><span class="nd">:</span> <span class="nt">flex-start</span><span class="o">,</span>
|
||||
<span class="nt">end</span><span class="nd">:</span> <span class="nt">flex-end</span><span class="o">,</span>
|
||||
<span class="nt">center</span><span class="nd">:</span> <span class="nt">center</span><span class="o">,</span>
|
||||
<span class="nt">between</span><span class="nd">:</span> <span class="nt">space-between</span><span class="o">,</span>
|
||||
<span class="nt">around</span><span class="nd">:</span> <span class="nt">space-around</span><span class="o">,</span>
|
||||
<span class="nt">evenly</span><span class="nd">:</span> <span class="nt">space-evenly</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"align-items"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">align-items</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">start</span><span class="nd">:</span> <span class="nt">flex-start</span><span class="o">,</span>
|
||||
<span class="nt">end</span><span class="nd">:</span> <span class="nt">flex-end</span><span class="o">,</span>
|
||||
<span class="nt">center</span><span class="nd">:</span> <span class="nt">center</span><span class="o">,</span>
|
||||
<span class="nt">baseline</span><span class="nd">:</span> <span class="nt">baseline</span><span class="o">,</span>
|
||||
<span class="nt">stretch</span><span class="nd">:</span> <span class="nt">stretch</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"align-content"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">align-content</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">start</span><span class="nd">:</span> <span class="nt">flex-start</span><span class="o">,</span>
|
||||
<span class="nt">end</span><span class="nd">:</span> <span class="nt">flex-end</span><span class="o">,</span>
|
||||
<span class="nt">center</span><span class="nd">:</span> <span class="nt">center</span><span class="o">,</span>
|
||||
<span class="nt">between</span><span class="nd">:</span> <span class="nt">space-between</span><span class="o">,</span>
|
||||
<span class="nt">around</span><span class="nd">:</span> <span class="nt">space-around</span><span class="o">,</span>
|
||||
<span class="nt">stretch</span><span class="nd">:</span> <span class="nt">stretch</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"align-self"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">align-self</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">,</span>
|
||||
<span class="nt">start</span><span class="nd">:</span> <span class="nt">flex-start</span><span class="o">,</span>
|
||||
<span class="nt">end</span><span class="nd">:</span> <span class="nt">flex-end</span><span class="o">,</span>
|
||||
<span class="nt">center</span><span class="nd">:</span> <span class="nt">center</span><span class="o">,</span>
|
||||
<span class="nt">baseline</span><span class="nd">:</span> <span class="nt">baseline</span><span class="o">,</span>
|
||||
<span class="nt">stretch</span><span class="nd">:</span> <span class="nt">stretch</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"order"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">order</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">first</span><span class="nd">:</span> <span class="nt">-1</span><span class="o">,</span>
|
||||
<span class="nt">0</span><span class="nd">:</span> <span class="nt">0</span><span class="o">,</span>
|
||||
<span class="nt">1</span><span class="nd">:</span> <span class="nt">1</span><span class="o">,</span>
|
||||
<span class="nt">2</span><span class="nd">:</span> <span class="nt">2</span><span class="o">,</span>
|
||||
<span class="nt">3</span><span class="nd">:</span> <span class="nt">3</span><span class="o">,</span>
|
||||
<span class="nt">4</span><span class="nd">:</span> <span class="nt">4</span><span class="o">,</span>
|
||||
<span class="nt">5</span><span class="nd">:</span> <span class="nt">5</span><span class="o">,</span>
|
||||
<span class="nt">last</span><span class="nd">:</span> <span class="nt">6</span><span class="o">,</span>
|
||||
<span class="o">),</span>
|
||||
<span class="o">),</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -1180,11 +1333,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Toggle floats on any element, across any breakpoint, using our responsive float utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -398,6 +400,11 @@
|
||||
<ul>
|
||||
<li><a href="#overview">Overview</a></li>
|
||||
<li><a href="#responsive">Responsive</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -448,6 +455,19 @@
|
||||
<li><code>.float-xxl-none</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
<p>Float utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.0/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"float"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">float</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">start</span><span class="nd">:</span> <span class="nt">left</span><span class="o">,</span>
|
||||
<span class="nt">end</span><span class="nd">:</span> <span class="nt">right</span><span class="o">,</span>
|
||||
<span class="nt">none</span><span class="nd">:</span> <span class="nt">none</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -463,11 +483,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Utility classes that change how users interact with contents of a website.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -418,6 +420,19 @@
|
||||
The <code>.pe-none</code> class (and the <code>pointer-events</code> CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with <code>.pe-none</code> are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as <code>tabindex="-1"</code> (to prevent them from receiving keyboard focus) and <code>aria-disabled="true"</code> (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable. For form controls, consider using the <code>disabled</code> HTML attribute instead.
|
||||
</div>
|
||||
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
<p>Interaction utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.0/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"user-select"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">user-select</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">all</span> <span class="nt">auto</span> <span class="nt">none</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"pointer-events"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">pointer-events</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">pe</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">none</span> <span class="nt">auto</span><span class="o">,</span>
|
||||
<span class="o">),</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -433,11 +448,11 @@ The <code>.pe-none</code> class (and the <code>pointer-events</code> CSS propert
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use these shorthand utilities for quickly configuring how content overflows an element.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -416,6 +418,14 @@
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"overflow-visible"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"overflow-scroll"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><p>Using Sass variables, you may customize the overflow utilities by changing the <code>$overflows</code> variable in <code>_variables.scss</code>.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
<p>Overflow utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.0/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"overflow"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">overflow</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">auto</span> <span class="nt">hidden</span> <span class="nt">visible</span> <span class="nt">scroll</span><span class="o">,</span>
|
||||
<span class="o">),</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -431,11 +441,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use these shorthand utilities for quickly configuring the position of an element.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -400,6 +402,12 @@
|
||||
<li><a href="#arrange-elements">Arrange elements</a></li>
|
||||
<li><a href="#center-elements">Center elements</a></li>
|
||||
<li><a href="#examples">Examples</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#maps">Maps</a></li>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -541,6 +549,49 @@
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 2rem; height:2rem;"</span><span class="p">></span>2<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 2rem; height:2rem;"</span><span class="p">></span>3<span class="p"></</span><span class="nt">button</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="maps">Maps</h3>
|
||||
<p>Default position utility values are declared in a Sass map, then used to generate our utilities.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$position-values</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="mi">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
|
||||
<span class="mi">50</span><span class="o">:</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span>
|
||||
<span class="mi">100</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
<p>Position utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.0/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"position"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">position</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">static</span> <span class="nt">relative</span> <span class="nt">absolute</span> <span class="nt">fixed</span> <span class="nt">sticky</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"top"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">top</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">position-values</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"bottom"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">bottom</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">position-values</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"start"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">left</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">start</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">position-values</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"end"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">right</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">end</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">position-values</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"translate-middle"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">transform</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">translate-middle</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">null</span><span class="nd">:</span> <span class="nt">translate</span><span class="o">(</span><span class="nt">-50</span><span class="err">%</span><span class="o">,</span> <span class="nt">-50</span><span class="err">%</span><span class="o">),</span>
|
||||
<span class="nt">x</span><span class="nd">:</span> <span class="nt">translateX</span><span class="o">(</span><span class="nt">-50</span><span class="err">%</span><span class="o">),</span>
|
||||
<span class="nt">y</span><span class="nd">:</span> <span class="nt">translateY</span><span class="o">(</span><span class="nt">-50</span><span class="err">%</span><span class="o">),</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -556,11 +607,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Add or remove shadows to elements with box-shadow utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -392,6 +394,21 @@
|
||||
</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">
|
||||
<ul>
|
||||
<li><a href="#examples">Examples</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
@@ -407,6 +424,26 @@
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"shadow-sm p-3 mb-5 bg-body rounded"</span><span class="p">></span>Small shadow<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"shadow p-3 mb-5 bg-body rounded"</span><span class="p">></span>Regular shadow<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"shadow-lg p-3 mb-5 bg-body rounded"</span><span class="p">></span>Larger shadow<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$box-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="mf">.5</span><span class="kt">rem</span> <span class="mi">1</span><span class="kt">rem</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.15</span><span class="p">);</span>
|
||||
<span class="nv">$box-shadow-sm</span><span class="o">:</span> <span class="mi">0</span> <span class="mf">.125</span><span class="kt">rem</span> <span class="mf">.25</span><span class="kt">rem</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.075</span><span class="p">);</span>
|
||||
<span class="nv">$box-shadow-lg</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">1</span><span class="kt">rem</span> <span class="mi">3</span><span class="kt">rem</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.175</span><span class="p">);</span>
|
||||
<span class="nv">$box-shadow-inset</span><span class="o">:</span> <span class="no">inset</span> <span class="mi">0</span> <span class="mi">1</span><span class="kt">px</span> <span class="mi">2</span><span class="kt">px</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.075</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
<p>Shadow utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.0/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"shadow"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">box-shadow</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">shadow</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">null</span><span class="nd">:</span> <span class="err">$</span><span class="nt">box-shadow</span><span class="o">,</span>
|
||||
<span class="nt">sm</span><span class="nd">:</span> <span class="err">$</span><span class="nt">box-shadow-sm</span><span class="o">,</span>
|
||||
<span class="nt">lg</span><span class="nd">:</span> <span class="err">$</span><span class="nt">box-shadow-lg</span><span class="o">,</span>
|
||||
<span class="nt">none</span><span class="nd">:</span> <span class="nt">none</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -422,11 +459,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Easily make an element as wide or as tall with our width and height utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -398,6 +400,11 @@
|
||||
<ul>
|
||||
<li><a href="#relative-to-the-parent">Relative to the parent</a></li>
|
||||
<li><a href="#relative-to-the-viewport">Relative to the viewport</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -452,7 +459,63 @@
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"min-vh-100"</span><span class="p">></span>Min-height 100vh<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"vw-100"</span><span class="p">></span>Width 100vw<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"vh-100"</span><span class="p">></span>Height 100vh<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div>
|
||||
</code></pre></div><h2 id="sass">Sass</h2>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
<p>Sizing utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.0/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"width"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">width</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">w</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">25</span><span class="nd">:</span> <span class="nt">25</span><span class="err">%</span><span class="o">,</span>
|
||||
<span class="nt">50</span><span class="nd">:</span> <span class="nt">50</span><span class="err">%</span><span class="o">,</span>
|
||||
<span class="nt">75</span><span class="nd">:</span> <span class="nt">75</span><span class="err">%</span><span class="o">,</span>
|
||||
<span class="nt">100</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="o">,</span>
|
||||
<span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"max-width"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">max-width</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">mw</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">100</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"viewport-width"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">width</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">vw</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">100</span><span class="nd">:</span> <span class="nt">100vw</span><span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"min-viewport-width"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">min-width</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">min-vw</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">100</span><span class="nd">:</span> <span class="nt">100vw</span><span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"height"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">height</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">h</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">25</span><span class="nd">:</span> <span class="nt">25</span><span class="err">%</span><span class="o">,</span>
|
||||
<span class="nt">50</span><span class="nd">:</span> <span class="nt">50</span><span class="err">%</span><span class="o">,</span>
|
||||
<span class="nt">75</span><span class="nd">:</span> <span class="nt">75</span><span class="err">%</span><span class="o">,</span>
|
||||
<span class="nt">100</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="o">,</span>
|
||||
<span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"max-height"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">max-height</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">mh</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">100</span><span class="nd">:</span> <span class="nt">100</span><span class="err">%</span><span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"viewport-height"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">height</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">vh</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">100</span><span class="nd">:</span> <span class="nt">100vh</span><span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"min-viewport-height"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">min-height</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">min-vh</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">100</span><span class="nd">:</span> <span class="nt">100vh</span><span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@@ -467,11 +530,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -405,6 +407,12 @@
|
||||
</li>
|
||||
<li><a href="#negative-margin">Negative margin</a></li>
|
||||
<li><a href="#gap">Gap</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#maps">Maps</a></li>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -493,6 +501,152 @@
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bg-light border"</span><span class="p">></span>Grid item 3<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<p>Support includes responsive options for all of Bootstrap’s grid breakpoints, as well as six sizes from the <code>$spacers</code> map (<code>0</code>–<code>5</code>). There is no <code>.gap-auto</code> utility class as it’s effectively the same as <code>.gap-0</code>.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="maps">Maps</h3>
|
||||
<p>Spacing utilities are declared via Sass map and then generated with our utilities API.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$spacer</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$spacers</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="mi">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
|
||||
<span class="mi">1</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">4</span><span class="o">,</span>
|
||||
<span class="mi">2</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">/</span> <span class="mi">2</span><span class="o">,</span>
|
||||
<span class="mi">3</span><span class="o">:</span> <span class="nv">$spacer</span><span class="o">,</span>
|
||||
<span class="mi">4</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mi">1</span><span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="mi">5</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mi">3</span><span class="o">,</span>
|
||||
<span class="p">);</span>
|
||||
|
||||
<span class="nv">$negative-spacers</span><span class="o">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$enable-negative-margins</span><span class="o">,</span> <span class="nf">negativify-map</span><span class="p">(</span><span class="nv">$spacers</span><span class="p">)</span><span class="o">,</span> <span class="n">null</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
<p>Spacing utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.0/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"margin"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">m</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"margin-x"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-right</span> <span class="nt">margin-left</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">mx</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"margin-y"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-top</span> <span class="nt">margin-bottom</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">my</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"margin-top"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-top</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">mt</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"margin-end"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-right</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">me</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"margin-bottom"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-bottom</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">mb</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"margin-start"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-left</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">ms</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">map-merge</span><span class="o">(</span><span class="err">$</span><span class="nt">spacers</span><span class="o">,</span> <span class="o">(</span><span class="nt">auto</span><span class="nd">:</span> <span class="nt">auto</span><span class="o">))</span>
|
||||
<span class="o">),</span>
|
||||
<span class="o">//</span> <span class="nt">Negative</span> <span class="nt">margin</span> <span class="nt">utilities</span>
|
||||
<span class="s2">"negative-margin"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">m</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"negative-margin-x"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-right</span> <span class="nt">margin-left</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">mx</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"negative-margin-y"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-top</span> <span class="nt">margin-bottom</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">my</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"negative-margin-top"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-top</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">mt</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"negative-margin-end"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-right</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">me</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"negative-margin-bottom"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-bottom</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">mb</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"negative-margin-start"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">margin-left</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">ms</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">negative-spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="o">//</span> <span class="nt">Padding</span> <span class="nt">utilities</span>
|
||||
<span class="s2">"padding"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">padding</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">p</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"padding-x"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">padding-right</span> <span class="nt">padding-left</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">px</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"padding-y"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">padding-top</span> <span class="nt">padding-bottom</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">py</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"padding-top"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">padding-top</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">pt</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"padding-end"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">padding-right</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">pe</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"padding-bottom"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">padding-bottom</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">pb</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"padding-start"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">padding-left</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">ps</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacers</span>
|
||||
<span class="o">),</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -508,11 +662,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -406,6 +408,13 @@
|
||||
<li><a href="#monospace">Monospace</a></li>
|
||||
<li><a href="#reset-color">Reset color</a></li>
|
||||
<li><a href="#text-decoration">Text decoration</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#maps">Maps</a></li>
|
||||
<li><a href="#utilities-api">Utilities API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -489,15 +498,6 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"fs-5"</span><span class="p">></span>.fs-5 text<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"fs-6"</span><span class="p">></span>.fs-6 text<span class="p"></</span><span class="nt">p</span><span class="p">></span></code></pre></div>
|
||||
<p>Customize your available <code>font-size</code>s by modifying the <code>$font-sizes</code> Sass map.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$font-sizes</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="mi">1</span><span class="o">:</span> <span class="nv">$h1-font-size</span><span class="o">,</span>
|
||||
<span class="mi">2</span><span class="o">:</span> <span class="nv">$h2-font-size</span><span class="o">,</span>
|
||||
<span class="mi">3</span><span class="o">:</span> <span class="nv">$h3-font-size</span><span class="o">,</span>
|
||||
<span class="mi">4</span><span class="o">:</span> <span class="nv">$h4-font-size</span><span class="o">,</span>
|
||||
<span class="mi">5</span><span class="o">:</span> <span class="nv">$h5-font-size</span><span class="o">,</span>
|
||||
<span class="mi">6</span><span class="o">:</span> <span class="nv">$h6-font-size</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h2 id="font-weight-and-italics">Font weight and italics</h2>
|
||||
<p>Quickly change the <code>font-weight</code> or <code>font-style</code> of text with these utilities. <code>font-style</code> utilities are abbreviated as <code>.fst-*</code> and <code>font-weight</code> utilities are abbreviated as <code>.fw-*</code>.</p>
|
||||
<div class="bd-example">
|
||||
@@ -549,6 +549,125 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-decoration-underline"</span><span class="p">></span>This text has a line underneath it.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-decoration-line-through"</span><span class="p">></span>This text has a line going through it.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-decoration-none"</span><span class="p">></span>This link has its text decoration removed<span class="p"></</span><span class="nt">a</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// stylelint-disable value-keyword-case
|
||||
</span><span class="c1"></span><span class="nv">$font-family-sans-serif</span><span class="o">:</span> <span class="n">system-ui</span><span class="o">,</span> <span class="o">-</span><span class="n">apple-system</span><span class="o">,</span> <span class="s2">"Segoe UI"</span><span class="o">,</span> <span class="n">Roboto</span><span class="o">,</span> <span class="s2">"Helvetica Neue"</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span> <span class="s2">"Noto Sans"</span><span class="o">,</span> <span class="s2">"Liberation Sans"</span><span class="o">,</span> <span class="no">sans-serif</span><span class="o">,</span> <span class="s2">"Apple Color Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Symbol"</span><span class="o">,</span> <span class="s2">"Noto Color Emoji"</span><span class="p">;</span>
|
||||
<span class="nv">$font-family-monospace</span><span class="o">:</span> <span class="n">SFMono-Regular</span><span class="o">,</span> <span class="n">Menlo</span><span class="o">,</span> <span class="n">Monaco</span><span class="o">,</span> <span class="n">Consolas</span><span class="o">,</span> <span class="s2">"Liberation Mono"</span><span class="o">,</span> <span class="s2">"Courier New"</span><span class="o">,</span> <span class="no">monospace</span><span class="p">;</span>
|
||||
<span class="c1">// stylelint-enable value-keyword-case
|
||||
</span><span class="c1"></span><span class="nv">$font-family-base</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$variable-prefix</span><span class="si">}</span><span class="no">font</span><span class="o">-</span><span class="no">sans-serif</span><span class="p">);</span>
|
||||
<span class="nv">$font-family-code</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$variable-prefix</span><span class="si">}</span><span class="no">font</span><span class="o">-</span><span class="no">monospace</span><span class="p">);</span>
|
||||
|
||||
<span class="c1">// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
|
||||
</span><span class="c1">// $font-size-base effects the font size of the body text
|
||||
</span><span class="c1"></span><span class="nv">$font-size-root</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$font-size-base</span><span class="o">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span> <span class="c1">// Assumes the browser default, typically `16px`
|
||||
</span><span class="c1"></span><span class="nv">$font-size-sm</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="mf">.875</span><span class="p">;</span>
|
||||
<span class="nv">$font-size-lg</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="mi">1</span><span class="mf">.25</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$font-weight-lighter</span><span class="o">:</span> <span class="no">lighter</span><span class="p">;</span>
|
||||
<span class="nv">$font-weight-light</span><span class="o">:</span> <span class="mi">300</span><span class="p">;</span>
|
||||
<span class="nv">$font-weight-normal</span><span class="o">:</span> <span class="mi">400</span><span class="p">;</span>
|
||||
<span class="nv">$font-weight-bold</span><span class="o">:</span> <span class="mi">700</span><span class="p">;</span>
|
||||
<span class="nv">$font-weight-bolder</span><span class="o">:</span> <span class="no">bolder</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$font-weight-base</span><span class="o">:</span> <span class="nv">$font-weight-normal</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$line-height-base</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.5</span><span class="p">;</span>
|
||||
<span class="nv">$line-height-sm</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.25</span><span class="p">;</span>
|
||||
<span class="nv">$line-height-lg</span><span class="o">:</span> <span class="mi">2</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$h1-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="mi">2</span><span class="mf">.5</span><span class="p">;</span>
|
||||
<span class="nv">$h2-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="nv">$h3-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="mi">1</span><span class="mf">.75</span><span class="p">;</span>
|
||||
<span class="nv">$h4-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="mi">1</span><span class="mf">.5</span><span class="p">;</span>
|
||||
<span class="nv">$h5-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="mi">1</span><span class="mf">.25</span><span class="p">;</span>
|
||||
<span class="nv">$h6-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="maps">Maps</h3>
|
||||
<p>Font-size utilities are generated from this map, in combination with our utilities API.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$font-sizes</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="mi">1</span><span class="o">:</span> <span class="nv">$h1-font-size</span><span class="o">,</span>
|
||||
<span class="mi">2</span><span class="o">:</span> <span class="nv">$h2-font-size</span><span class="o">,</span>
|
||||
<span class="mi">3</span><span class="o">:</span> <span class="nv">$h3-font-size</span><span class="o">,</span>
|
||||
<span class="mi">4</span><span class="o">:</span> <span class="nv">$h4-font-size</span><span class="o">,</span>
|
||||
<span class="mi">5</span><span class="o">:</span> <span class="nv">$h5-font-size</span><span class="o">,</span>
|
||||
<span class="mi">6</span><span class="o">:</span> <span class="nv">$h6-font-size</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
<p>Font and text utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.0/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"font-family"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">font-family</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">font</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">monospace</span><span class="nd">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">variable-prefix</span><span class="p">}</span><span class="nt">font-monospace</span><span class="o">))</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"font-size"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">rfs</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">font-size</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">fs</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="err">$</span><span class="nt">font-sizes</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"font-style"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">font-style</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">fst</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">italic</span> <span class="nt">normal</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"font-weight"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">font-weight</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">fw</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">light</span><span class="nd">:</span> <span class="err">$</span><span class="nt">font-weight-light</span><span class="o">,</span>
|
||||
<span class="nt">lighter</span><span class="nd">:</span> <span class="err">$</span><span class="nt">font-weight-lighter</span><span class="o">,</span>
|
||||
<span class="nt">normal</span><span class="nd">:</span> <span class="err">$</span><span class="nt">font-weight-normal</span><span class="o">,</span>
|
||||
<span class="nt">bold</span><span class="nd">:</span> <span class="err">$</span><span class="nt">font-weight-bold</span><span class="o">,</span>
|
||||
<span class="nt">bolder</span><span class="nd">:</span> <span class="err">$</span><span class="nt">font-weight-bolder</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"line-height"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">line-height</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">lh</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">1</span><span class="nd">:</span> <span class="nt">1</span><span class="o">,</span>
|
||||
<span class="nt">sm</span><span class="nd">:</span> <span class="err">$</span><span class="nt">line-height-sm</span><span class="o">,</span>
|
||||
<span class="nt">base</span><span class="nd">:</span> <span class="err">$</span><span class="nt">line-height-base</span><span class="o">,</span>
|
||||
<span class="nt">lg</span><span class="nd">:</span> <span class="err">$</span><span class="nt">line-height-lg</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"text-align"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">responsive</span><span class="nd">:</span> <span class="nt">true</span><span class="o">,</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">text-align</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">text</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">start</span><span class="nd">:</span> <span class="nt">left</span><span class="o">,</span>
|
||||
<span class="nt">end</span><span class="nd">:</span> <span class="nt">right</span><span class="o">,</span>
|
||||
<span class="nt">center</span><span class="nd">:</span> <span class="nt">center</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"text-decoration"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">text-decoration</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">none</span> <span class="nt">underline</span> <span class="nt">line-through</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"text-transform"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">text-transform</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">text</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">lowercase</span> <span class="nt">uppercase</span> <span class="nt">capitalize</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"white-space"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">white-space</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">text</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">wrap</span><span class="nd">:</span> <span class="nt">normal</span><span class="o">,</span>
|
||||
<span class="nt">nowrap</span><span class="nd">:</span> <span class="nt">nowrap</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">),</span>
|
||||
<span class="s2">"word-wrap"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">word-wrap</span> <span class="nt">word-break</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">text</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span><span class="nt">break</span><span class="nd">:</span> <span class="nt">break-word</span><span class="o">),</span>
|
||||
<span class="nt">rtl</span><span class="nd">:</span> <span class="nt">false</span>
|
||||
<span class="o">),</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -564,11 +683,11 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -439,6 +441,15 @@
|
||||
<span class="p"></</span><span class="nt">tr</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">tbody</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
<p>Vertical align utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.0/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"align"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">vertical-align</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">align</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="nt">baseline</span> <span class="nt">top</span> <span class="nt">middle</span> <span class="nt">bottom</span> <span class="nt">text-bottom</span> <span class="nt">text-top</span>
|
||||
<span class="o">),</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -454,11 +465,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Control the visibility of elements, without modifying their display, with visibility utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -411,7 +413,19 @@ Elements with the <code>.invisible</code> class will be hidden <em>both</em> vis
|
||||
<span class="nc">.invisible</span> <span class="p">{</span>
|
||||
<span class="nt">visibility</span><span class="nd">:</span> <span class="nt">hidden</span> <span class="o">!</span><span class="nt">important</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
</code></pre></div><h2 id="sass">Sass</h2>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
<p>Visibility utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="/docs/5.0/utilities/api/#using-the-api">Learn how to use the utilities API.</a></p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"> <span class="s2">"visibility"</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">property</span><span class="nd">:</span> <span class="nt">visibility</span><span class="o">,</span>
|
||||
<span class="nt">class</span><span class="nd">:</span> <span class="nt">null</span><span class="o">,</span>
|
||||
<span class="nt">values</span><span class="nd">:</span> <span class="o">(</span>
|
||||
<span class="nt">visible</span><span class="nd">:</span> <span class="nt">visible</span><span class="o">,</span>
|
||||
<span class="nt">invisible</span><span class="nd">:</span> <span class="nt">hidden</span><span class="o">,</span>
|
||||
<span class="o">)</span>
|
||||
<span class="o">)</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@@ -426,11 +440,11 @@ Elements with the <code>.invisible</code> class will be hidden <em>both</em> vis
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. 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>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. 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>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user