mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-31 00:59:51 +02:00
Add v4.5.1 docs (#31409)
This commit is contained in:
XhmikosR
GitHub
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/borders/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -482,7 +483,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Borders</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/borders.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Borders</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@@ -575,7 +579,7 @@
|
||||
|
||||
<h2 id="sizes">Sizes</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.rounded-lg</code> or <code class="highlighter-rouge">.rounded-sm</code> for larger or smaller border-radius.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.rounded-lg</code> or <code class="language-plaintext highlighter-rouge">.rounded-sm</code> for larger or smaller border-radius.</p>
|
||||
|
||||
<div class="bd-example bd-example-images"><svg class="bd-placeholder-img rounded-sm" width="75" height="75" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Example small rounded image: 75x75"><title>Example small rounded image</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg><svg class="bd-placeholder-img rounded-lg" width="75" height="75" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Example large rounded image: 75x75"><title>Example large rounded image</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg></div>
|
||||
|
||||
@@ -588,6 +592,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Quickly and easily clear floated content within a container by adding a clearfix utility.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/clearfix/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -468,17 +469,20 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Clearfix</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/clearfix.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Clearfix</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Quickly and easily clear floated content within a container by adding a clearfix utility.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Easily clear <code class="highlighter-rouge">float</code>s by adding <code class="highlighter-rouge">.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>
|
||||
<p>Easily clear <code class="language-plaintext highlighter-rouge">float</code>s by adding <code class="language-plaintext highlighter-rouge">.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"clearfix"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Mixin itself</span>
|
||||
<span class="k">@mixin</span> <span class="nf">clearfix</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="err">&</span><span class="p">:</span><span class="o">:</span><span class="n">after</span> <span class="p">{</span>
|
||||
<span class="k">&</span><span class="nd">::after</span> <span class="p">{</span>
|
||||
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
|
||||
<span class="nl">content</span><span class="p">:</span> <span class="s2">""</span><span class="p">;</span>
|
||||
<span class="nl">clear</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span>
|
||||
@@ -509,6 +513,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use a generic close icon for dismissing content like modals and alerts.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/close-icon/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -468,11 +469,14 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Close icon</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/close-icon.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Close icon</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Use a generic close icon for dismissing content like modals and alerts.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p><strong>Be sure to include text for screen readers</strong>, as we’ve done with <code class="highlighter-rouge">aria-label</code>.</p>
|
||||
<p><strong>Be sure to include text for screen readers</strong>, as we’ve done with <code class="language-plaintext highlighter-rouge">aria-label</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="close" aria-label="Close">
|
||||
@@ -489,6 +493,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/colors/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -476,11 +477,27 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Colors</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/colors.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Colors</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="color">Color</h2>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4 id="dealing-with-specificity">Dealing with specificity</h4>
|
||||
|
||||
<p>Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <code class="language-plaintext highlighter-rouge"><div></code> with the class.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="language-plaintext highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="color">Color</h2>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@@ -512,7 +529,7 @@
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-black-50"</span><span class="nt">></span>.text-black-50<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-white-50 bg-dark"</span><span class="nt">></span>.text-white-50<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<p>Contextual text classes also work well on anchors with the provided hover and focus states. <strong>Note that the <code class="highlighter-rouge">.text-white</code> and <code class="highlighter-rouge">.text-muted</code> class has no additional link styling beyond underline.</strong></p>
|
||||
<p>Contextual text classes also work well on anchors with the provided hover and focus states. <strong>Note that the <code class="language-plaintext highlighter-rouge">.text-white</code> and <code class="language-plaintext highlighter-rouge">.text-muted</code> class has no additional link styling beyond underline.</strong></p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@@ -540,7 +557,7 @@
|
||||
|
||||
<h2 id="background-color">Background color</h2>
|
||||
|
||||
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities <strong>do not set <code class="highlighter-rouge">color</code></strong>, so in some cases you’ll want to use <code class="highlighter-rouge">.text-*</code> utilities.</p>
|
||||
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities <strong>do not set <code class="language-plaintext highlighter-rouge">color</code></strong>, so in some cases you’ll want to use <code class="language-plaintext highlighter-rouge">.text-*</code> utilities.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
@@ -568,37 +585,24 @@
|
||||
|
||||
<h2 id="background-gradient">Background gradient</h2>
|
||||
|
||||
<p>When <code class="highlighter-rouge">$enable-gradients</code> is set to <code class="highlighter-rouge">true</code> (default is <code class="highlighter-rouge">false</code>), you can use <code class="highlighter-rouge">.bg-gradient-</code> utility classes. <a href="/docs/4.5/getting-started/theming/#sass-options">Learn about our Sass options</a> to enable these classes and more.</p>
|
||||
<p>When <code class="language-plaintext highlighter-rouge">$enable-gradients</code> is set to <code class="language-plaintext highlighter-rouge">true</code> (default is <code class="language-plaintext highlighter-rouge">false</code>), you can use <code class="language-plaintext highlighter-rouge">.bg-gradient-</code> utility classes. <a href="/docs/4.5/getting-started/theming/#sass-options">Learn about our Sass options</a> to enable these classes and more.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-primary</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-secondary</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-success</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-danger</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-warning</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-info</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-light</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-dark</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-primary</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-secondary</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-success</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-danger</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-warning</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-info</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-light</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.bg-gradient-dark</code></li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4 id="dealing-with-specificity">Dealing with specificity</h4>
|
||||
|
||||
<p>Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <code class="highlighter-rouge"><div></code> with the class.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/display/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -478,42 +479,45 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Display property</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/display.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Display property</h1>
|
||||
</div>
|
||||
<p class="bd-lead">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.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<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 class="highlighter-rouge">display</code> property</a> with our responsive display utility classes. We purposely support only a subset of all possible values for <code class="highlighter-rouge">display</code>. Classes can be combined for various effects as you need.</p>
|
||||
<p>Change the value of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code class="language-plaintext highlighter-rouge">display</code> property</a> with our responsive display utility classes. We purposely support only a subset of all possible values for <code class="language-plaintext highlighter-rouge">display</code>. Classes can be combined for various effects as you need.</p>
|
||||
|
||||
<h2 id="notation">Notation</h2>
|
||||
|
||||
<p>Display utility classes that apply to all <a href="/docs/4.5/layout/overview/#responsive-breakpoints">breakpoints</a>, from <code class="highlighter-rouge">xs</code> to <code class="highlighter-rouge">xl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code class="highlighter-rouge">min-width: 0;</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
|
||||
<p>Display utility classes that apply to all <a href="/docs/4.5/layout/overview/#responsive-breakpoints">breakpoints</a>, from <code class="language-plaintext highlighter-rouge">xs</code> to <code class="language-plaintext highlighter-rouge">xl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code class="language-plaintext highlighter-rouge">min-width: 0;</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
|
||||
|
||||
<p>As such, the classes are named using the format:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.d-{value}</code> for <code class="highlighter-rouge">xs</code></li>
|
||||
<li><code class="highlighter-rouge">.d-{breakpoint}-{value}</code> for <code class="highlighter-rouge">sm</code>, <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, and <code class="highlighter-rouge">xl</code>.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-{value}</code> for <code class="language-plaintext highlighter-rouge">xs</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-{breakpoint}-{value}</code> for <code class="language-plaintext highlighter-rouge">sm</code>, <code class="language-plaintext highlighter-rouge">md</code>, <code class="language-plaintext highlighter-rouge">lg</code>, and <code class="language-plaintext highlighter-rouge">xl</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p>Where <em>value</em> is one of:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">none</code></li>
|
||||
<li><code class="highlighter-rouge">inline</code></li>
|
||||
<li><code class="highlighter-rouge">inline-block</code></li>
|
||||
<li><code class="highlighter-rouge">block</code></li>
|
||||
<li><code class="highlighter-rouge">table</code></li>
|
||||
<li><code class="highlighter-rouge">table-cell</code></li>
|
||||
<li><code class="highlighter-rouge">table-row</code></li>
|
||||
<li><code class="highlighter-rouge">flex</code></li>
|
||||
<li><code class="highlighter-rouge">inline-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">none</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">inline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">inline-block</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">block</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">table</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">table-cell</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">table-row</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">inline-flex</code></li>
|
||||
</ul>
|
||||
|
||||
<p>The display values can be altered by changing the <code class="highlighter-rouge">$displays</code> variable and recompiling the SCSS.</p>
|
||||
<p>The display values can be altered by changing the <code class="language-plaintext highlighter-rouge">$displays</code> variable and recompiling the SCSS.</p>
|
||||
|
||||
<p>The media queries effect screen widths with the given breakpoint <em>or larger</em>. For example, <code class="highlighter-rouge">.d-lg-none</code> sets <code class="highlighter-rouge">display: none;</code> on both <code class="highlighter-rouge">lg</code> and <code class="highlighter-rouge">xl</code> screens.</p>
|
||||
<p>The media queries affect screen widths with the given breakpoint <em>or larger</em>. For example, <code class="language-plaintext highlighter-rouge">.d-lg-none</code> sets <code class="language-plaintext highlighter-rouge">display: none;</code> on both <code class="language-plaintext highlighter-rouge">lg</code> and <code class="language-plaintext highlighter-rouge">xl</code> screens.</p>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
@@ -535,9 +539,9 @@
|
||||
|
||||
<p>For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.</p>
|
||||
|
||||
<p>To hide elements simply use the <code class="highlighter-rouge">.d-none</code> class or one of the <code class="highlighter-rouge">.d-{sm,md,lg,xl}-none</code> classes for any responsive screen variation.</p>
|
||||
<p>To hide elements simply use the <code class="language-plaintext highlighter-rouge">.d-none</code> class or one of the <code class="language-plaintext highlighter-rouge">.d-{sm,md,lg,xl}-none</code> classes for any responsive screen variation.</p>
|
||||
|
||||
<p>To show an element only on a given interval of screen sizes you can combine one <code class="highlighter-rouge">.d-*-none</code> class with a <code class="highlighter-rouge">.d-*-*</code> class, for example <code class="highlighter-rouge">.d-none .d-md-block .d-xl-none</code> will hide the element for all screen sizes except on medium and large devices.</p>
|
||||
<p>To show an element only on a given interval of screen sizes you can combine one <code class="language-plaintext highlighter-rouge">.d-*-none</code> class with a <code class="language-plaintext highlighter-rouge">.d-*-*</code> class, for example <code class="language-plaintext highlighter-rouge">.d-none .d-md-block .d-xl-none</code> will hide the element for all screen sizes except on medium and large devices.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
@@ -549,51 +553,51 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Hidden on all</td>
|
||||
<td><code class="highlighter-rouge">.d-none</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">.d-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on xs</td>
|
||||
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">.d-none .d-sm-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on sm</td>
|
||||
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">.d-sm-none .d-md-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on md</td>
|
||||
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">.d-md-none .d-lg-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on lg</td>
|
||||
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">.d-lg-none .d-xl-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on xl</td>
|
||||
<td><code class="highlighter-rouge">.d-xl-none</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">.d-xl-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible on all</td>
|
||||
<td><code class="highlighter-rouge">.d-block</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">.d-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on xs</td>
|
||||
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">.d-block .d-sm-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on sm</td>
|
||||
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on md</td>
|
||||
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on lg</td>
|
||||
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on xl</td>
|
||||
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
|
||||
<td><code class="language-plaintext highlighter-rouge">.d-none .d-xl-block</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -607,18 +611,18 @@
|
||||
|
||||
<h2 id="display-in-print">Display in print</h2>
|
||||
|
||||
<p>Change the <code class="highlighter-rouge">display</code> value of elements when printing with our print display utility classes. Includes support for the same <code class="highlighter-rouge">display</code> values as our responsive <code class="highlighter-rouge">.d-*</code> utilities.</p>
|
||||
<p>Change the <code class="language-plaintext highlighter-rouge">display</code> value of elements when printing with our print display utility classes. Includes support for the same <code class="language-plaintext highlighter-rouge">display</code> values as our responsive <code class="language-plaintext highlighter-rouge">.d-*</code> utilities.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.d-print-none</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-inline</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-inline-block</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-block</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-table</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-table-row</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-table-cell</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-inline-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-print-none</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-print-inline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-print-inline-block</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-print-block</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-print-table</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-print-table-row</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-print-table-cell</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-print-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-print-inline-flex</code></li>
|
||||
</ul>
|
||||
|
||||
<p>The print and display classes can be combined.</p>
|
||||
@@ -638,6 +642,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/embed/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -476,19 +477,22 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Embeds</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/embed.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Embeds</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="about">About</h2>
|
||||
|
||||
<p>Rules are directly applied to <code class="highlighter-rouge"><iframe></code>, <code class="highlighter-rouge"><embed></code>, <code class="highlighter-rouge"><video></code>, and <code class="highlighter-rouge"><object></code> elements; optionally use an explicit descendant class <code class="highlighter-rouge">.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
|
||||
<p>Rules are directly applied to <code class="language-plaintext highlighter-rouge"><iframe></code>, <code class="language-plaintext highlighter-rouge"><embed></code>, <code class="language-plaintext highlighter-rouge"><video></code>, and <code class="language-plaintext highlighter-rouge"><object></code> elements; optionally use an explicit descendant class <code class="language-plaintext highlighter-rouge">.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
|
||||
|
||||
<p><strong>Pro-Tip!</strong> You don’t need to include <code class="highlighter-rouge">frameborder="0"</code> in your <code class="highlighter-rouge"><iframe></code>s as we override that for you.</p>
|
||||
<p><strong>Pro-Tip!</strong> You don’t need to include <code class="language-plaintext highlighter-rouge">frameborder="0"</code> in your <code class="language-plaintext highlighter-rouge"><iframe></code>s as we override that for you.</p>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Wrap any embed like an <code class="highlighter-rouge"><iframe></code> in a parent element with <code class="highlighter-rouge">.embed-responsive</code> and an aspect ratio. The <code class="highlighter-rouge">.embed-responsive-item</code> isn’t strictly required, but we encourage it.</p>
|
||||
<p>Wrap any embed like an <code class="language-plaintext highlighter-rouge"><iframe></code> in a parent element with <code class="language-plaintext highlighter-rouge">.embed-responsive</code> and an aspect ratio. The <code class="language-plaintext highlighter-rouge">.embed-responsive-item</code> isn’t strictly required, but we encourage it.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
@@ -523,7 +527,7 @@
|
||||
<span class="nt"><iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">></iframe></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Within <code class="highlighter-rouge">_variables.scss</code>, you can change the aspect ratios you want to use. Here’s an example of the <code class="highlighter-rouge">$embed-responsive-aspect-ratios</code> list:</p>
|
||||
<p>Within <code class="language-plaintext highlighter-rouge">_variables.scss</code>, you can change the aspect ratios you want to use. Here’s an example of the <code class="language-plaintext highlighter-rouge">$embed-responsive-aspect-ratios</code> list:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$embed-responsive-aspect-ratios</span><span class="p">:</span> <span class="p">(</span>
|
||||
<span class="p">(</span><span class="m">21</span> <span class="m">9</span><span class="p">)</span><span class="o">,</span>
|
||||
@@ -538,6 +542,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/flex/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -488,13 +489,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Flex</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/flex.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Flex</h1>
|
||||
</div>
|
||||
<p class="bd-lead">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.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="enable-flex-behaviors">Enable flex behaviors</h2>
|
||||
|
||||
<p>Apply <code class="highlighter-rouge">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>
|
||||
<p>Apply <code class="language-plaintext highlighter-rouge">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>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
|
||||
@@ -506,26 +510,26 @@
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-inline-flex p-2 bd-highlight"</span><span class="nt">></span>I'm an inline flexbox container!<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">.d-flex</code> and <code class="highlighter-rouge">.d-inline-flex</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">.d-flex</code> and <code class="language-plaintext highlighter-rouge">.d-inline-flex</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.d-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-inline-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-sm-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-sm-inline-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-md-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-md-inline-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-lg-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-lg-inline-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-xl-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-xl-inline-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-inline-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-sm-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-sm-inline-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-md-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-md-inline-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-lg-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-lg-inline-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-xl-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-xl-inline-flex</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="direction">Direction</h2>
|
||||
|
||||
<p>Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is <code class="highlighter-rouge">row</code>. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).</p>
|
||||
<p>Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is <code class="language-plaintext highlighter-rouge">row</code>. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).</p>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.flex-row</code> to set a horizontal direction (the browser default), or <code class="highlighter-rouge">.flex-row-reverse</code> to start the horizontal direction from the opposite side.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.flex-row</code> to set a horizontal direction (the browser default), or <code class="language-plaintext highlighter-rouge">.flex-row-reverse</code> to start the horizontal direction from the opposite side.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex flex-row bd-highlight mb-3">
|
||||
@@ -550,7 +554,7 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">></span>Flex item 3<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.flex-column</code> to set a vertical direction, or <code class="highlighter-rouge">.flex-column-reverse</code> to start the vertical direction from the opposite side.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.flex-column</code> to set a vertical direction, or <code class="language-plaintext highlighter-rouge">.flex-column-reverse</code> to start the vertical direction from the opposite side.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex flex-column bd-highlight mb-3">
|
||||
@@ -575,34 +579,34 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">></span>Flex item 3<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">flex-direction</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">flex-direction</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.flex-row</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-row-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-column</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-column-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-row</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-row-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-column</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-column-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-row</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-row-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-column</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-column-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-row</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-row-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-column</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-column-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-row</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-row-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-column</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-column-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-row</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-row-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-column</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-column-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-row</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-row-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-column</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-column-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-row</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-row-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-column</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-column-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-row</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-row-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-column</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-column-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-row</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-row-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-column</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-column-reverse</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="justify-content">Justify content</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">justify-content</code> utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if <code class="highlighter-rouge">flex-direction: column</code>). Choose from <code class="highlighter-rouge">start</code> (browser default), <code class="highlighter-rouge">end</code>, <code class="highlighter-rouge">center</code>, <code class="highlighter-rouge">between</code>, or <code class="highlighter-rouge">around</code>.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">justify-content</code> utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if <code class="language-plaintext highlighter-rouge">flex-direction: column</code>). Choose from <code class="language-plaintext highlighter-rouge">start</code> (browser default), <code class="language-plaintext highlighter-rouge">end</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">between</code>, or <code class="language-plaintext highlighter-rouge">around</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex justify-content-start bd-highlight mb-3">
|
||||
@@ -638,39 +642,39 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex justify-content-between"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex justify-content-around"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">justify-content</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">justify-content</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.justify-content-start</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-end</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-center</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-between</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-around</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-sm-start</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-sm-end</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-sm-center</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-sm-between</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-sm-around</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-md-start</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-md-end</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-md-center</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-md-between</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-md-around</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-lg-start</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-lg-end</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-lg-center</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-lg-between</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-lg-around</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-xl-start</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-xl-end</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-xl-center</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-xl-between</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-xl-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-between</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-between</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-between</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-between</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-between</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-around</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="align-items">Align items</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">align-items</code> utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if <code class="highlighter-rouge">flex-direction: column</code>). Choose from <code class="highlighter-rouge">start</code>, <code class="highlighter-rouge">end</code>, <code class="highlighter-rouge">center</code>, <code class="highlighter-rouge">baseline</code>, or <code class="highlighter-rouge">stretch</code> (browser default).</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">align-items</code> utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if <code class="language-plaintext highlighter-rouge">flex-direction: column</code>). Choose from <code class="language-plaintext highlighter-rouge">start</code>, <code class="language-plaintext highlighter-rouge">end</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">baseline</code>, or <code class="language-plaintext highlighter-rouge">stretch</code> (browser default).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-items-start bd-highlight mb-3" style="height: 100px">
|
||||
@@ -706,39 +710,39 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex align-items-baseline"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex align-items-stretch"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">align-items</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">align-items</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.align-items-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-sm-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-sm-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-sm-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-sm-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-sm-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-md-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-md-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-md-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-md-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-md-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-lg-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-lg-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-lg-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-lg-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-lg-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-xl-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-xl-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-xl-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-xl-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-xl-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-md-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-md-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-md-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-md-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-md-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-stretch</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="align-self">Align self</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">align-self</code> utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if <code class="highlighter-rouge">flex-direction: column</code>). Choose from the same options as <code class="highlighter-rouge">align-items</code>: <code class="highlighter-rouge">start</code>, <code class="highlighter-rouge">end</code>, <code class="highlighter-rouge">center</code>, <code class="highlighter-rouge">baseline</code>, or <code class="highlighter-rouge">stretch</code> (browser default).</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">align-self</code> utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if <code class="language-plaintext highlighter-rouge">flex-direction: column</code>). Choose from the same options as <code class="language-plaintext highlighter-rouge">align-items</code>: <code class="language-plaintext highlighter-rouge">start</code>, <code class="language-plaintext highlighter-rouge">end</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">baseline</code>, or <code class="language-plaintext highlighter-rouge">stretch</code> (browser default).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex bd-highlight mb-3" style="height: 100px">
|
||||
@@ -774,39 +778,39 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"align-self-baseline"</span><span class="nt">></span>Aligned flex item<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"align-self-stretch"</span><span class="nt">></span>Aligned flex item<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">align-self</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">align-self</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.align-self-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-sm-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-sm-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-sm-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-sm-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-sm-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-md-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-md-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-md-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-md-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-md-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-lg-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-lg-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-lg-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-lg-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-lg-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-xl-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-xl-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-xl-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-xl-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-xl-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-md-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-md-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-md-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-md-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-md-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-stretch</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="fill">Fill</h2>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.flex-fill</code> class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.</p>
|
||||
<p>Use the <code class="language-plaintext highlighter-rouge">.flex-fill</code> class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex bd-highlight">
|
||||
@@ -821,19 +825,19 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-2 flex-fill bd-highlight"</span><span class="nt">></span>Flex item<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">flex-fill</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">flex-fill</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.flex-fill</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-fill</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-fill</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-fill</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-fill</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-fill</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-fill</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-fill</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-fill</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-fill</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="grow-and-shrink">Grow and shrink</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.flex-grow-*</code> utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the <code class="highlighter-rouge">.flex-grow-1</code> elements uses all available space it can, while allowing the remaining two flex items their necessary space.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.flex-grow-*</code> utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the <code class="language-plaintext highlighter-rouge">.flex-grow-1</code> elements uses all available space it can, while allowing the remaining two flex items their necessary space.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex bd-highlight">
|
||||
@@ -848,7 +852,7 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">></span>Third flex item<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.flex-shrink-*</code> utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with <code class="highlighter-rouge">.flex-shrink-1</code> is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with <code class="highlighter-rouge">.w-100</code>.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.flex-shrink-*</code> utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with <code class="language-plaintext highlighter-rouge">.flex-shrink-1</code> is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with <code class="language-plaintext highlighter-rouge">.w-100</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex bd-highlight">
|
||||
@@ -861,26 +865,26 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-2 flex-shrink-1 bd-highlight"</span><span class="nt">></span>Flex item<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">flex-grow</code> and <code class="highlighter-rouge">flex-shrink</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">flex-grow</code> and <code class="language-plaintext highlighter-rouge">flex-shrink</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.flex-{grow|shrink}-0</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-{grow|shrink}-1</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-{grow|shrink}-0</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-{grow|shrink}-1</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-{grow|shrink}-0</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-{grow|shrink}-1</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-{grow|shrink}-0</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-{grow|shrink}-1</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-{grow|shrink}-0</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-{grow|shrink}-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-{grow|shrink}-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-{grow|shrink}-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-{grow|shrink}-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-{grow|shrink}-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-{grow|shrink}-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-{grow|shrink}-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-{grow|shrink}-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-{grow|shrink}-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-{grow|shrink}-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-{grow|shrink}-1</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="auto-margins">Auto margins</h2>
|
||||
|
||||
<p>Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (<code class="highlighter-rouge">.mr-auto</code>), and pushing two items to the left (<code class="highlighter-rouge">.ml-auto</code>).</p>
|
||||
<p>Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (<code class="language-plaintext highlighter-rouge">.mr-auto</code>), and pushing two items to the left (<code class="language-plaintext highlighter-rouge">.ml-auto</code>).</p>
|
||||
|
||||
<p><strong>Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default <code class="highlighter-rouge">justify-content</code> value.</strong> <a href="https://stackoverflow.com/a/37535548">See this StackOverflow answer</a> for more details.</p>
|
||||
<p><strong>Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default <code class="language-plaintext highlighter-rouge">justify-content</code> value.</strong> <a href="https://stackoverflow.com/a/37535548">See this StackOverflow answer</a> for more details.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex bd-highlight mb-3">
|
||||
@@ -921,7 +925,7 @@
|
||||
|
||||
<h3 id="with-align-items">With align-items</h3>
|
||||
|
||||
<p>Vertically move one flex item to the top or bottom of a container by mixing <code class="highlighter-rouge">align-items</code>, <code class="highlighter-rouge">flex-direction: column</code>, and <code class="highlighter-rouge">margin-top: auto</code> or <code class="highlighter-rouge">margin-bottom: auto</code>.</p>
|
||||
<p>Vertically move one flex item to the top or bottom of a container by mixing <code class="language-plaintext highlighter-rouge">align-items</code>, <code class="language-plaintext highlighter-rouge">flex-direction: column</code>, and <code class="language-plaintext highlighter-rouge">margin-top: auto</code> or <code class="language-plaintext highlighter-rouge">margin-bottom: auto</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
|
||||
@@ -950,7 +954,7 @@
|
||||
|
||||
<h2 id="wrap">Wrap</h2>
|
||||
|
||||
<p>Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with <code class="highlighter-rouge">.flex-nowrap</code>, wrapping with <code class="highlighter-rouge">.flex-wrap</code>, or reverse wrapping with <code class="highlighter-rouge">.flex-wrap-reverse</code>.</p>
|
||||
<p>Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with <code class="language-plaintext highlighter-rouge">.flex-nowrap</code>, wrapping with <code class="language-plaintext highlighter-rouge">.flex-wrap</code>, or reverse wrapping with <code class="language-plaintext highlighter-rouge">.flex-wrap-reverse</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex flex-nowrap bd-highlight" style="width: 8rem;">
|
||||
@@ -1014,29 +1018,29 @@
|
||||
...
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">flex-wrap</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">flex-wrap</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.flex-nowrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-wrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-wrap-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-nowrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-wrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-wrap-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-nowrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-wrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-wrap-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-nowrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-wrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-wrap-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-nowrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-wrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-wrap-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-nowrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-wrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-wrap-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-nowrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-wrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-wrap-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-nowrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-wrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-wrap-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-nowrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-wrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-wrap-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-nowrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-wrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-wrap-reverse</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="order">Order</h2>
|
||||
|
||||
<p>Change the <em>visual</em> order of specific flex items with a handful of <code class="highlighter-rouge">order</code> utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As <code class="highlighter-rouge">order</code> takes any integer value (e.g., <code class="highlighter-rouge">5</code>), add custom CSS for any additional values needed.</p>
|
||||
<p>Change the <em>visual</em> order of specific flex items with a handful of <code class="language-plaintext highlighter-rouge">order</code> utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As <code class="language-plaintext highlighter-rouge">order</code> takes any integer value (e.g., <code class="language-plaintext highlighter-rouge">5</code>), add custom CSS for any additional values needed.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex flex-nowrap bd-highlight">
|
||||
@@ -1051,79 +1055,79 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"order-1 p-2 bd-highlight"</span><span class="nt">></span>Third flex item<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">order</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">order</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.order-0</code></li>
|
||||
<li><code class="highlighter-rouge">.order-1</code></li>
|
||||
<li><code class="highlighter-rouge">.order-2</code></li>
|
||||
<li><code class="highlighter-rouge">.order-3</code></li>
|
||||
<li><code class="highlighter-rouge">.order-4</code></li>
|
||||
<li><code class="highlighter-rouge">.order-5</code></li>
|
||||
<li><code class="highlighter-rouge">.order-6</code></li>
|
||||
<li><code class="highlighter-rouge">.order-7</code></li>
|
||||
<li><code class="highlighter-rouge">.order-8</code></li>
|
||||
<li><code class="highlighter-rouge">.order-9</code></li>
|
||||
<li><code class="highlighter-rouge">.order-10</code></li>
|
||||
<li><code class="highlighter-rouge">.order-11</code></li>
|
||||
<li><code class="highlighter-rouge">.order-12</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-0</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-1</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-2</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-3</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-4</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-5</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-6</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-7</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-8</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-9</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-10</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-11</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-12</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-0</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-1</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-2</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-3</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-4</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-5</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-6</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-7</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-8</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-9</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-10</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-11</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-12</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-0</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-1</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-2</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-3</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-4</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-5</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-6</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-7</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-8</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-9</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-10</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-11</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-12</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-0</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-1</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-2</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-3</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-4</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-5</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-6</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-7</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-8</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-9</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-10</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-11</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-12</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-2</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-3</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-4</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-5</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-6</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-7</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-8</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-9</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-10</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-11</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-12</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-2</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-3</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-4</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-5</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-6</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-7</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-8</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-9</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-10</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-11</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-12</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-2</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-3</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-4</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-5</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-6</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-7</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-8</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-9</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-10</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-11</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-12</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-2</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-3</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-4</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-5</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-6</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-7</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-8</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-9</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-10</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-11</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-12</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-2</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-3</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-4</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-5</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-6</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-7</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-8</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-9</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-10</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-11</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-12</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="align-content">Align content</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">align-content</code> utilities on flexbox containers to align flex items <em>together</em> on the cross axis. Choose from <code class="highlighter-rouge">start</code> (browser default), <code class="highlighter-rouge">end</code>, <code class="highlighter-rouge">center</code>, <code class="highlighter-rouge">between</code>, <code class="highlighter-rouge">around</code>, or <code class="highlighter-rouge">stretch</code>. To demonstrate these utilities, we’ve enforced <code class="highlighter-rouge">flex-wrap: wrap</code> and increased the number of flex items.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">align-content</code> utilities on flexbox containers to align flex items <em>together</em> on the cross axis. Choose from <code class="language-plaintext highlighter-rouge">start</code> (browser default), <code class="language-plaintext highlighter-rouge">end</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">between</code>, <code class="language-plaintext highlighter-rouge">around</code>, or <code class="language-plaintext highlighter-rouge">stretch</code>. To demonstrate these utilities, we’ve enforced <code class="language-plaintext highlighter-rouge">flex-wrap: wrap</code> and increased the number of flex items.</p>
|
||||
|
||||
<p><strong>Heads up!</strong> This property has no effect on single rows of flex items.</p>
|
||||
|
||||
@@ -1261,34 +1265,34 @@
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex align-content-stretch flex-wrap"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">align-content</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">align-content</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.align-content-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-around</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-sm-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-sm-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-sm-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-sm-around</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-sm-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-md-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-md-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-md-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-md-around</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-md-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-lg-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-lg-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-lg-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-lg-around</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-lg-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-xl-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-xl-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-xl-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-xl-around</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-xl-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-md-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-md-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-md-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-md-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-md-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-stretch</code></li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
@@ -1296,6 +1300,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/float/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -477,13 +478,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Float</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/float.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Float</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Toggle floats on any element, across any breakpoint, using our responsive float utilities.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<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 class="highlighter-rouge">float</code> property</a>. <code class="highlighter-rouge">!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>
|
||||
<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 class="language-plaintext highlighter-rouge">float</code> property</a>. <code class="language-plaintext highlighter-rouge">!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>
|
||||
|
||||
<h2 id="classes">Classes</h2>
|
||||
|
||||
@@ -514,7 +518,7 @@
|
||||
|
||||
<h2 id="responsive">Responsive</h2>
|
||||
|
||||
<p>Responsive variations also exist for each <code class="highlighter-rouge">float</code> value.</p>
|
||||
<p>Responsive variations also exist for each <code class="language-plaintext highlighter-rouge">float</code> value.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br />
|
||||
@@ -530,21 +534,21 @@
|
||||
<p>Here are all the support classes;</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.float-left</code></li>
|
||||
<li><code class="highlighter-rouge">.float-right</code></li>
|
||||
<li><code class="highlighter-rouge">.float-none</code></li>
|
||||
<li><code class="highlighter-rouge">.float-sm-left</code></li>
|
||||
<li><code class="highlighter-rouge">.float-sm-right</code></li>
|
||||
<li><code class="highlighter-rouge">.float-sm-none</code></li>
|
||||
<li><code class="highlighter-rouge">.float-md-left</code></li>
|
||||
<li><code class="highlighter-rouge">.float-md-right</code></li>
|
||||
<li><code class="highlighter-rouge">.float-md-none</code></li>
|
||||
<li><code class="highlighter-rouge">.float-lg-left</code></li>
|
||||
<li><code class="highlighter-rouge">.float-lg-right</code></li>
|
||||
<li><code class="highlighter-rouge">.float-lg-none</code></li>
|
||||
<li><code class="highlighter-rouge">.float-xl-left</code></li>
|
||||
<li><code class="highlighter-rouge">.float-xl-right</code></li>
|
||||
<li><code class="highlighter-rouge">.float-xl-none</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-left</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-right</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-none</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-sm-left</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-sm-right</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-sm-none</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-md-left</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-md-right</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-md-none</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-lg-left</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-lg-right</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-lg-none</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-xl-left</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-xl-right</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.float-xl-none</code></li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
@@ -552,6 +556,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Swap text for background images with the image replacement class.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/image-replacement/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -468,7 +469,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Image replacement</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/image-replacement.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Image replacement</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Swap text for background images with the image replacement class.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@@ -476,10 +480,10 @@
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="warning">Warning</h5>
|
||||
|
||||
<p>The <code class="highlighter-rouge">text-hide()</code> class and mixin has been deprecated as of v4.1. It will be removed entirely in v5.</p>
|
||||
<p>The <code class="language-plaintext highlighter-rouge">text-hide()</code> class and mixin has been deprecated as of v4.1. It will be removed entirely in v5.</p>
|
||||
</div>
|
||||
|
||||
<p>Utilize the <code class="highlighter-rouge">.text-hide</code> class or mixin to help replace an element’s text content with a background image.</p>
|
||||
<p>Utilize the <code class="language-plaintext highlighter-rouge">.text-hide</code> class or mixin to help replace an element’s text content with a background image.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1</span> <span class="na">class=</span><span class="s">"text-hide"</span><span class="nt">></span>Custom heading<span class="nt"></h1></span></code></pre></figure>
|
||||
|
||||
@@ -488,7 +492,7 @@
|
||||
<span class="k">@include</span> <span class="nd">text-hide</span><span class="p">;</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.text-hide</code> class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a <code class="highlighter-rouge">background-image</code> instead of text.</p>
|
||||
<p>Use the <code class="language-plaintext highlighter-rouge">.text-hide</code> class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a <code class="language-plaintext highlighter-rouge">background-image</code> instead of text.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<h1 class="text-hide" style="background-image: url('/docs/4.5/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
|
||||
@@ -502,6 +506,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Utility classes that change how users interact with the contents of a website.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/interactions/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -468,7 +469,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Interactions</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/interactions.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Interactions</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Utility classes that change how users interact with the contents of a website.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@@ -485,13 +489,13 @@
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"user-select-auto"</span><span class="nt">></span>This paragraph has the default select behavior.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"user-select-none"</span><span class="nt">></span>This paragraph will not be selectable when clicked by the user.<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<p>Customize the available classes by changing the <code class="highlighter-rouge">$user-selects</code> Sass list in <code class="highlighter-rouge">_variables.scss</code>.</p>
|
||||
<p>Customize the available classes by changing the <code class="language-plaintext highlighter-rouge">$user-selects</code> Sass list in <code class="language-plaintext highlighter-rouge">_variables.scss</code>.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/overflow/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -468,11 +469,14 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Overflow</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/overflow.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Overflow</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Use these shorthand utilities for quickly configuring how content overflows an element.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Barebones <code class="highlighter-rouge">overflow</code> functionality is provided for two values by default, and they are not responsive.</p>
|
||||
<p>Barebones <code class="language-plaintext highlighter-rouge">overflow</code> functionality is provided for two values by default, and they are not responsive.</p>
|
||||
|
||||
<div class="bd-example d-md-flex">
|
||||
<div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
@@ -486,13 +490,13 @@
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"overflow-auto"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"overflow-hidden"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Using Sass variables, you may customize the overflow utilities by changing the <code class="highlighter-rouge">$overflows</code> variable in <code class="highlighter-rouge">_variables.scss</code>.</p>
|
||||
<p>Using Sass variables, you may customize the overflow utilities by changing the <code class="language-plaintext highlighter-rouge">$overflows</code> variable in <code class="language-plaintext highlighter-rouge">_variables.scss</code>.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/position/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -477,7 +478,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Position</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/position.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Position</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Use these shorthand utilities for quickly configuring the position of an element.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@@ -505,9 +509,9 @@
|
||||
|
||||
<h2 id="sticky-top">Sticky top</h2>
|
||||
|
||||
<p>Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The <code class="highlighter-rouge">.sticky-top</code> utility uses CSS’s <code class="highlighter-rouge">position: sticky</code>, which isn’t fully supported in all browsers.</p>
|
||||
<p>Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The <code class="language-plaintext highlighter-rouge">.sticky-top</code> utility uses CSS’s <code class="language-plaintext highlighter-rouge">position: sticky</code>, which isn’t fully supported in all browsers.</p>
|
||||
|
||||
<p><strong>IE11 and IE10 will render <code class="highlighter-rouge">position: sticky</code> as <code class="highlighter-rouge">position: relative</code>.</strong> As such, we wrap the styles in a <code class="highlighter-rouge">@supports</code> query, limiting the stickiness to only browsers that can render it properly.</p>
|
||||
<p><strong>IE11 and IE10 will render <code class="language-plaintext highlighter-rouge">position: sticky</code> as <code class="language-plaintext highlighter-rouge">position: relative</code>.</strong> As such, we wrap the styles in a <code class="language-plaintext highlighter-rouge">@supports</code> query, limiting the stickiness to only browsers that can render it properly.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"sticky-top"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
@@ -517,6 +521,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use screen reader utilities to hide elements on all devices except screen readers.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/screen-readers/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -468,11 +469,14 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Screen readers</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/screen-readers.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Screen readers</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Use screen reader utilities to hide elements on all devices except screen readers.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Hide an element to all devices <strong>except screen readers</strong> with <code class="highlighter-rouge">.sr-only</code>. Combine <code class="highlighter-rouge">.sr-only</code> with <code class="highlighter-rouge">.sr-only-focusable</code> to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.</p>
|
||||
<p>Hide an element to all devices <strong>except screen readers</strong> with <code class="language-plaintext highlighter-rouge">.sr-only</code>. Combine <code class="language-plaintext highlighter-rouge">.sr-only</code> with <code class="language-plaintext highlighter-rouge">.sr-only-focusable</code> to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.</p>
|
||||
<div class="bd-example">
|
||||
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
|
||||
</div>
|
||||
@@ -490,6 +494,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/shadows/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -468,13 +469,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Shadows</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/shadows.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Shadows</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Add or remove shadows to elements with box-shadow utilities.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>While shadows on components are disabled by default in Bootstrap and can be enabled via <code class="highlighter-rouge">$enable-shadows</code>, you can also quickly add or remove a shadow with our <code class="highlighter-rouge">box-shadow</code> utility classes. Includes support for <code class="highlighter-rouge">.shadow-none</code> and three default sizes (which have associated variables to match).</p>
|
||||
<p>While shadows on components are disabled by default in Bootstrap and can be enabled via <code class="language-plaintext highlighter-rouge">$enable-shadows</code>, you can also quickly add or remove a shadow with our <code class="language-plaintext highlighter-rouge">box-shadow</code> utility classes. Includes support for <code class="language-plaintext highlighter-rouge">.shadow-none</code> and three default sizes (which have associated variables to match).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
|
||||
@@ -493,6 +497,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/sizing/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -475,13 +476,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Sizing</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/sizing.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Sizing</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Easily make an element as wide or as tall with our width and height utilities.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="relative-to-the-parent">Relative to the parent</h2>
|
||||
|
||||
<p>Width and height utilities are generated from the <code class="highlighter-rouge">$sizes</code> Sass map in <code class="highlighter-rouge">_variables.scss</code>. Includes support for <code class="highlighter-rouge">25%</code>, <code class="highlighter-rouge">50%</code>, <code class="highlighter-rouge">75%</code>, <code class="highlighter-rouge">100%</code>, and <code class="highlighter-rouge">auto</code> by default. Modify those values as you need to generate different utilities here.</p>
|
||||
<p>Width and height utilities are generated from the <code class="language-plaintext highlighter-rouge">$sizes</code> Sass map in <code class="language-plaintext highlighter-rouge">_variables.scss</code>. Includes support for <code class="language-plaintext highlighter-rouge">25%</code>, <code class="language-plaintext highlighter-rouge">50%</code>, <code class="language-plaintext highlighter-rouge">75%</code>, <code class="language-plaintext highlighter-rouge">100%</code>, and <code class="language-plaintext highlighter-rouge">auto</code> by default. Modify those values as you need to generate different utilities here.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
|
||||
@@ -513,7 +517,7 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"h-auto d-inline-block"</span> <span class="na">style=</span><span class="s">"width: 120px; background-color: rgba(0,0,255,.1)"</span><span class="nt">></span>Height auto<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>You can also use <code class="highlighter-rouge">max-width: 100%;</code> and <code class="highlighter-rouge">max-height: 100%;</code> utilities as needed.</p>
|
||||
<p>You can also use <code class="language-plaintext highlighter-rouge">max-width: 100%;</code> and <code class="language-plaintext highlighter-rouge">max-height: 100%;</code> utilities as needed.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<svg class="bd-placeholder-img mw-100" width="100%" height="100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Max-width 100%"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Max-width 100%</text></svg>
|
||||
@@ -544,6 +548,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/spacing/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -481,52 +482,55 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Spacing</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/spacing.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Spacing</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
|
||||
<p>Assign responsive-friendly <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">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 class="highlighter-rouge">.25rem</code> to <code class="highlighter-rouge">3rem</code>.</p>
|
||||
<p>Assign responsive-friendly <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">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 class="language-plaintext highlighter-rouge">.25rem</code> to <code class="language-plaintext highlighter-rouge">3rem</code>.</p>
|
||||
|
||||
<h2 id="notation">Notation</h2>
|
||||
|
||||
<p>Spacing utilities that apply to all breakpoints, from <code class="highlighter-rouge">xs</code> to <code class="highlighter-rouge">xl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code class="highlighter-rouge">min-width: 0</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
|
||||
<p>Spacing utilities that apply to all breakpoints, from <code class="language-plaintext highlighter-rouge">xs</code> to <code class="language-plaintext highlighter-rouge">xl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code class="language-plaintext highlighter-rouge">min-width: 0</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
|
||||
|
||||
<p>The classes are named using the format <code class="highlighter-rouge">{property}{sides}-{size}</code> for <code class="highlighter-rouge">xs</code> and <code class="highlighter-rouge">{property}{sides}-{breakpoint}-{size}</code> for <code class="highlighter-rouge">sm</code>, <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, and <code class="highlighter-rouge">xl</code>.</p>
|
||||
<p>The classes are named using the format <code class="language-plaintext highlighter-rouge">{property}{sides}-{size}</code> for <code class="language-plaintext highlighter-rouge">xs</code> and <code class="language-plaintext highlighter-rouge">{property}{sides}-{breakpoint}-{size}</code> for <code class="language-plaintext highlighter-rouge">sm</code>, <code class="language-plaintext highlighter-rouge">md</code>, <code class="language-plaintext highlighter-rouge">lg</code>, and <code class="language-plaintext highlighter-rouge">xl</code>.</p>
|
||||
|
||||
<p>Where <em>property</em> is one of:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">m</code> - for classes that set <code class="highlighter-rouge">margin</code></li>
|
||||
<li><code class="highlighter-rouge">p</code> - for classes that set <code class="highlighter-rouge">padding</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">m</code> - for classes that set <code class="language-plaintext highlighter-rouge">margin</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">p</code> - for classes that set <code class="language-plaintext highlighter-rouge">padding</code></li>
|
||||
</ul>
|
||||
|
||||
<p>Where <em>sides</em> is one of:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">t</code> - for classes that set <code class="highlighter-rouge">margin-top</code> or <code class="highlighter-rouge">padding-top</code></li>
|
||||
<li><code class="highlighter-rouge">b</code> - for classes that set <code class="highlighter-rouge">margin-bottom</code> or <code class="highlighter-rouge">padding-bottom</code></li>
|
||||
<li><code class="highlighter-rouge">l</code> - for classes that set <code class="highlighter-rouge">margin-left</code> or <code class="highlighter-rouge">padding-left</code></li>
|
||||
<li><code class="highlighter-rouge">r</code> - for classes that set <code class="highlighter-rouge">margin-right</code> or <code class="highlighter-rouge">padding-right</code></li>
|
||||
<li><code class="highlighter-rouge">x</code> - for classes that set both <code class="highlighter-rouge">*-left</code> and <code class="highlighter-rouge">*-right</code></li>
|
||||
<li><code class="highlighter-rouge">y</code> - for classes that set both <code class="highlighter-rouge">*-top</code> and <code class="highlighter-rouge">*-bottom</code></li>
|
||||
<li>blank - for classes that set a <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> on all 4 sides of the element</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">t</code> - for classes that set <code class="language-plaintext highlighter-rouge">margin-top</code> or <code class="language-plaintext highlighter-rouge">padding-top</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">b</code> - for classes that set <code class="language-plaintext highlighter-rouge">margin-bottom</code> or <code class="language-plaintext highlighter-rouge">padding-bottom</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">l</code> - for classes that set <code class="language-plaintext highlighter-rouge">margin-left</code> or <code class="language-plaintext highlighter-rouge">padding-left</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">r</code> - for classes that set <code class="language-plaintext highlighter-rouge">margin-right</code> or <code class="language-plaintext highlighter-rouge">padding-right</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">x</code> - for classes that set both <code class="language-plaintext highlighter-rouge">*-left</code> and <code class="language-plaintext highlighter-rouge">*-right</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">y</code> - for classes that set both <code class="language-plaintext highlighter-rouge">*-top</code> and <code class="language-plaintext highlighter-rouge">*-bottom</code></li>
|
||||
<li>blank - for classes that set a <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> on all 4 sides of the element</li>
|
||||
</ul>
|
||||
|
||||
<p>Where <em>size</em> is one of:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">0</code> - for classes that eliminate the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> by setting it to <code class="highlighter-rouge">0</code></li>
|
||||
<li><code class="highlighter-rouge">1</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer * .25</code></li>
|
||||
<li><code class="highlighter-rouge">2</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer * .5</code></li>
|
||||
<li><code class="highlighter-rouge">3</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer</code></li>
|
||||
<li><code class="highlighter-rouge">4</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer * 1.5</code></li>
|
||||
<li><code class="highlighter-rouge">5</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer * 3</code></li>
|
||||
<li><code class="highlighter-rouge">auto</code> - for classes that set the <code class="highlighter-rouge">margin</code> to auto</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">0</code> - for classes that eliminate the <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> by setting it to <code class="language-plaintext highlighter-rouge">0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">1</code> - (by default) for classes that set the <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> to <code class="language-plaintext highlighter-rouge">$spacer * .25</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">2</code> - (by default) for classes that set the <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> to <code class="language-plaintext highlighter-rouge">$spacer * .5</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">3</code> - (by default) for classes that set the <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> to <code class="language-plaintext highlighter-rouge">$spacer</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">4</code> - (by default) for classes that set the <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> to <code class="language-plaintext highlighter-rouge">$spacer * 1.5</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">5</code> - (by default) for classes that set the <code class="language-plaintext highlighter-rouge">margin</code> or <code class="language-plaintext highlighter-rouge">padding</code> to <code class="language-plaintext highlighter-rouge">$spacer * 3</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">auto</code> - for classes that set the <code class="language-plaintext highlighter-rouge">margin</code> to auto</li>
|
||||
</ul>
|
||||
|
||||
<p>(You can add more sizes by adding entries to the <code class="highlighter-rouge">$spacers</code> Sass map variable.)</p>
|
||||
<p>(You can add more sizes by adding entries to the <code class="language-plaintext highlighter-rouge">$spacers</code> Sass map variable.)</p>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
@@ -551,7 +555,7 @@
|
||||
|
||||
<h3 id="horizontal-centering">Horizontal centering</h3>
|
||||
|
||||
<p>Additionally, Bootstrap also includes an <code class="highlighter-rouge">.mx-auto</code> class for horizontally centering fixed-width block level content—that is, content that has <code class="highlighter-rouge">display: block</code> and a <code class="highlighter-rouge">width</code> set—by setting the horizontal margins to <code class="highlighter-rouge">auto</code>.</p>
|
||||
<p>Additionally, Bootstrap also includes an <code class="language-plaintext highlighter-rouge">.mx-auto</code> class for horizontally centering fixed-width block level content—that is, content that has <code class="language-plaintext highlighter-rouge">display: block</code> and a <code class="language-plaintext highlighter-rouge">width</code> set—by setting the horizontal margins to <code class="language-plaintext highlighter-rouge">auto</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
|
||||
@@ -565,15 +569,15 @@
|
||||
|
||||
<h3 id="negative-margin">Negative margin</h3>
|
||||
|
||||
<p>In CSS, <code class="highlighter-rouge">margin</code> properties can utilize negative values (<code class="highlighter-rouge">padding</code> cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., <code class="highlighter-rouge">1</code>, <code class="highlighter-rouge">2</code>, <code class="highlighter-rouge">3</code>, <code class="highlighter-rouge">4</code>, <code class="highlighter-rouge">5</code>). These utilities are ideal for customizing grid column gutters across breakpoints.</p>
|
||||
<p>In CSS, <code class="language-plaintext highlighter-rouge">margin</code> properties can utilize negative values (<code class="language-plaintext highlighter-rouge">padding</code> cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., <code class="language-plaintext highlighter-rouge">1</code>, <code class="language-plaintext highlighter-rouge">2</code>, <code class="language-plaintext highlighter-rouge">3</code>, <code class="language-plaintext highlighter-rouge">4</code>, <code class="language-plaintext highlighter-rouge">5</code>). These utilities are ideal for customizing grid column gutters across breakpoints.</p>
|
||||
|
||||
<p>The syntax is nearly the same as the default, positive margin utilities, but with the addition of <code class="highlighter-rouge">n</code> before the requested size. Here’s an example class that’s the opposite of <code class="highlighter-rouge">.mt-1</code>:</p>
|
||||
<p>The syntax is nearly the same as the default, positive margin utilities, but with the addition of <code class="language-plaintext highlighter-rouge">n</code> before the requested size. Here’s an example class that’s the opposite of <code class="language-plaintext highlighter-rouge">.mt-1</code>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.mt-n1</span> <span class="p">{</span>
|
||||
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">-0</span><span class="mi">.25rem</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>Here’s an example of customizing the Bootstrap grid at the medium (<code class="highlighter-rouge">md</code>) breakpoint and above. We’ve increased the <code class="highlighter-rouge">.col</code> padding with <code class="highlighter-rouge">.px-md-5</code> and then counteracted that with <code class="highlighter-rouge">.mx-md-n5</code> on the parent <code class="highlighter-rouge">.row</code>.</p>
|
||||
<p>Here’s an example of customizing the Bootstrap grid at the medium (<code class="language-plaintext highlighter-rouge">md</code>) breakpoint and above. We’ve increased the <code class="language-plaintext highlighter-rouge">.col</code> padding with <code class="language-plaintext highlighter-rouge">.px-md-5</code> and then counteracted that with <code class="language-plaintext highlighter-rouge">.mx-md-n5</code> on the parent <code class="language-plaintext highlighter-rouge">.row</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row mx-md-n5">
|
||||
@@ -592,6 +596,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/stretched-link/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -468,15 +469,18 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Stretched link</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/stretched-link.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Stretched link</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.stretched-link</code> to a link to make its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block">containing block</a> clickable via a <code class="highlighter-rouge">::after</code> pseudo element. In most cases, this means that an element with <code class="highlighter-rouge">position: relative;</code> that contains a link with the <code class="highlighter-rouge">.stretched-link</code> class is clickable.</p>
|
||||
<p>Add <code class="language-plaintext highlighter-rouge">.stretched-link</code> to a link to make its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block">containing block</a> clickable via a <code class="language-plaintext highlighter-rouge">::after</code> pseudo element. In most cases, this means that an element with <code class="language-plaintext highlighter-rouge">position: relative;</code> that contains a link with the <code class="language-plaintext highlighter-rouge">.stretched-link</code> class is clickable.</p>
|
||||
|
||||
<p>Cards have <code class="highlighter-rouge">position: relative</code> by default in Bootstrap, so in this case you can safely add the <code class="highlighter-rouge">.stretched-link</code> class to a link in the card without any other HTML changes.</p>
|
||||
<p>Cards have <code class="language-plaintext highlighter-rouge">position: relative</code> by default in Bootstrap, so in this case you can safely add the <code class="language-plaintext highlighter-rouge">.stretched-link</code> class to a link in the card without any other HTML changes.</p>
|
||||
|
||||
<p>Multiple links and tap targets are not recommended with stretched links. However, some <code class="highlighter-rouge">position</code> and <code class="highlighter-rouge">z-index</code> styles can help should this be required.</p>
|
||||
<p>Multiple links and tap targets are not recommended with stretched links. However, some <code class="language-plaintext highlighter-rouge">position</code> and <code class="language-plaintext highlighter-rouge">z-index</code> styles can help should this be required.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card" style="width: 18rem;">
|
||||
@@ -497,7 +501,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Media objects do not have <code class="highlighter-rouge">position: relative</code> by default, so we need to add the <code class="highlighter-rouge">.position-relative</code> here to prevent the link from stretching outside the media object.</p>
|
||||
<p>Media objects do not have <code class="language-plaintext highlighter-rouge">position: relative</code> by default, so we need to add the <code class="language-plaintext highlighter-rouge">.position-relative</code> here to prevent the link from stretching outside the media object.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media position-relative">
|
||||
@@ -518,7 +522,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Columns are <code class="highlighter-rouge">position: relative</code> by default, so clickable columns only require the <code class="highlighter-rouge">.stretched-link</code> class on a link. However, stretching a link over an entire <code class="highlighter-rouge">.row</code> requires <code class="highlighter-rouge">.position-static</code> on the column and <code class="highlighter-rouge">.position-relative</code> on the row.</p>
|
||||
<p>Columns are <code class="language-plaintext highlighter-rouge">position: relative</code> by default, so clickable columns only require the <code class="language-plaintext highlighter-rouge">.stretched-link</code> class on a link. However, stretching a link over an entire <code class="language-plaintext highlighter-rouge">.row</code> requires <code class="language-plaintext highlighter-rouge">.position-static</code> on the column and <code class="language-plaintext highlighter-rouge">.position-relative</code> on the row.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row no-gutters bg-light position-relative">
|
||||
@@ -548,10 +552,10 @@
|
||||
<p>If the stretched link doesn’t seem to work, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block">containing block</a> will probably be the cause. The following CSS properties will make an element the containing block:</p>
|
||||
|
||||
<ul>
|
||||
<li>A <code class="highlighter-rouge">position</code> value other than <code class="highlighter-rouge">static</code></li>
|
||||
<li>A <code class="highlighter-rouge">transform</code> or <code class="highlighter-rouge">perspective</code> value other than <code class="highlighter-rouge">none</code></li>
|
||||
<li>A <code class="highlighter-rouge">will-change</code> value of <code class="highlighter-rouge">transform</code> or <code class="highlighter-rouge">perspective</code></li>
|
||||
<li>A <code class="highlighter-rouge">filter</code> value other than <code class="highlighter-rouge">none</code> or a <code class="highlighter-rouge">will-change</code> value of <code class="highlighter-rouge">filter</code> (only works on Firefox)</li>
|
||||
<li>A <code class="language-plaintext highlighter-rouge">position</code> value other than <code class="language-plaintext highlighter-rouge">static</code></li>
|
||||
<li>A <code class="language-plaintext highlighter-rouge">transform</code> or <code class="language-plaintext highlighter-rouge">perspective</code> value other than <code class="language-plaintext highlighter-rouge">none</code></li>
|
||||
<li>A <code class="language-plaintext highlighter-rouge">will-change</code> value of <code class="language-plaintext highlighter-rouge">transform</code> or <code class="language-plaintext highlighter-rouge">perspective</code></li>
|
||||
<li>A <code class="language-plaintext highlighter-rouge">filter</code> value other than <code class="language-plaintext highlighter-rouge">none</code> or a <code class="language-plaintext highlighter-rouge">will-change</code> value of <code class="language-plaintext highlighter-rouge">filter</code> (only works on Firefox)</li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-example">
|
||||
@@ -589,6 +593,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/text/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -481,7 +482,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Text</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/text.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Text</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@@ -517,7 +521,7 @@
|
||||
|
||||
<h2 id="text-wrapping-and-overflow">Text wrapping and overflow</h2>
|
||||
|
||||
<p>Wrap text with a <code class="highlighter-rouge">.text-wrap</code> class.</p>
|
||||
<p>Wrap text with a <code class="language-plaintext highlighter-rouge">.text-wrap</code> class.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="badge badge-primary text-wrap" style="width: 6rem;">
|
||||
@@ -528,7 +532,7 @@
|
||||
This text should wrap.
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Prevent text from wrapping with a <code class="highlighter-rouge">.text-nowrap</code> class.</p>
|
||||
<p>Prevent text from wrapping with a <code class="language-plaintext highlighter-rouge">.text-nowrap</code> class.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="text-nowrap bd-highlight" style="width: 8rem;">
|
||||
@@ -539,7 +543,7 @@
|
||||
This text should overflow the parent.
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>For longer content, you can add a <code class="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis. <strong>Requires <code class="highlighter-rouge">display: inline-block</code> or <code class="highlighter-rouge">display: block</code>.</strong></p>
|
||||
<p>For longer content, you can add a <code class="language-plaintext highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis. <strong>Requires <code class="language-plaintext highlighter-rouge">display: inline-block</code> or <code class="language-plaintext highlighter-rouge">display: block</code>.</strong></p>
|
||||
|
||||
<div class="bd-example">
|
||||
<!-- Block level -->
|
||||
@@ -568,7 +572,7 @@
|
||||
|
||||
<h2 id="word-break">Word break</h2>
|
||||
|
||||
<p>Prevent long strings of text from breaking your components’ layout by using <code class="highlighter-rouge">.text-break</code> to set <code class="highlighter-rouge">word-wrap: break-word</code>.</p>
|
||||
<p>Prevent long strings of text from breaking your components’ layout by using <code class="language-plaintext highlighter-rouge">.text-break</code> to set <code class="language-plaintext highlighter-rouge">word-wrap: break-word</code> and <code class="language-plaintext highlighter-rouge">word-break: break-word</code>. We use <code class="language-plaintext highlighter-rouge">word-wrap</code> instead of the more common <code class="language-plaintext highlighter-rouge">overflow-wrap</code> for wider browser support, and add the deprecated <code class="language-plaintext highlighter-rouge">word-break: break-word</code> to avoid issues with flex containers.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
|
||||
@@ -588,7 +592,7 @@
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-uppercase"</span><span class="nt">></span>Uppercased text.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-capitalize"</span><span class="nt">></span>CapiTaliZed text.<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<p>Note how <code class="highlighter-rouge">.text-capitalize</code> only changes the first letter of each word, leaving the case of any other letters unaffected.</p>
|
||||
<p>Note how <code class="language-plaintext highlighter-rouge">.text-capitalize</code> only changes the first letter of each word, leaving the case of any other letters unaffected.</p>
|
||||
|
||||
<h2 id="font-weight-and-italics">Font weight and italics</h2>
|
||||
|
||||
@@ -611,7 +615,7 @@
|
||||
|
||||
<h2 id="monospace">Monospace</h2>
|
||||
|
||||
<p>Change a selection to our monospace font stack with <code class="highlighter-rouge">.text-monospace</code>.</p>
|
||||
<p>Change a selection to our monospace font stack with <code class="language-plaintext highlighter-rouge">.text-monospace</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p class="text-monospace">This is in monospace</p>
|
||||
@@ -620,7 +624,7 @@
|
||||
|
||||
<h2 id="reset-color">Reset color</h2>
|
||||
|
||||
<p>Reset a text or link’s color with <code class="highlighter-rouge">.text-reset</code>, so that it inherits the color from its parent.</p>
|
||||
<p>Reset a text or link’s color with <code class="language-plaintext highlighter-rouge">.text-reset</code>, so that it inherits the color from its parent.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p class="text-muted">
|
||||
@@ -633,7 +637,7 @@
|
||||
|
||||
<h2 id="text-decoration">Text decoration</h2>
|
||||
|
||||
<p>Remove a text decoration with a <code class="highlighter-rouge">.text-decoration-none</code> class.</p>
|
||||
<p>Remove a text decoration with a <code class="language-plaintext highlighter-rouge">.text-decoration-none</code> class.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<a href="#" class="text-decoration-none">Non-underlined link</a>
|
||||
@@ -646,6 +650,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/vertical-align/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -468,13 +469,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Vertical alignment</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/vertical-align.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Vertical alignment</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code class="highlighter-rouge">vertical-alignment</code></a> utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.</p>
|
||||
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code class="language-plaintext highlighter-rouge">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 class="highlighter-rouge">.align-baseline</code>, <code class="highlighter-rouge">.align-top</code>, <code class="highlighter-rouge">.align-middle</code>, <code class="highlighter-rouge">.align-bottom</code>, <code class="highlighter-rouge">.align-text-bottom</code>, and <code class="highlighter-rouge">.align-text-top</code> as needed.</p>
|
||||
<p>Choose from <code class="language-plaintext highlighter-rouge">.align-baseline</code>, <code class="language-plaintext highlighter-rouge">.align-top</code>, <code class="language-plaintext highlighter-rouge">.align-middle</code>, <code class="language-plaintext highlighter-rouge">.align-bottom</code>, <code class="language-plaintext highlighter-rouge">.align-text-bottom</code>, and <code class="language-plaintext highlighter-rouge">.align-text-top</code> as needed.</p>
|
||||
|
||||
<p>With inline elements:</p>
|
||||
|
||||
@@ -528,6 +532,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Control the visibility, without modifying the display, of elements with visibility utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/visibility/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -468,13 +469,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Visibility</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/visibility.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Visibility</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Control the visibility, without modifying the display, of elements with visibility utilities.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Set the <code class="highlighter-rouge">visibility</code> of elements with our visibility utilities. These utility classes do not modify the <code class="highlighter-rouge">display</code> value at all and do not affect layout – <code class="highlighter-rouge">.invisible</code> elements still take up space in the page. Content will be hidden both visually and for assistive technology/screen reader users.</p>
|
||||
<p>Set the <code class="language-plaintext highlighter-rouge">visibility</code> of elements with our visibility utilities. These utility classes do not modify the <code class="language-plaintext highlighter-rouge">display</code> value at all and do not affect layout – <code class="language-plaintext highlighter-rouge">.invisible</code> elements still take up space in the page. Content will be hidden both visually and for assistive technology/screen reader users.</p>
|
||||
|
||||
<p>Apply <code class="highlighter-rouge">.visible</code> or <code class="highlighter-rouge">.invisible</code> as needed.</p>
|
||||
<p>Apply <code class="language-plaintext highlighter-rouge">.visible</code> or <code class="language-plaintext highlighter-rouge">.invisible</code> as needed.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"visible"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invisible"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
@@ -502,6 +506,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user