mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-14 18:42:30 +03:00
Add v5.0.2 docs
This commit is contained in:
XhmikosR
+156
-110
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -407,11 +407,13 @@
|
||||
<li><a href="#print-utilities">Print utilities</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#importance">Importance</a></li>
|
||||
<li><a href="#using-the-api">Using the API</a>
|
||||
<ul>
|
||||
<li><a href="#add-utilities">Add utilities</a></li>
|
||||
<li><a href="#modify-utilities">Modify utilities</a>
|
||||
<ul>
|
||||
<li><a href="#enable-responsive">Enable responsive</a></li>
|
||||
<li><a href="#rename-utilities">Rename utilities</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -425,10 +427,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you’re unfamiliar with Sass maps, read up on the <a href="https://sass-lang.com/documentation/values/maps">official Sass docs</a> to get started.</p>
|
||||
<p>The <code>$utilities</code> map contains all our utilities and is later merged with your custom <code>$utilities</code> map, if present. The utility map contains a keyed list of utility groups which accept the following options:</p>
|
||||
@@ -488,13 +490,13 @@
|
||||
<p>All utility variables are added to the <code>$utilities</code> variable within our <code>_utilities.scss</code> stylesheet. Each group of utilities looks something like this:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="n">property</span><span class="o">:</span> <span class="no">opacity</span><span class="o">,</span>
|
||||
<span class="n">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">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span>
|
||||
<span class="mi">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="mi">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span>
|
||||
<span class="mi">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span>
|
||||
<span class="na">property</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span>
|
||||
<span class="na">values</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
|
||||
<span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span>
|
||||
<span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span>
|
||||
<span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
@@ -508,14 +510,14 @@
|
||||
<p>Use the <code>class</code> option to change the class prefix used in the compiled CSS:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="n">property</span><span class="o">:</span> <span class="no">opacity</span><span class="o">,</span>
|
||||
<span class="n">class</span><span class="o">:</span> <span class="n">o</span><span class="o">,</span>
|
||||
<span class="n">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">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span>
|
||||
<span class="mi">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="mi">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span>
|
||||
<span class="mi">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span>
|
||||
<span class="na">property</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span>
|
||||
<span class="na">class</span><span class="o">:</span> <span class="n">o</span><span class="o">,</span>
|
||||
<span class="na">values</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
|
||||
<span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span>
|
||||
<span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span>
|
||||
<span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
@@ -530,124 +532,126 @@
|
||||
<p>Need multiple pseudo-classes? Use a space-separated list of states: <code>state: hover focus</code>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="n">property</span><span class="o">:</span> <span class="no">opacity</span><span class="o">,</span>
|
||||
<span class="n">class</span><span class="o">:</span> <span class="no">opacity</span><span class="o">,</span>
|
||||
<span class="n">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span>
|
||||
<span class="n">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">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span>
|
||||
<span class="mi">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="mi">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span>
|
||||
<span class="mi">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span>
|
||||
<span class="na">property</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span>
|
||||
<span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span>
|
||||
<span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span>
|
||||
<span class="na">values</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
|
||||
<span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span>
|
||||
<span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span>
|
||||
<span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div><p>Output:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">opacity-0-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-25-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-50-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-75-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-100-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">opacity-0-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-25-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-50-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-75-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-100-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
</code></pre></div><h3 id="responsive-utilities">Responsive utilities</h3>
|
||||
<p>Add the <code>responsive</code> boolean to generate responsive utilities (e.g., <code>.opacity-md-25</code>) across <a href="/docs/5.0/layout/breakpoints/">all breakpoints</a>.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="n">property</span><span class="o">:</span> <span class="no">opacity</span><span class="o">,</span>
|
||||
<span class="n">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span>
|
||||
<span class="n">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">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span>
|
||||
<span class="mi">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="mi">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span>
|
||||
<span class="mi">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span>
|
||||
<span class="na">property</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span>
|
||||
<span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span>
|
||||
<span class="na">values</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
|
||||
<span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span>
|
||||
<span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span>
|
||||
<span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div><p>Output:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">opacity-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">opacity-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
|
||||
<span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">576px</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="p">.</span><span class="nc">opacity-sm-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-sm-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-sm-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-sm-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-sm-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-sm-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-sm-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-sm-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-sm-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-sm-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">768px</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="p">.</span><span class="nc">opacity-md-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-md-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-md-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-md-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-md-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-md-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-md-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-md-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-md-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-md-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">992px</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="p">.</span><span class="nc">opacity-lg-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-lg-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-lg-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-lg-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-lg-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-lg-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-lg-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-lg-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-lg-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-lg-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">1200px</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xl-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xl-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xl-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xl-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xl-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xl-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xl-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xl-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xl-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xl-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">1400px</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xxl-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xxl-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xxl-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xxl-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xxl-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xxl-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xxl-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xxl-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xxl-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-xxl-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h3 id="changing-utilities">Changing utilities</h3>
|
||||
<p>Override existing utilities by using the same key. For example, if you want additional responsive overflow utility classes, you can do this:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="s2">"overflow"</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="n">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span>
|
||||
<span class="n">property</span><span class="o">:</span> <span class="no">overflow</span><span class="o">,</span>
|
||||
<span class="n">values</span><span class="o">:</span> <span class="no">visible</span> <span class="no">hidden</span> <span class="no">scroll</span> <span class="no">auto</span><span class="o">,</span>
|
||||
<span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span>
|
||||
<span class="na">property</span><span class="o">:</span> <span class="n">overflow</span><span class="o">,</span>
|
||||
<span class="na">values</span><span class="o">:</span> <span class="ni">visible</span> <span class="ni">hidden</span> <span class="ni">scroll</span> <span class="ni">auto</span><span class="o">,</span>
|
||||
<span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div><h3 id="print-utilities">Print utilities</h3>
|
||||
<p>Enabling the <code>print</code> option will <strong>also</strong> generate utility classes for print, which are only applied within the <code>@media print { ... }</code> media query.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="n">property</span><span class="o">:</span> <span class="no">opacity</span><span class="o">,</span>
|
||||
<span class="n">print</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span>
|
||||
<span class="n">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">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span>
|
||||
<span class="mi">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="mi">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span>
|
||||
<span class="mi">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span>
|
||||
<span class="na">property</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span>
|
||||
<span class="na">print</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span>
|
||||
<span class="na">values</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
|
||||
<span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span>
|
||||
<span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span>
|
||||
<span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div><p>Output:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">opacity-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">opacity-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
|
||||
<span class="p">@</span><span class="k">media</span> <span class="nt">print</span> <span class="p">{</span>
|
||||
<span class="p">.</span><span class="nc">opacity-print-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-print-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-print-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-print-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-print-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-print-0</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-print-25</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-print-50</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-print-75</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">opacity-print-100</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2 id="using-the-api">Using the API</h2>
|
||||
</code></pre></div><h2 id="importance">Importance</h2>
|
||||
<p>All utilities generated by the API include <code>!important</code> to ensure they override components and modifier classes as intended. You can toggle this setting globally with the <code>$enable-important-utilities</code> variable (defaults to <code>true</code>).</p>
|
||||
<h2 id="using-the-api">Using the API</h2>
|
||||
<p>Now that you’re familiar with how the utilities API works, learn how to add your own custom classes and modify our default utilities.</p>
|
||||
<h3 id="add-utilities">Add utilities</h3>
|
||||
<p>New utilities can be added to the default <code>$utilities</code> map with a <code>map-merge</code>. Make sure our required Sass files and <code>_utilities.scss</code> are imported first, then use the <code>map-merge</code> to add your additional utilities. For example, here’s how to add a responsive <code>cursor</code> utility with three values.</p>
|
||||
@@ -659,10 +663,10 @@
|
||||
<span class="nv">$utilities</span><span class="o">,</span>
|
||||
<span class="p">(</span>
|
||||
<span class="s2">"cursor"</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="n">property</span><span class="o">:</span> <span class="no">cursor</span><span class="o">,</span>
|
||||
<span class="n">class</span><span class="o">:</span> <span class="no">cursor</span><span class="o">,</span>
|
||||
<span class="n">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span>
|
||||
<span class="n">values</span><span class="o">:</span> <span class="no">auto</span> <span class="no">pointer</span> <span class="n">grab</span><span class="o">,</span>
|
||||
<span class="na">property</span><span class="o">:</span> <span class="n">cursor</span><span class="o">,</span>
|
||||
<span class="na">class</span><span class="o">:</span> <span class="n">cursor</span><span class="o">,</span>
|
||||
<span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span>
|
||||
<span class="na">values</span><span class="o">:</span> <span class="ni">auto</span> <span class="ni">pointer</span> <span class="ni">grab</span><span class="o">,</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
@@ -678,14 +682,56 @@
|
||||
<span class="s2">"width"</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span>
|
||||
<span class="nf">map-get</span><span class="p">(</span><span class="nv">$utilities</span><span class="o">,</span> <span class="s2">"width"</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">(</span>
|
||||
<span class="n">values</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span>
|
||||
<span class="na">values</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span>
|
||||
<span class="nf">map-get</span><span class="p">(</span><span class="nf">map-get</span><span class="p">(</span><span class="nv">$utilities</span><span class="o">,</span> <span class="s2">"width"</span><span class="p">)</span><span class="o">,</span> <span class="s2">"values"</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">(</span><span class="mi">10</span><span class="o">:</span> <span class="mi">10</span><span class="kt">%</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">(</span><span class="na">10</span><span class="o">:</span> <span class="mi">10</span><span class="kt">%</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div><h4 id="enable-responsive">Enable responsive</h4>
|
||||
<p>You can enable responsive classes for an existing set of utilities that are not currently responsive by default. For example, to make the <code>border</code> classes responsive:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@import</span> <span class="s2">"bootstrap/scss/functions"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"bootstrap/scss/variables"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"bootstrap/scss/utilities"</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$utilities</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span>
|
||||
<span class="nv">$utilities</span><span class="o">,</span> <span class="p">(</span>
|
||||
<span class="s2">"border"</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span>
|
||||
<span class="nf">map-get</span><span class="p">(</span><span class="nv">$utilities</span><span class="o">,</span> <span class="s2">"border"</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">(</span> <span class="na">responsive</span><span class="o">:</span> <span class="n">true</span> <span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div><p>This will now generate responsive variations of <code>.border</code> and <code>.border-0</code> for each breakpoint. Your generated CSS will look like this:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">border</span> <span class="p">{</span> <span class="err">...</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">border-0</span> <span class="p">{</span> <span class="err">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">576px</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="p">.</span><span class="nc">border-sm</span> <span class="p">{</span> <span class="err">...</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">border-sm-0</span> <span class="p">{</span> <span class="err">...</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">768px</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="p">.</span><span class="nc">border-md</span> <span class="p">{</span> <span class="err">...</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">border-md-0</span> <span class="p">{</span> <span class="err">...</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">992px</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="p">.</span><span class="nc">border-lg</span> <span class="p">{</span> <span class="err">...</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">border-lg-0</span> <span class="p">{</span> <span class="err">...</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">1200px</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="p">.</span><span class="nc">border-xl</span> <span class="p">{</span> <span class="err">...</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">border-xl-0</span> <span class="p">{</span> <span class="err">...</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">1400px</span><span class="o">)</span> <span class="p">{</span>
|
||||
<span class="p">.</span><span class="nc">border-xxl</span> <span class="p">{</span> <span class="err">...</span> <span class="p">}</span>
|
||||
<span class="p">.</span><span class="nc">border-xxl-0</span> <span class="p">{</span> <span class="err">...</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h4 id="rename-utilities">Rename utilities</h4>
|
||||
<p>Missing v4 utilities, or used to another naming convention? The utilities API can be used to override the resulting <code>class</code> of a given utility—for example, to rename <code>.ms-*</code> utilities to oldish <code>.ml-*</code>:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@import</span> <span class="s2">"bootstrap/scss/functions"</span><span class="p">;</span>
|
||||
@@ -696,7 +742,7 @@
|
||||
<span class="nv">$utilities</span><span class="o">,</span> <span class="p">(</span>
|
||||
<span class="s2">"margin-start"</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span>
|
||||
<span class="nf">map-get</span><span class="p">(</span><span class="nv">$utilities</span><span class="o">,</span> <span class="s2">"margin-start"</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">(</span> <span class="n">class</span><span class="o">:</span> <span class="n">ml</span> <span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">(</span> <span class="na">class</span><span class="o">:</span> <span class="n">ml</span> <span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
@@ -716,10 +762,10 @@
|
||||
<p>Some edge cases make <a href="https://rtlstyling.com/posts/rtl-styling#common-things-that-might-not-work-for-rtl">RTL styling difficult</a>, such as line breaks in Arabic. Thus utilities can be dropped from RTL output by setting the <code>rtl</code> option to <code>false</code>:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="s2">"word-wrap"</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="n">property</span><span class="o">:</span> <span class="no">word-wrap</span> <span class="no">word-break</span><span class="o">,</span>
|
||||
<span class="n">class</span><span class="o">:</span> <span class="no">text</span><span class="o">,</span>
|
||||
<span class="n">values</span><span class="o">:</span> <span class="p">(</span><span class="n">break</span><span class="o">:</span> <span class="n">break-word</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="n">rtl</span><span class="o">:</span> <span class="n">false</span>
|
||||
<span class="na">property</span><span class="o">:</span> <span class="n">word-wrap</span> <span class="n">word-break</span><span class="o">,</span>
|
||||
<span class="na">class</span><span class="o">:</span> <span class="ni">text</span><span class="o">,</span>
|
||||
<span class="na">values</span><span class="o">:</span> <span class="p">(</span><span class="na">break</span><span class="o">:</span> <span class="ni">break-word</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="na">rtl</span><span class="o">:</span> <span class="n">false</span>
|
||||
<span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div><p>Output:</p>
|
||||
@@ -747,7 +793,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -794,7 +840,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -802,7 +848,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -411,10 +411,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="background-color">Background color</h2>
|
||||
<p>Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities <strong>do not set <code>color</code></strong>, so in some cases you’ll want to use <code>.text-*</code> <a href="/docs/5.0/utilities/colors/">color utilities</a>.</p>
|
||||
@@ -522,10 +522,10 @@
|
||||
<h3 id="mixins">Mixins</h3>
|
||||
<p><strong>No mixins are used to generate our background utilities</strong>, but we do have some additional mixins for other situations where you’d like to create your own gradients.</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@mixin</span><span class="nf"> gradient-bg</span><span class="p">(</span><span class="nv">$color</span><span class="o">:</span> <span class="n">null</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">background-color</span><span class="nd">:</span> <span class="err">$</span><span class="nt">color</span><span class="p">;</span>
|
||||
<span class="na">background-color</span><span class="o">:</span> <span class="nv">$color</span><span class="p">;</span>
|
||||
|
||||
<span class="k">@if</span> <span class="nv">$enable-gradients</span> <span class="p">{</span>
|
||||
<span class="nt">background-image</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">gradient</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="na">background-image</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$variable-prefix</span><span class="si">}</span><span class="n">gradient</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
@@ -533,34 +533,34 @@
|
||||
</span><span class="c1">//
|
||||
</span><span class="c1">// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
</span><span class="c1"></span><span class="k">@mixin</span><span class="nf"> gradient-x</span><span class="p">(</span><span class="nv">$start-color</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="o">,</span> <span class="nv">$end-color</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="o">,</span> <span class="nv">$start-percent</span><span class="o">:</span> <span class="mi">0</span><span class="kt">%</span><span class="o">,</span> <span class="nv">$end-percent</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">background-image</span><span class="nd">:</span> <span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">to</span> <span class="nt">right</span><span class="o">,</span> <span class="err">$</span><span class="nt">start-color</span> <span class="err">$</span><span class="nt">start-percent</span><span class="o">,</span> <span class="err">$</span><span class="nt">end-color</span> <span class="err">$</span><span class="nt">end-percent</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="n">to</span> <span class="ni">right</span><span class="o">,</span> <span class="nv">$start-color</span> <span class="nv">$start-percent</span><span class="o">,</span> <span class="nv">$end-color</span> <span class="nv">$end-percent</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// Vertical gradient, from top to bottom
|
||||
</span><span class="c1">//
|
||||
</span><span class="c1">// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
</span><span class="c1"></span><span class="k">@mixin</span><span class="nf"> gradient-y</span><span class="p">(</span><span class="nv">$start-color</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="o">,</span> <span class="nv">$end-color</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="o">,</span> <span class="nv">$start-percent</span><span class="o">:</span> <span class="n">null</span><span class="o">,</span> <span class="nv">$end-percent</span><span class="o">:</span> <span class="n">null</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">background-image</span><span class="nd">:</span> <span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">to</span> <span class="nt">bottom</span><span class="o">,</span> <span class="err">$</span><span class="nt">start-color</span> <span class="err">$</span><span class="nt">start-percent</span><span class="o">,</span> <span class="err">$</span><span class="nt">end-color</span> <span class="err">$</span><span class="nt">end-percent</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="n">to</span> <span class="ni">bottom</span><span class="o">,</span> <span class="nv">$start-color</span> <span class="nv">$start-percent</span><span class="o">,</span> <span class="nv">$end-color</span> <span class="nv">$end-percent</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> gradient-directional</span><span class="p">(</span><span class="nv">$start-color</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="o">,</span> <span class="nv">$end-color</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="o">,</span> <span class="nv">$deg</span><span class="o">:</span> <span class="mi">45</span><span class="kt">deg</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">background-image</span><span class="nd">:</span> <span class="nt">linear-gradient</span><span class="o">(</span><span class="err">$</span><span class="nt">deg</span><span class="o">,</span> <span class="err">$</span><span class="nt">start-color</span><span class="o">,</span> <span class="err">$</span><span class="nt">end-color</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="nv">$deg</span><span class="o">,</span> <span class="nv">$start-color</span><span class="o">,</span> <span class="nv">$end-color</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> gradient-x-three-colors</span><span class="p">(</span><span class="nv">$start-color</span><span class="o">:</span> <span class="nv">$blue</span><span class="o">,</span> <span class="nv">$mid-color</span><span class="o">:</span> <span class="nv">$purple</span><span class="o">,</span> <span class="nv">$color-stop</span><span class="o">:</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="nv">$end-color</span><span class="o">:</span> <span class="nv">$red</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">background-image</span><span class="nd">:</span> <span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">to</span> <span class="nt">right</span><span class="o">,</span> <span class="err">$</span><span class="nt">start-color</span><span class="o">,</span> <span class="err">$</span><span class="nt">mid-color</span> <span class="err">$</span><span class="nt">color-stop</span><span class="o">,</span> <span class="err">$</span><span class="nt">end-color</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="n">to</span> <span class="ni">right</span><span class="o">,</span> <span class="nv">$start-color</span><span class="o">,</span> <span class="nv">$mid-color</span> <span class="nv">$color-stop</span><span class="o">,</span> <span class="nv">$end-color</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> gradient-y-three-colors</span><span class="p">(</span><span class="nv">$start-color</span><span class="o">:</span> <span class="nv">$blue</span><span class="o">,</span> <span class="nv">$mid-color</span><span class="o">:</span> <span class="nv">$purple</span><span class="o">,</span> <span class="nv">$color-stop</span><span class="o">:</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="nv">$end-color</span><span class="o">:</span> <span class="nv">$red</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">background-image</span><span class="nd">:</span> <span class="nt">linear-gradient</span><span class="o">(</span><span class="err">$</span><span class="nt">start-color</span><span class="o">,</span> <span class="err">$</span><span class="nt">mid-color</span> <span class="err">$</span><span class="nt">color-stop</span><span class="o">,</span> <span class="err">$</span><span class="nt">end-color</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="nv">$start-color</span><span class="o">,</span> <span class="nv">$mid-color</span> <span class="nv">$color-stop</span><span class="o">,</span> <span class="nv">$end-color</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> gradient-radial</span><span class="p">(</span><span class="nv">$inner-color</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="o">,</span> <span class="nv">$outer-color</span><span class="o">:</span> <span class="nv">$gray-800</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">background-image</span><span class="nd">:</span> <span class="nt">radial-gradient</span><span class="o">(</span><span class="nt">circle</span><span class="o">,</span> <span class="err">$</span><span class="nt">inner-color</span><span class="o">,</span> <span class="err">$</span><span class="nt">outer-color</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="na">background-image</span><span class="o">:</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="ni">circle</span><span class="o">,</span> <span class="nv">$inner-color</span><span class="o">,</span> <span class="nv">$outer-color</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@mixin</span><span class="nf"> gradient-striped</span><span class="p">(</span><span class="nv">$color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mf">.15</span><span class="p">)</span><span class="o">,</span> <span class="nv">$angle</span><span class="o">:</span> <span class="mi">45</span><span class="kt">deg</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nt">background-image</span><span class="nd">:</span> <span class="nt">linear-gradient</span><span class="o">(</span><span class="err">$</span><span class="nt">angle</span><span class="o">,</span> <span class="err">$</span><span class="nt">color</span> <span class="nt">25</span><span class="err">%</span><span class="o">,</span> <span class="nt">transparent</span> <span class="nt">25</span><span class="err">%</span><span class="o">,</span> <span class="nt">transparent</span> <span class="nt">50</span><span class="err">%</span><span class="o">,</span> <span class="err">$</span><span class="nt">color</span> <span class="nt">50</span><span class="err">%</span><span class="o">,</span> <span class="err">$</span><span class="nt">color</span> <span class="nt">75</span><span class="err">%</span><span class="o">,</span> <span class="nt">transparent</span> <span class="nt">75</span><span class="err">%</span><span class="o">,</span> <span class="nt">transparent</span><span class="o">)</span><span class="p">;</span>
|
||||
<span class="na">background-image</span><span class="o">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="nv">$angle</span><span class="o">,</span> <span class="nv">$color</span> <span class="mi">25</span><span class="kt">%</span><span class="o">,</span> <span class="ni">transparent</span> <span class="mi">25</span><span class="kt">%</span><span class="o">,</span> <span class="ni">transparent</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="nv">$color</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="nv">$color</span> <span class="mi">75</span><span class="kt">%</span><span class="o">,</span> <span class="ni">transparent</span> <span class="mi">75</span><span class="kt">%</span><span class="o">,</span> <span class="ni">transparent</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
@@ -595,7 +595,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -642,7 +642,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -650,7 +650,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -421,10 +421,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="border">Border</h2>
|
||||
<p>Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.</p>
|
||||
@@ -529,11 +529,11 @@
|
||||
<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="na">1</span><span class="o">:</span> <span class="mi">1</span><span class="kt">px</span><span class="o">,</span>
|
||||
<span class="na">2</span><span class="o">:</span> <span class="mi">2</span><span class="kt">px</span><span class="o">,</span>
|
||||
<span class="na">3</span><span class="o">:</span> <span class="mi">3</span><span class="kt">px</span><span class="o">,</span>
|
||||
<span class="na">4</span><span class="o">:</span> <span class="mi">4</span><span class="kt">px</span><span class="o">,</span>
|
||||
<span class="na">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>
|
||||
@@ -546,62 +546,62 @@
|
||||
<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="na">border-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</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="k">@else if</span> <span class="nv">$fallback-border-radius</span> <span class="o">!=</span> <span class="n">false</span> <span class="p">{</span>
|
||||
<span class="na">border-radius</span><span class="o">:</span> <span class="nv">$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="na">border-top-left-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="p">);</span>
|
||||
<span class="na">border-top-right-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</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="na">border-top-right-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="p">);</span>
|
||||
<span class="na">border-bottom-right-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</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="na">border-bottom-right-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="p">);</span>
|
||||
<span class="na">border-bottom-left-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</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="na">border-top-left-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="p">);</span>
|
||||
<span class="na">border-bottom-left-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</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="na">border-top-left-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</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="na">border-top-right-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</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="na">border-bottom-right-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</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="na">border-bottom-left-radius</span><span class="o">:</span> <span class="nf">valid-radius</span><span class="p">(</span><span class="nv">$radius</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
@@ -706,7 +706,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -753,7 +753,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -761,7 +761,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -410,10 +410,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="colors">Colors</h2>
|
||||
<p>Colorize text with color utilities. If you want to colorize links, you can use the <a href="/docs/5.0/helpers/colored-links/"><code>.link-*</code> helper classes</a> which have <code>:hover</code> and <code>:focus</code> states.</p>
|
||||
@@ -550,7 +550,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -597,7 +597,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -605,7 +605,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -411,10 +411,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
<p>Change the value of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code> property</a> with our responsive display utility classes. We purposely support only a subset of all possible values for <code>display</code>. Classes can be combined for various effects as you need.</p>
|
||||
@@ -576,7 +576,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -623,7 +623,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -631,7 +631,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -422,10 +422,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="enable-flex-behaviors">Enable flex behaviors</h2>
|
||||
<p>Apply <code>display</code> utilities to create a flexbox container and transform <strong>direct children elements</strong> into flex items. Flex containers and items are able to be modified further with additional flex properties.</p>
|
||||
@@ -1307,7 +1307,7 @@
|
||||
<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">first</span><span class="nd">:</span> <span class="o">-</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>
|
||||
@@ -1335,7 +1335,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -1382,7 +1382,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -1390,7 +1390,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -408,10 +408,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">CSS <code>float</code> property</a>. <code>!important</code> is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.</p>
|
||||
@@ -485,7 +485,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -532,7 +532,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -540,7 +540,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,10 +393,10 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="text-selection">Text selection</h2>
|
||||
<p>Change the way in which the content is selected when the user interacts with it.</p>
|
||||
@@ -450,7 +450,7 @@ The <code>.pe-none</code> class (and the <code>pointer-events</code> CSS propert
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -497,7 +497,7 @@ The <code>.pe-none</code> class (and the <code>pointer-events</code> CSS propert
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -505,7 +505,7 @@ The <code>.pe-none</code> class (and the <code>pointer-events</code> CSS propert
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,10 +393,10 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Adjust the <code>overflow</code> property on the fly with four default values and classes. These classes are not responsive by default.</p>
|
||||
<div class="bd-example d-md-flex">
|
||||
@@ -443,7 +443,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -490,7 +490,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -498,7 +498,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -411,10 +411,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="position-values">Position values</h2>
|
||||
<p>Quick positioning classes are available, though they are not responsive.</p>
|
||||
@@ -553,9 +553,9 @@
|
||||
<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="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
|
||||
<span class="na">50</span><span class="o">:</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span>
|
||||
<span class="na">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>
|
||||
@@ -586,9 +586,9 @@
|
||||
<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="nt">null</span><span class="nd">:</span> <span class="nt">translate</span><span class="o">(-</span><span class="nt">50</span><span class="err">%</span><span class="o">,</span> <span class="o">-</span><span class="nt">50</span><span class="err">%</span><span class="o">),</span>
|
||||
<span 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>
|
||||
@@ -609,7 +609,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -656,7 +656,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -664,7 +664,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -408,10 +408,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
<p>While shadows on components are disabled by default in Bootstrap and can be enabled via <code>$enable-shadows</code>, you can also quickly add or remove a shadow with our <code>box-shadow</code> utility classes. Includes support for <code>.shadow-none</code> and three default sizes (which have associated variables to match).</p>
|
||||
@@ -429,7 +429,7 @@
|
||||
<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>
|
||||
<span class="nv">$box-shadow-inset</span><span class="o">:</span> <span class="ni">inset</span> <span class="mi">0</span> <span class="mi">1</span><span class="kt">px</span> <span class="mi">2</span><span class="kt">px</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mf">.075</span><span class="p">);</span>
|
||||
</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>
|
||||
@@ -461,7 +461,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -508,7 +508,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -516,7 +516,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -408,10 +408,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="relative-to-the-parent">Relative to the parent</h2>
|
||||
<p>Width and height utilities are generated from the utility API in <code>_utilities.scss</code>. Includes support for <code>25%</code>, <code>50%</code>, <code>75%</code>, <code>100%</code>, and <code>auto</code> by default. Modify those values as you need to generate different utilities here.</p>
|
||||
@@ -532,7 +532,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -579,7 +579,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -587,7 +587,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -416,10 +416,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="margin-and-padding">Margin and padding</h2>
|
||||
<p>Assign responsive-friendly <code>margin</code> or <code>padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code>.25rem</code> to <code>3rem</code>.</p>
|
||||
@@ -456,20 +456,20 @@
|
||||
<h3 id="examples">Examples</h3>
|
||||
<p>Here are some representative examples of these classes:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.mt-0</span> <span class="p">{</span>
|
||||
<span class="nt">margin-top</span><span class="nd">:</span> <span class="nt">0</span> <span class="o">!</span><span class="nt">important</span><span class="p">;</span>
|
||||
<span class="na">margin-top</span><span class="o">:</span> <span class="mi">0</span> <span class="k">!important</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.ms-1</span> <span class="p">{</span>
|
||||
<span class="nt">margin-left</span><span class="nd">:</span> <span class="o">(</span><span class="err">$</span><span class="nt">spacer</span> <span class="o">*</span> <span class="nc">.25</span><span class="o">)</span> <span class="o">!</span><span class="nt">important</span><span class="p">;</span>
|
||||
<span class="na">margin-left</span><span class="o">:</span> <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.25</span><span class="p">)</span> <span class="k">!important</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.px-2</span> <span class="p">{</span>
|
||||
<span class="nt">padding-left</span><span class="nd">:</span> <span class="o">(</span><span class="err">$</span><span class="nt">spacer</span> <span class="o">*</span> <span class="nc">.5</span><span class="o">)</span> <span class="o">!</span><span class="nt">important</span><span class="p">;</span>
|
||||
<span class="nt">padding-right</span><span class="nd">:</span> <span class="o">(</span><span class="err">$</span><span class="nt">spacer</span> <span class="o">*</span> <span class="nc">.5</span><span class="o">)</span> <span class="o">!</span><span class="nt">important</span><span class="p">;</span>
|
||||
<span class="na">padding-left</span><span class="o">:</span> <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</span><span class="p">)</span> <span class="k">!important</span><span class="p">;</span>
|
||||
<span class="na">padding-right</span><span class="o">:</span> <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</span><span class="p">)</span> <span class="k">!important</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.p-3</span> <span class="p">{</span>
|
||||
<span class="nt">padding</span><span class="nd">:</span> <span class="err">$</span><span class="nt">spacer</span> <span class="o">!</span><span class="nt">important</span><span class="p">;</span>
|
||||
<span class="na">padding</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="k">!important</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h3 id="horizontal-centering">Horizontal centering</h3>
|
||||
<p>Additionally, Bootstrap also includes an <code>.mx-auto</code> class for horizontally centering fixed-width block level content—that is, content that has <code>display: block</code> and a <code>width</code> set—by setting the horizontal margins to <code>auto</code>.</p>
|
||||
@@ -485,7 +485,7 @@
|
||||
<p>In CSS, <code>margin</code> properties can utilize negative values (<code>padding</code> cannot). These negative margins are <strong>disabled by default</strong>, but can be enabled in Sass by setting <code>$enable-negative-margins: true</code>.</p>
|
||||
<p>The syntax is nearly the same as the default, positive margin utilities, but with the addition of <code>n</code> before the requested size. Here’s an example class that’s the opposite of <code>.mt-1</code>:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.mt-n1</span> <span class="p">{</span>
|
||||
<span class="nt">margin-top</span><span class="nd">:</span> <span class="nt">-0</span><span class="nc">.25rem</span> <span class="o">!</span><span class="nt">important</span><span class="p">;</span>
|
||||
<span class="na">margin-top</span><span class="o">:</span> <span class="o">-</span><span class="mi">0</span><span class="mf">.25</span><span class="kt">rem</span> <span class="k">!important</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2 id="gap">Gap</h2>
|
||||
<p>When using <code>display: grid</code>, you can make use of <code>gap</code> utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a <code>display: grid</code> container). Gap utilities are responsive by default, and are generated via our utilities API, based on the <code>$spacers</code> Sass map.</p>
|
||||
@@ -506,12 +506,12 @@
|
||||
<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="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
|
||||
<span class="na">1</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.25</span><span class="o">,</span>
|
||||
<span class="na">2</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="na">3</span><span class="o">:</span> <span class="nv">$spacer</span><span class="o">,</span>
|
||||
<span class="na">4</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mi">1</span><span class="mf">.5</span><span class="o">,</span>
|
||||
<span class="na">5</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mi">3</span><span class="o">,</span>
|
||||
<span 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>
|
||||
@@ -664,7 +664,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -711,7 +711,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -719,7 +719,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -418,10 +418,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="text-alignment">Text alignment</h2>
|
||||
<p>Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.</p>
|
||||
@@ -552,24 +552,24 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
|
||||
<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><span class="c1"></span><span class="nv">$font-family-sans-serif</span><span class="o">:</span> <span class="ni">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="ni">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="ni">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><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="n">font-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="n">font-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 class="c1">// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
|
||||
</span><span class="c1">// $font-size-base affects 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-lighter</span><span class="o">:</span> <span class="ni">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-bolder</span><span class="o">:</span> <span class="ni">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>
|
||||
|
||||
@@ -587,12 +587,12 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
|
||||
<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="na">1</span><span class="o">:</span> <span class="nv">$h1-font-size</span><span class="o">,</span>
|
||||
<span class="na">2</span><span class="o">:</span> <span class="nv">$h2-font-size</span><span class="o">,</span>
|
||||
<span class="na">3</span><span class="o">:</span> <span class="nv">$h3-font-size</span><span class="o">,</span>
|
||||
<span class="na">4</span><span class="o">:</span> <span class="nv">$h4-font-size</span><span class="o">,</span>
|
||||
<span class="na">5</span><span class="o">:</span> <span class="nv">$h5-font-size</span><span class="o">,</span>
|
||||
<span class="na">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>
|
||||
@@ -600,7 +600,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
|
||||
<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="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="si">#{</span><span class="nv">$variable-prefix</span><span class="si">}</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>
|
||||
@@ -685,7 +685,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -732,7 +732,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -740,7 +740,7 @@ Note that <a href="https://rtlstyling.com/posts/rtl-styling#3.-line-break">break
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,10 +393,10 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-alignment</code></a> utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.</p>
|
||||
<p>Choose from <code>.align-baseline</code>, <code>.align-top</code>, <code>.align-middle</code>, <code>.align-bottom</code>, <code>.align-text-bottom</code>, and <code>.align-text-top</code> as needed.</p>
|
||||
@@ -467,7 +467,7 @@
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -514,7 +514,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -522,7 +522,7 @@
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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.83.1">
|
||||
<meta name="generator" content="Hugo 0.84.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -393,10 +393,10 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<p>Set the <code>visibility</code> of elements with our visibility utilities. These utility classes do not modify the <code>display</code> value at all and do not affect layout – <code>.invisible</code> elements still take up space in the page.</p>
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
@@ -408,10 +408,10 @@ Elements with the <code>.invisible</code> class will be hidden <em>both</em> vis
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"invisible"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Class
|
||||
</span><span class="c1"></span><span class="nc">.visible</span> <span class="p">{</span>
|
||||
<span class="nt">visibility</span><span class="nd">:</span> <span class="nt">visible</span> <span class="o">!</span><span class="nt">important</span><span class="p">;</span>
|
||||
<span class="na">visibility</span><span class="o">:</span> <span class="ni">visible</span> <span class="k">!important</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<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="na">visibility</span><span class="o">:</span> <span class="ni">hidden</span> <span class="k">!important</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2 id="sass">Sass</h2>
|
||||
<h3 id="utilities-api">Utilities API</h3>
|
||||
@@ -442,7 +442,7 @@ Elements with the <code>.invisible</code> class will be hidden <em>both</em> vis
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
<li class="mb-2">Currently v5.0.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -489,7 +489,7 @@ Elements with the <code>.invisible</code> class will be hidden <em>both</em> vis
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -497,7 +497,7 @@ Elements with the <code>.invisible</code> class will be hidden <em>both</em> vis
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user