mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-28 15:50:01 +02:00
Add v4.6.2 docs (#36726)
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="Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.88.1">
|
||||
<meta name="generator" content="Hugo 0.101.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.6">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
|
||||
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
|
||||
<!-- Documentation extras -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -105,10 +105,10 @@
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false">
|
||||
v4.6
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Bootstrap </span> v4.6 <span class="sr-only">(switch to other versions)</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-md-right">
|
||||
<a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/">5.1.x</a>
|
||||
@@ -273,7 +273,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
@@ -295,7 +295,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
@@ -309,10 +309,10 @@
|
||||
<p>Apply <code>display</code> utilities to create a flexbox container and transform <strong>direct children elements</strong> into flex items. Flex containers and items are able to be modified further with additional flex properties.</p>
|
||||
<div class="bd-example">
|
||||
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex p-2 bd-highlight"</span><span class="p">></span>I'm a flexbox container!<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex p-2 bd-highlight"</span><span class="p">></span>I'm a flexbox container!<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div>
|
||||
<div class="bd-example">
|
||||
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-inline-flex p-2 bd-highlight"</span><span class="p">></span>I'm an inline flexbox container!<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-inline-flex p-2 bd-highlight"</span><span class="p">></span>I'm an inline flexbox container!<span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div>
|
||||
<p>Responsive variations also exist for <code>.d-flex</code> and <code>.d-inline-flex</code>.</p>
|
||||
<ul>
|
||||
<li><code>.d-flex</code></li>
|
||||
@@ -341,16 +341,16 @@
|
||||
<div class="p-2 bd-highlight">Flex item 2</div>
|
||||
<div class="p-2 bd-highlight">Flex item 3</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-row bd-highlight mb-3"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 1<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 2<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 3<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-row-reverse bd-highlight"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 1<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 2<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 3<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-row bd-highlight mb-3"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 1<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 2<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 3<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-row-reverse bd-highlight"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 1<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 2<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 3<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div>
|
||||
<p>Use <code>.flex-column</code> to set a vertical direction, or <code>.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">
|
||||
@@ -363,16 +363,16 @@
|
||||
<div class="p-2 bd-highlight">Flex item 2</div>
|
||||
<div class="p-2 bd-highlight">Flex item 3</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-column bd-highlight mb-3"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 1<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 2<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 3<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-column-reverse bd-highlight"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 1<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 2<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 3<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-column bd-highlight mb-3"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 1<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 2<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 3<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-column-reverse bd-highlight"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 1<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 2<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item 3<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div>
|
||||
<p>Responsive variations also exist for <code>flex-direction</code>.</p>
|
||||
<ul>
|
||||
<li><code>.flex-row</code></li>
|
||||
@@ -426,12 +426,12 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-start"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-end"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-center"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-between"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-around"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><p>Responsive variations also exist for <code>justify-content</code>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-start"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-end"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-center"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-between"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex justify-content-around"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p>Responsive variations also exist for <code>justify-content</code>.</p>
|
||||
<ul>
|
||||
<li><code>.justify-content-start</code></li>
|
||||
<li><code>.justify-content-end</code></li>
|
||||
@@ -489,12 +489,12 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-start"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-end"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-center"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-baseline"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-stretch"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><p>Responsive variations also exist for <code>align-items</code>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-start"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-end"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-center"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-baseline"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-stretch"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p>Responsive variations also exist for <code>align-items</code>.</p>
|
||||
<ul>
|
||||
<li><code>.align-items-start</code></li>
|
||||
<li><code>.align-items-end</code></li>
|
||||
@@ -552,12 +552,12 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-self-start"</span><span class="p">></span>Aligned flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-self-end"</span><span class="p">></span>Aligned flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-self-center"</span><span class="p">></span>Aligned flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-self-baseline"</span><span class="p">></span>Aligned flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-self-stretch"</span><span class="p">></span>Aligned flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><p>Responsive variations also exist for <code>align-self</code>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-self-start"</span><span class="p">></span>Aligned flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-self-end"</span><span class="p">></span>Aligned flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-self-center"</span><span class="p">></span>Aligned flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-self-baseline"</span><span class="p">></span>Aligned flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"align-self-stretch"</span><span class="p">></span>Aligned flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p>Responsive variations also exist for <code>align-self</code>.</p>
|
||||
<ul>
|
||||
<li><code>.align-self-start</code></li>
|
||||
<li><code>.align-self-end</code></li>
|
||||
@@ -594,11 +594,11 @@
|
||||
<div class="p-2 flex-fill bd-highlight">Flex item</div>
|
||||
<div class="p-2 flex-fill bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex bd-highlight"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 flex-fill bd-highlight"</span><span class="p">></span>Flex item with a lot of content<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 flex-fill bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 flex-fill bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex bd-highlight"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 flex-fill bd-highlight"</span><span class="p">></span>Flex item with a lot of content<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 flex-fill bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 flex-fill bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div>
|
||||
<p>Responsive variations also exist for <code>flex-fill</code>.</p>
|
||||
<ul>
|
||||
<li><code>.flex-fill</code></li>
|
||||
@@ -616,21 +616,21 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Third flex item</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex bd-highlight"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 flex-grow-1 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Third flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex bd-highlight"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 flex-grow-1 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Third flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div>
|
||||
<p>Use <code>.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>.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>.w-100</code>.</p>
|
||||
<div class="bd-example">
|
||||
<div class="d-flex bd-highlight">
|
||||
<div class="p-2 w-100 bd-highlight">Flex item</div>
|
||||
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex bd-highlight"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 w-100 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 flex-shrink-1 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex bd-highlight"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 w-100 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 flex-shrink-1 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div>
|
||||
<p>Responsive variations also exist for <code>flex-grow</code> and <code>flex-shrink</code>.</p>
|
||||
<ul>
|
||||
<li><code>.flex-{grow|shrink}-0</code></li>
|
||||
@@ -666,23 +666,23 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="ml-auto p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex bd-highlight mb-3"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex bd-highlight mb-3"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex bd-highlight mb-3"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"ml-auto p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex bd-highlight mb-3"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex bd-highlight mb-3"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mr-auto p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex bd-highlight mb-3"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"ml-auto p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div>
|
||||
<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>align-items</code>, <code>flex-direction: column</code>, and <code>margin-top: auto</code> or <code>margin-bottom: auto</code>.</p>
|
||||
<div class="bd-example">
|
||||
@@ -697,17 +697,17 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="mt-auto p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-start flex-column bd-highlight mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px;"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-auto p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-end flex-column bd-highlight mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px;"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mt-auto p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-start flex-column bd-highlight mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px;"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-auto p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-items-end flex-column bd-highlight mb-3"</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px;"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mt-auto p-2 bd-highlight"</span><span class="p">></span>Flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div>
|
||||
<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>.flex-nowrap</code>, wrapping with <code>.flex-wrap</code>, or reverse wrapping with <code>.flex-wrap-reverse</code>.</p>
|
||||
<div class="bd-example">
|
||||
@@ -719,10 +719,10 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-nowrap"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><div class="bd-example">
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-nowrap"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> ...
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><div class="bd-example">
|
||||
<div class="d-flex flex-wrap bd-highlight">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
@@ -741,10 +741,10 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-wrap"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><div class="bd-example">
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-wrap"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> ...
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><div class="bd-example">
|
||||
<div class="d-flex flex-wrap-reverse bd-highlight">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
@@ -763,10 +763,10 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-wrap-reverse"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><p>Responsive variations also exist for <code>flex-wrap</code>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-wrap-reverse"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> ...
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p>Responsive variations also exist for <code>flex-wrap</code>.</p>
|
||||
<ul>
|
||||
<li><code>.flex-nowrap</code></li>
|
||||
<li><code>.flex-wrap</code></li>
|
||||
@@ -793,11 +793,11 @@
|
||||
<div class="order-2 p-2 bd-highlight">Second flex item</div>
|
||||
<div class="order-1 p-2 bd-highlight">Third flex item</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-nowrap bd-highlight"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"order-3 p-2 bd-highlight"</span><span class="p">></span>First flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"order-2 p-2 bd-highlight"</span><span class="p">></span>Second flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"order-1 p-2 bd-highlight"</span><span class="p">></span>Third flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex flex-nowrap bd-highlight"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"order-3 p-2 bd-highlight"</span><span class="p">></span>First flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"order-2 p-2 bd-highlight"</span><span class="p">></span>Second flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"order-1 p-2 bd-highlight"</span><span class="p">></span>Third flex item<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div>
|
||||
<p>Responsive variations also exist for <code>order</code>.</p>
|
||||
<ul>
|
||||
<li><code>.order-0</code></li>
|
||||
@@ -889,10 +889,10 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-content-start flex-wrap"</span><span class="p">></span>
|
||||
...
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><div class="bd-example">
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-content-start flex-wrap"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> ...
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><div class="bd-example">
|
||||
<div class="d-flex align-content-end flex-wrap bd-highlight mb-3" style="height: 200px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
@@ -911,8 +911,8 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-content-end flex-wrap"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><div class="bd-example">
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-content-end flex-wrap"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><div class="bd-example">
|
||||
<div class="d-flex align-content-center flex-wrap bd-highlight mb-3" style="height: 200px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
@@ -931,8 +931,8 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-content-center flex-wrap"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><div class="bd-example">
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-content-center flex-wrap"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><div class="bd-example">
|
||||
<div class="d-flex align-content-between flex-wrap bd-highlight mb-3" style="height: 200px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
@@ -951,8 +951,8 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-content-between flex-wrap"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><div class="bd-example">
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-content-between flex-wrap"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><div class="bd-example">
|
||||
<div class="d-flex align-content-around flex-wrap bd-highlight mb-3" style="height: 200px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
@@ -971,8 +971,8 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-content-around flex-wrap"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><div class="bd-example">
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-content-around flex-wrap"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><div class="bd-example">
|
||||
<div class="d-flex align-content-stretch flex-wrap bd-highlight mb-3" style="height: 200px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
@@ -991,32 +991,37 @@
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-content-stretch flex-wrap"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div><p>Responsive variations also exist for <code>align-content</code>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"d-flex align-content-stretch flex-wrap"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p>Responsive variations also exist for <code>align-content</code>.</p>
|
||||
<ul>
|
||||
<li><code>.align-content-start</code></li>
|
||||
<li><code>.align-content-end</code></li>
|
||||
<li><code>.align-content-center</code></li>
|
||||
<li><code>.align-content-between</code></li>
|
||||
<li><code>.align-content-around</code></li>
|
||||
<li><code>.align-content-stretch</code></li>
|
||||
<li><code>.align-content-sm-start</code></li>
|
||||
<li><code>.align-content-sm-end</code></li>
|
||||
<li><code>.align-content-sm-center</code></li>
|
||||
<li><code>.align-content-sm-between</code></li>
|
||||
<li><code>.align-content-sm-around</code></li>
|
||||
<li><code>.align-content-sm-stretch</code></li>
|
||||
<li><code>.align-content-md-start</code></li>
|
||||
<li><code>.align-content-md-end</code></li>
|
||||
<li><code>.align-content-md-center</code></li>
|
||||
<li><code>.align-content-md-between</code></li>
|
||||
<li><code>.align-content-md-around</code></li>
|
||||
<li><code>.align-content-md-stretch</code></li>
|
||||
<li><code>.align-content-lg-start</code></li>
|
||||
<li><code>.align-content-lg-end</code></li>
|
||||
<li><code>.align-content-lg-center</code></li>
|
||||
<li><code>.align-content-lg-between</code></li>
|
||||
<li><code>.align-content-lg-around</code></li>
|
||||
<li><code>.align-content-lg-stretch</code></li>
|
||||
<li><code>.align-content-xl-start</code></li>
|
||||
<li><code>.align-content-xl-end</code></li>
|
||||
<li><code>.align-content-xl-center</code></li>
|
||||
<li><code>.align-content-xl-between</code></li>
|
||||
<li><code>.align-content-xl-around</code></li>
|
||||
<li><code>.align-content-xl-stretch</code></li>
|
||||
</ul>
|
||||
@@ -1029,7 +1034,7 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
|
||||
|
||||
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
|
||||
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user