Created
December 1, 2020 19:07
-
-
Save jeffdrumgod/e23ecfa3d2da2dddf76664568b0e036c to your computer and use it in GitHub Desktop.
modelo-html-bootstrap.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="stylesheet" href="https://getbootstrap.com/docs/4.5/assets/css/docs.min.css"> | |
| <div class="container"> | |
| <main class="bd-content" role="main"> | |
| <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" title="" target="_blank" rel="noopener"></a> | |
| <h1 class="bd-title" id="content">Dior - Digital Typography Guidelines</h1> | |
| </div> | |
| <h2 id="dior-headings"><span class="bd-content-title">Headings<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#headings" style="padding-left: 0.375em;"></a></span></h2> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Tag</th> | |
| <th>Example</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><h1 | |
| class="dior-text-H-XL"></h1></code></p> | |
| </td> | |
| <td><span class="dior-text-H-XL">DIOR H-XL EDITORIAL TITLE</span></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><h2 class="dior-text-H-L"></h2></code> | |
| </p> | |
| </td> | |
| <td><span class="dior-text-H-L">DIOR H-L - HEADING LEVEL 1</span></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><h3 class="dior-text-H-M"></h3></code> | |
| </p> | |
| </td> | |
| <td><span class="dior-text-H-M">DIOR D-M HEADER LEVEL 2</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h2 id="dior-subheadings"><span class="bd-content-title">Sub headings / Subtitle<a class="anchorjs-link " | |
| aria-label="Anchor" data-anchorjs-icon="#" href="#headings" style="padding-left: 0.375em;"></a></span> | |
| </h2> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Tag</th> | |
| <th>Example</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><p class="dior-text-SB"></p></code> | |
| </p> | |
| </td> | |
| <td><span class="dior-text-SB">Dior Subhead subtitle</span></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><p class="dior-text-B"></p></code></p> | |
| </td> | |
| <td><span class="dior-text-B">Dior body text</span></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><p class="dior-text-BB"></p></code></p> | |
| </td> | |
| <td><span class="dior-text-BB">Dior body text bold</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h2 id="dior-captions"><span class="bd-content-title">Captions<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#headings" style="padding-left: 0.375em;"></a></span></h2> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Tag</th> | |
| <th>Example</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><p class="dior-text-C"></p></code></p> | |
| </td> | |
| <td><span class="dior-text-C">Dior text caption</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </main> | |
| </div> | |
| <hr class="mt-5 mb-5" /> | |
| <div class="container"> | |
| <main class="bd-content" role="main"> | |
| <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/blob/v4-dev/site/docs/4.5/content/typography.md" | |
| title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a> | |
| <h1 class="bd-title" id="content">Bootstrap Typography</h1> | |
| </div> | |
| <p class="bd-lead">Documentation and examples for Bootstrap typography, including global settings, headings, | |
| body text, lists, and more.</p> | |
| <h2 id="headings"><span class="bd-content-title">Headings<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#headings" style="padding-left: 0.375em;"></a></span></h2> | |
| <p>All HTML headings, <code class="language-plaintext highlighter-rouge"><h1></code> through <code | |
| class="language-plaintext highlighter-rouge"><h6></code>, are available.</p> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Heading</th> | |
| <th>Example</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><h1></h1></code></p> | |
| </td> | |
| <td><span class="h1">h1. Bootstrap heading</span></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><h2></h2></code></p> | |
| </td> | |
| <td><span class="h2">h2. Bootstrap heading</span></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><h3></h3></code></p> | |
| </td> | |
| <td><span class="h3">h3. Bootstrap heading</span></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><h4></h4></code></p> | |
| </td> | |
| <td><span class="h4">h4. Bootstrap heading</span></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><h5></h5></code></p> | |
| </td> | |
| <td><span class="h5">h5. Bootstrap heading</span></td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <p><code class="language-plaintext highlighter-rouge"><h6></h6></code></p> | |
| </td> | |
| <td><span class="h6">h6. Bootstrap heading</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><h1></span>h1. Bootstrap heading<span class="nt"></h1></span> | |
| <span class="nt"><h2></span>h2. Bootstrap heading<span class="nt"></h2></span> | |
| <span class="nt"><h3></span>h3. Bootstrap heading<span class="nt"></h3></span> | |
| <span class="nt"><h4></span>h4. Bootstrap heading<span class="nt"></h4></span> | |
| <span class="nt"><h5></span>h5. Bootstrap heading<span class="nt"></h5></span> | |
| <span class="nt"><h6></span>h6. Bootstrap heading<span class="nt"></h6></span></code></pre> | |
| </figure> | |
| <p><code class="language-plaintext highlighter-rouge">.h1</code> through <code | |
| class="language-plaintext highlighter-rouge">.h6</code> classes are also available, for when you want to | |
| match the font styling of a heading but cannot use the associated HTML element.</p> | |
| <div class="bd-example"> | |
| <p class="h1">h1. Bootstrap heading</p> | |
| <p class="h2">h2. Bootstrap heading</p> | |
| <p class="h3">h3. Bootstrap heading</p> | |
| <p class="h4">h4. Bootstrap heading</p> | |
| <p class="h5">h5. Bootstrap heading</p> | |
| <p class="h6">h6. Bootstrap heading</p> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"h1"</span><span class="nt">></span>h1. Bootstrap heading<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"h2"</span><span class="nt">></span>h2. Bootstrap heading<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"h3"</span><span class="nt">></span>h3. Bootstrap heading<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"h4"</span><span class="nt">></span>h4. Bootstrap heading<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"h5"</span><span class="nt">></span>h5. Bootstrap heading<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"h6"</span><span class="nt">></span>h6. Bootstrap heading<span class="nt"></p></span></code></pre> | |
| </figure> | |
| <h3 id="customizing-headings"><span class="bd-content-title">Customizing headings<a class="anchorjs-link " | |
| aria-label="Anchor" data-anchorjs-icon="#" href="#customizing-headings" | |
| style="padding-left: 0.375em;"></a></span></h3> | |
| <p>Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.</p> | |
| <div class="bd-example"> | |
| <h3> | |
| Fancy display heading | |
| <small class="text-muted">With faded secondary text</small> | |
| </h3> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><h3></span> | |
| Fancy display heading | |
| <span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>With faded secondary text<span class="nt"></small></span> | |
| <span class="nt"></h3></span></code></pre> | |
| </figure> | |
| <h2 id="display-headings"><span class="bd-content-title">Display headings<a class="anchorjs-link " | |
| aria-label="Anchor" data-anchorjs-icon="#" href="#display-headings" | |
| style="padding-left: 0.375em;"></a></span></h2> | |
| <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a | |
| heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated | |
| heading style. Keep in mind these headings are not responsive by default, but it’s possible to enable <a | |
| href="#responsive-font-sizes">responsive font sizes</a>.</p> | |
| <div class="bd-example bd-example-type"> | |
| <table class="table"> | |
| <tbody> | |
| <tr> | |
| <td><span class="display-1">Display 1</span></td> | |
| </tr> | |
| <tr> | |
| <td><span class="display-2">Display 2</span></td> | |
| </tr> | |
| <tr> | |
| <td><span class="display-3">Display 3</span></td> | |
| </tr> | |
| <tr> | |
| <td><span class="display-4">Display 4</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-1"</span><span class="nt">></span>Display 1<span class="nt"></h1></span> | |
| <span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-2"</span><span class="nt">></span>Display 2<span class="nt"></h1></span> | |
| <span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-3"</span><span class="nt">></span>Display 3<span class="nt"></h1></span> | |
| <span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">></span>Display 4<span class="nt"></h1></span></code></pre> | |
| </figure> | |
| <h2 id="lead"><span class="bd-content-title">Lead<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#lead" style="padding-left: 0.375em;"></a></span></h2> | |
| <p>Make a paragraph stand out by adding <code class="language-plaintext highlighter-rouge">.lead</code>.</p> | |
| <div class="bd-example"> | |
| <p class="lead"> | |
| Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo | |
| luctus. | |
| </p> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">></span> | |
| Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. | |
| <span class="nt"></p></span></code></pre> | |
| </figure> | |
| <h2 id="inline-text-elements"><span class="bd-content-title">Inline text elements<a class="anchorjs-link " | |
| aria-label="Anchor" data-anchorjs-icon="#" href="#inline-text-elements" | |
| style="padding-left: 0.375em;"></a></span></h2> | |
| <p>Styling for common inline HTML5 elements.</p> | |
| <div class="bd-example"> | |
| <p>You can use the mark tag to <mark>highlight</mark> text.</p> | |
| <p><del>This line of text is meant to be treated as deleted text.</del></p> | |
| <p><s>This line of text is meant to be treated as no longer accurate.</s></p> | |
| <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> | |
| <p><u>This line of text will render as underlined</u></p> | |
| <p><small>This line of text is meant to be treated as fine print.</small></p> | |
| <p><strong>This line rendered as bold text.</strong></p> | |
| <p><em>This line rendered as italicized text.</em></p> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p></span>You can use the mark tag to <span class="nt"><mark></span>highlight<span class="nt"></mark></span> text.<span class="nt"></p></span> | |
| <span class="nt"><p><del></span>This line of text is meant to be treated as deleted text.<span class="nt"></del></p></span> | |
| <span class="nt"><p><s></span>This line of text is meant to be treated as no longer accurate.<span class="nt"></s></p></span> | |
| <span class="nt"><p><ins></span>This line of text is meant to be treated as an addition to the document.<span class="nt"></ins></p></span> | |
| <span class="nt"><p><u></span>This line of text will render as underlined<span class="nt"></u></p></span> | |
| <span class="nt"><p><small></span>This line of text is meant to be treated as fine print.<span class="nt"></small></p></span> | |
| <span class="nt"><p><strong></span>This line rendered as bold text.<span class="nt"></strong></p></span> | |
| <span class="nt"><p><em></span>This line rendered as italicized text.<span class="nt"></em></p></span></code></pre> | |
| </figure> | |
| <p><code class="language-plaintext highlighter-rouge">.mark</code> and <code | |
| class="language-plaintext highlighter-rouge">.small</code> classes are also available to apply the same | |
| styles as <code class="language-plaintext highlighter-rouge"><mark></code> and <code | |
| class="language-plaintext highlighter-rouge"><small></code> while avoiding any unwanted semantic | |
| implications that the tags would bring.</p> | |
| <p>While not shown above, feel free to use <code class="language-plaintext highlighter-rouge"><b></code> | |
| and <code class="language-plaintext highlighter-rouge"><i></code> in HTML5. <code | |
| class="language-plaintext highlighter-rouge"><b></code> is meant to highlight words or phrases | |
| without | |
| conveying additional importance while <code class="language-plaintext highlighter-rouge"><i></code> is | |
| mostly for voice, technical terms, etc.</p> | |
| <h2 id="text-utilities"><span class="bd-content-title">Text utilities<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#text-utilities" style="padding-left: 0.375em;"></a></span></h2> | |
| <p>Change text alignment, transform, style, weight, and color with our <a href="/docs/4.5/utilities/text/">text | |
| utilities</a> and <a href="/docs/4.5/utilities/colors/">color utilities</a>.</p> | |
| <h2 id="abbreviations"><span class="bd-content-title">Abbreviations<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#abbreviations" style="padding-left: 0.375em;"></a></span></h2> | |
| <p>Stylized implementation of HTML’s <code class="language-plaintext highlighter-rouge"><abbr></code> | |
| element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default | |
| underline and gain a help cursor to provide additional context on hover and to users of assistive | |
| technologies.</p> | |
| <p>Add <code class="language-plaintext highlighter-rouge">.initialism</code> to an abbreviation for a slightly | |
| smaller font-size.</p> | |
| <div class="bd-example"> | |
| <p><abbr title="attribute">attr</abbr></p> | |
| <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p><abbr</span> <span class="na">title=</span><span class="s">"attribute"</span><span class="nt">></span>attr<span class="nt"></abbr></p></span> | |
| <span class="nt"><p><abbr</span> <span class="na">title=</span><span class="s">"HyperText Markup Language"</span> <span class="na">class=</span><span class="s">"initialism"</span><span class="nt">></span>HTML<span class="nt"></abbr></p></span></code></pre> | |
| </figure> | |
| <h2 id="blockquotes"><span class="bd-content-title">Blockquotes<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#blockquotes" style="padding-left: 0.375em;"></a></span></h2> | |
| <p>For quoting blocks of content from another source within your document. Wrap <code | |
| class="language-plaintext highlighter-rouge"><blockquote class="blockquote"></code> around any <abbr | |
| title="HyperText Markup Language">HTML</abbr> as the quote.</p> | |
| <div class="bd-example"> | |
| <blockquote class="blockquote"> | |
| <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
| </blockquote> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote"</span><span class="nt">></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span> | |
| <span class="nt"></blockquote></span></code></pre> | |
| </figure> | |
| <h3 id="naming-a-source"><span class="bd-content-title">Naming a source<a class="anchorjs-link " | |
| aria-label="Anchor" data-anchorjs-icon="#" href="#naming-a-source" | |
| style="padding-left: 0.375em;"></a></span></h3> | |
| <p>Add a <code class="language-plaintext highlighter-rouge"><footer class="blockquote-footer"></code> | |
| for | |
| identifying the source. Wrap the name of the source work in <code | |
| class="language-plaintext highlighter-rouge"><cite></code>.</p> | |
| <div class="bd-example"> | |
| <blockquote class="blockquote"> | |
| <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
| <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite> | |
| </footer> | |
| </blockquote> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote"</span><span class="nt">></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span> | |
| <span class="nt"><footer</span> <span class="na">class=</span><span class="s">"blockquote-footer"</span><span class="nt">></span>Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></footer></span> | |
| <span class="nt"></blockquote></span></code></pre> | |
| </figure> | |
| <h3 id="alignment"><span class="bd-content-title">Alignment<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#alignment" style="padding-left: 0.375em;"></a></span></h3> | |
| <p>Use text utilities as needed to change the alignment of your blockquote.</p> | |
| <div class="bd-example"> | |
| <blockquote class="blockquote text-center"> | |
| <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
| <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite> | |
| </footer> | |
| </blockquote> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote text-center"</span><span class="nt">></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span> | |
| <span class="nt"><footer</span> <span class="na">class=</span><span class="s">"blockquote-footer"</span><span class="nt">></span>Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></footer></span> | |
| <span class="nt"></blockquote></span></code></pre> | |
| </figure> | |
| <div class="bd-example"> | |
| <blockquote class="blockquote text-right"> | |
| <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
| <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite> | |
| </footer> | |
| </blockquote> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote text-right"</span><span class="nt">></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span> | |
| <span class="nt"><footer</span> <span class="na">class=</span><span class="s">"blockquote-footer"</span><span class="nt">></span>Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></footer></span> | |
| <span class="nt"></blockquote></span></code></pre> | |
| </figure> | |
| <h2 id="lists"><span class="bd-content-title">Lists<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#lists" style="padding-left: 0.375em;"></a></span></h2> | |
| <h3 id="unstyled"><span class="bd-content-title">Unstyled<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#unstyled" style="padding-left: 0.375em;"></a></span></h3> | |
| <p>Remove the default <code class="language-plaintext highlighter-rouge">list-style</code> and left margin on | |
| list items (immediate children only). <strong>This only applies to immediate children list items</strong>, | |
| meaning you will need to add the class for any nested lists as well.</p> | |
| <div class="bd-example"> | |
| <ul class="list-unstyled"> | |
| <li>Lorem ipsum dolor sit amet</li> | |
| <li>Consectetur adipiscing elit</li> | |
| <li>Integer molestie lorem at massa</li> | |
| <li>Facilisis in pretium nisl aliquet</li> | |
| <li>Nulla volutpat aliquam velit | |
| <ul> | |
| <li>Phasellus iaculis neque</li> | |
| <li>Purus sodales ultricies</li> | |
| <li>Vestibulum laoreet porttitor sem</li> | |
| <li>Ac tristique libero volutpat at</li> | |
| </ul> | |
| </li> | |
| <li>Faucibus porta lacus fringilla vel</li> | |
| <li>Aenean sit amet erat nunc</li> | |
| <li>Eget porttitor lorem</li> | |
| </ul> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">></span> | |
| <span class="nt"><li></span>Lorem ipsum dolor sit amet<span class="nt"></li></span> | |
| <span class="nt"><li></span>Consectetur adipiscing elit<span class="nt"></li></span> | |
| <span class="nt"><li></span>Integer molestie lorem at massa<span class="nt"></li></span> | |
| <span class="nt"><li></span>Facilisis in pretium nisl aliquet<span class="nt"></li></span> | |
| <span class="nt"><li></span>Nulla volutpat aliquam velit | |
| <span class="nt"><ul></span> | |
| <span class="nt"><li></span>Phasellus iaculis neque<span class="nt"></li></span> | |
| <span class="nt"><li></span>Purus sodales ultricies<span class="nt"></li></span> | |
| <span class="nt"><li></span>Vestibulum laoreet porttitor sem<span class="nt"></li></span> | |
| <span class="nt"><li></span>Ac tristique libero volutpat at<span class="nt"></li></span> | |
| <span class="nt"></ul></span> | |
| <span class="nt"></li></span> | |
| <span class="nt"><li></span>Faucibus porta lacus fringilla vel<span class="nt"></li></span> | |
| <span class="nt"><li></span>Aenean sit amet erat nunc<span class="nt"></li></span> | |
| <span class="nt"><li></span>Eget porttitor lorem<span class="nt"></li></span> | |
| <span class="nt"></ul></span></code></pre> | |
| </figure> | |
| <h3 id="inline"><span class="bd-content-title">Inline<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#inline" style="padding-left: 0.375em;"></a></span></h3> | |
| <p>Remove a list’s bullets and apply some light <code class="language-plaintext highlighter-rouge">margin</code> | |
| with a combination of two classes, <code class="language-plaintext highlighter-rouge">.list-inline</code> | |
| and | |
| <code class="language-plaintext highlighter-rouge">.list-inline-item</code>.</p> | |
| <div class="bd-example"> | |
| <ul class="list-inline"> | |
| <li class="list-inline-item">Lorem ipsum</li> | |
| <li class="list-inline-item">Phasellus iaculis</li> | |
| <li class="list-inline-item">Nulla volutpat</li> | |
| </ul> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-inline"</span><span class="nt">></span> | |
| <span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-inline-item"</span><span class="nt">></span>Lorem ipsum<span class="nt"></li></span> | |
| <span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-inline-item"</span><span class="nt">></span>Phasellus iaculis<span class="nt"></li></span> | |
| <span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-inline-item"</span><span class="nt">></span>Nulla volutpat<span class="nt"></li></span> | |
| <span class="nt"></ul></span></code></pre> | |
| </figure> | |
| <h3 id="description-list-alignment"><span class="bd-content-title">Description list alignment<a | |
| class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#description-list-alignment" | |
| style="padding-left: 0.375em;"></a></span></h3> | |
| <p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic | |
| mixins). | |
| For longer terms, you can optionally add a <code | |
| class="language-plaintext highlighter-rouge">.text-truncate</code> class to truncate the text with an | |
| ellipsis.</p> | |
| <div class="bd-example"> | |
| <dl class="row"> | |
| <dt class="col-sm-3">Description lists</dt> | |
| <dd class="col-sm-9">A description list is perfect for defining terms.</dd> | |
| <dt class="col-sm-3">Euismod</dt> | |
| <dd class="col-sm-9"> | |
| <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p> | |
| <p>Donec id elit non mi porta gravida at eget metus.</p> | |
| </dd> | |
| <dt class="col-sm-3">Malesuada porta</dt> | |
| <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd> | |
| <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> | |
| <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum | |
| massa justo sit amet risus.</dd> | |
| <dt class="col-sm-3">Nesting</dt> | |
| <dd class="col-sm-9"> | |
| <dl class="row"> | |
| <dt class="col-sm-4">Nested definition list</dt> | |
| <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd> | |
| </dl> | |
| </dd> | |
| </dl> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><dl</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> | |
| <span class="nt"><dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">></span>Description lists<span class="nt"></dt></span> | |
| <span class="nt"><dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span>A description list is perfect for defining terms.<span class="nt"></dd></span> | |
| <span class="nt"><dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">></span>Euismod<span class="nt"></dt></span> | |
| <span class="nt"><dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span> | |
| <span class="nt"><p></span>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.<span class="nt"></p></span> | |
| <span class="nt"><p></span>Donec id elit non mi porta gravida at eget metus.<span class="nt"></p></span> | |
| <span class="nt"></dd></span> | |
| <span class="nt"><dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">></span>Malesuada porta<span class="nt"></dt></span> | |
| <span class="nt"><dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span>Etiam porta sem malesuada magna mollis euismod.<span class="nt"></dd></span> | |
| <span class="nt"><dt</span> <span class="na">class=</span><span class="s">"col-sm-3 text-truncate"</span><span class="nt">></span>Truncated term is truncated<span class="nt"></dt></span> | |
| <span class="nt"><dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<span class="nt"></dd></span> | |
| <span class="nt"><dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">></span>Nesting<span class="nt"></dt></span> | |
| <span class="nt"><dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span> | |
| <span class="nt"><dl</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> | |
| <span class="nt"><dt</span> <span class="na">class=</span><span class="s">"col-sm-4"</span><span class="nt">></span>Nested definition list<span class="nt"></dt></span> | |
| <span class="nt"><dd</span> <span class="na">class=</span><span class="s">"col-sm-8"</span><span class="nt">></span>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.<span class="nt"></dd></span> | |
| <span class="nt"></dl></span> | |
| <span class="nt"></dd></span> | |
| <span class="nt"></dl></span></code></pre> | |
| </figure> | |
| </main> | |
| <main class="bd-content" role="main"> | |
| <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/blob/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> | |
| <h2 id="text-alignment"><span class="bd-content-title">Text alignment<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#text-alignment" style="padding-left: 0.375em;"></a></span></h2> | |
| <p>Easily realign text to components with text alignment classes.</p> | |
| <div class="bd-example"> | |
| <p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet | |
| fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex | |
| communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem | |
| certam indicere. Cras mattis iudicium purus sit amet fermentum.</p> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-justify"</span><span class="nt">></span>Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.<span class="nt"></p></span></code></pre> | |
| </figure> | |
| <p>For left, right, and center alignment, responsive classes are available that use the same viewport width | |
| breakpoints as the grid system.</p> | |
| <div class="bd-example"> | |
| <p class="text-left">Left aligned text on all viewport sizes.</p> | |
| <p class="text-center">Center aligned text on all viewport sizes.</p> | |
| <p class="text-right">Right aligned text on all viewport sizes.</p> | |
| <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> | |
| <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> | |
| <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p> | |
| <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-left"</span><span class="nt">></span>Left aligned text on all viewport sizes.<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">></span>Center aligned text on all viewport sizes.<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-right"</span><span class="nt">></span>Right aligned text on all viewport sizes.<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-sm-left"</span><span class="nt">></span>Left aligned text on viewports sized SM (small) or wider.<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-md-left"</span><span class="nt">></span>Left aligned text on viewports sized MD (medium) or wider.<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-lg-left"</span><span class="nt">></span>Left aligned text on viewports sized LG (large) or wider.<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-xl-left"</span><span class="nt">></span>Left aligned text on viewports sized XL (extra-large) or wider.<span class="nt"></p></span></code></pre> | |
| </figure> | |
| <h2 id="text-wrapping-and-overflow"><span class="bd-content-title">Text wrapping and overflow<a | |
| class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#text-wrapping-and-overflow" | |
| style="padding-left: 0.375em;"></a></span></h2> | |
| <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;"> | |
| This text should wrap. | |
| </div> | |
| </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">"badge badge-primary text-wrap"</span> <span class="na">style=</span><span class="s">"width: 6rem;"</span><span class="nt">></span> | |
| This text should wrap. | |
| <span class="nt"></div></span></code></pre> | |
| </figure> | |
| <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;"> | |
| This text should overflow the parent. | |
| </div> | |
| </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">"text-nowrap bd-highlight"</span> <span class="na">style=</span><span class="s">"width: 8rem;"</span><span class="nt">></span> | |
| This text should overflow the parent. | |
| <span class="nt"></div></span></code></pre> | |
| </figure> | |
| <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 --> | |
| <div class="row"> | |
| <div class="col-2 text-truncate"> | |
| Praeterea iter est quasdam res quas ex communi. | |
| </div> | |
| </div> | |
| <!-- Inline level --> | |
| <span class="d-inline-block text-truncate" style="max-width: 150px;"> | |
| Praeterea iter est quasdam res quas ex communi. | |
| </span> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="c"><!-- Block level --></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-2 text-truncate"</span><span class="nt">></span> | |
| Praeterea iter est quasdam res quas ex communi. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="c"><!-- Inline level --></span> | |
| <span class="nt"><span</span> <span class="na">class=</span><span class="s">"d-inline-block text-truncate"</span> <span class="na">style=</span><span class="s">"max-width: 150px;"</span><span class="nt">></span> | |
| Praeterea iter est quasdam res quas ex communi. | |
| <span class="nt"></span></span></code></pre> | |
| </figure> | |
| <h2 id="word-break"><span class="bd-content-title">Word break<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#word-break" style="padding-left: 0.375em;"></a></span></h2> | |
| <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> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-break"</span><span class="nt">></span>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm<span class="nt"></p></span></code></pre> | |
| </figure> | |
| <h2 id="text-transform"><span class="bd-content-title">Text transform<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#text-transform" style="padding-left: 0.375em;"></a></span></h2> | |
| <p>Transform text in components with text capitalization classes.</p> | |
| <div class="bd-example"> | |
| <p class="text-lowercase">Lowercased text.</p> | |
| <p class="text-uppercase">Uppercased text.</p> | |
| <p class="text-capitalize">CapiTaliZed text.</p> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-lowercase"</span><span class="nt">></span>Lowercased text.<span class="nt"></p></span> | |
| <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="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"><span class="bd-content-title">Font weight and italics<a class="anchorjs-link " | |
| aria-label="Anchor" data-anchorjs-icon="#" href="#font-weight-and-italics" | |
| style="padding-left: 0.375em;"></a></span></h2> | |
| <p>Quickly change the weight (boldness) of text or italicize text.</p> | |
| <div class="bd-example"> | |
| <p class="font-weight-bold">Bold text.</p> | |
| <p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p> | |
| <p class="font-weight-normal">Normal weight text.</p> | |
| <p class="font-weight-light">Light weight text.</p> | |
| <p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p> | |
| <p class="font-italic">Italic text.</p> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-weight-bold"</span><span class="nt">></span>Bold text.<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-weight-bolder"</span><span class="nt">></span>Bolder weight text (relative to the parent element).<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-weight-normal"</span><span class="nt">></span>Normal weight text.<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-weight-light"</span><span class="nt">></span>Light weight text.<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-weight-lighter"</span><span class="nt">></span>Lighter weight text (relative to the parent element).<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-italic"</span><span class="nt">></span>Italic text.<span class="nt"></p></span></code></pre> | |
| </figure> | |
| <h2 id="monospace"><span class="bd-content-title">Monospace<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#monospace" style="padding-left: 0.375em;"></a></span></h2> | |
| <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> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-monospace"</span><span class="nt">></span>This is in monospace<span class="nt"></p></span></code></pre> | |
| </figure> | |
| <h2 id="reset-color"><span class="bd-content-title">Reset color<a class="anchorjs-link " aria-label="Anchor" | |
| data-anchorjs-icon="#" href="#reset-color" style="padding-left: 0.375em;"></a></span></h2> | |
| <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"> | |
| Muted text with a <a href="#" class="text-reset">reset link</a>. | |
| </p> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span> | |
| Muted text with a <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-reset"</span><span class="nt">></span>reset link<span class="nt"></a></span>. | |
| <span class="nt"></p></span></code></pre> | |
| </figure> | |
| <h2 id="text-decoration"><span class="bd-content-title">Text decoration<a class="anchorjs-link " | |
| aria-label="Anchor" data-anchorjs-icon="#" href="#text-decoration" | |
| style="padding-left: 0.375em;"></a></span></h2> | |
| <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> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-decoration-none"</span><span class="nt">></span>Non-underlined link<span class="nt"></a></span></code></pre> | |
| </figure> | |
| </main> | |
| <main class="bd-content" role="main"> | |
| <h1 class="bd-title" id="content">Buttons</h1> | |
| <p class="bd-lead">Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support | |
| for | |
| multiple sizes, states, and more.</p> | |
| <h2 id="examples"> | |
| <div>Examples<a class="anchorjs-link " href="#examples" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few | |
| extras | |
| thrown in for more control.</p> | |
| <div class="bd-example"> | |
| <button type="button" class="btn btn-primary">Primary</button> | |
| <button type="button" class="btn btn-secondary">Secondary</button> | |
| <button type="button" class="btn btn-success">Success</button> | |
| <button type="button" class="btn btn-danger">Danger</button> | |
| <button type="button" class="btn btn-warning">Warning</button> | |
| <button type="button" class="btn btn-info">Info</button> | |
| <button type="button" class="btn btn-light">Light</button> | |
| <button type="button" class="btn btn-dark">Dark</button> | |
| <button type="button" class="btn btn-link">Link</button> | |
| </div> | |
| <div class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Secondary<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Success<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">></span>Info<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-light"</span><span class="nt">></span>Light<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dark"</span><span class="nt">></span>Dark<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">></span>Link<span class="nt"></button></span></code></pre> | |
| </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> | |
| <h2 id="button-tags"> | |
| <div>Button tags<a class="anchorjs-link " href="#button-tags" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>The <code class="highlighter-rouge">.btn</code> classes are designed to be used with the <code | |
| class="highlighter-rouge"><button></code> element. However, you can also use these classes on <code | |
| class="highlighter-rouge"><a></code> or <code class="highlighter-rouge"><input></code> | |
| elements | |
| (though some browsers may apply a slightly different rendering).</p> | |
| <p>When using button classes on <code class="highlighter-rouge"><a></code> elements that are used to | |
| trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within | |
| the current page, these links should be given a <code class="highlighter-rouge">role="button"</code> to | |
| appropriately convey their purpose to assistive technologies such as screen readers.</p> | |
| <div class="bd-example"> | |
| <a class="btn btn-primary" href="#" role="button">Link</a> | |
| <button class="btn btn-primary" type="submit">Button</button> | |
| <input class="btn btn-primary" type="button" value="Input"> | |
| <input class="btn btn-primary" type="submit" value="Submit"> | |
| <input class="btn btn-primary" type="reset" value="Reset"> | |
| </div> | |
| <div class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Link<span class="nt"></a></span> | |
| <span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Button<span class="nt"></button></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"Input"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">value=</span><span class="s">"Submit"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"reset"</span> <span class="na">value=</span><span class="s">"Reset"</span><span class="nt">></span></code></pre> | |
| </div> | |
| <h2 id="outline-buttons"> | |
| <div>Outline buttons<a class="anchorjs-link " href="#outline-buttons" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes | |
| with the <code class="highlighter-rouge">.btn-outline-*</code> ones to remove all background images and | |
| colors | |
| on any button.</p> | |
| <div class="bd-example"> | |
| <button type="button" class="btn btn-outline-primary">Primary</button> | |
| <button type="button" class="btn btn-outline-secondary">Secondary</button> | |
| <button type="button" class="btn btn-outline-success">Success</button> | |
| <button type="button" class="btn btn-outline-danger">Danger</button> | |
| <button type="button" class="btn btn-outline-warning">Warning</button> | |
| <button type="button" class="btn btn-outline-info">Info</button> | |
| <button type="button" class="btn btn-outline-light">Light</button> | |
| <button type="button" class="btn btn-outline-dark">Dark</button> | |
| </div> | |
| <div class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">></span>Secondary<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span><span class="nt">></span>Success<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-info"</span><span class="nt">></span>Info<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-light"</span><span class="nt">></span>Light<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-dark"</span><span class="nt">></span>Dark<span class="nt"></button></span></code></pre> | |
| </div> | |
| <h2 id="sizes"> | |
| <div>Sizes<a class="anchorjs-link " href="#sizes" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Fancy larger or smaller buttons? Add <code class="highlighter-rouge">.btn-lg</code> or <code | |
| class="highlighter-rouge">.btn-sm</code> for additional sizes.</p> | |
| <div class="bd-example"> | |
| <button type="button" class="btn btn-primary btn-lg">Large button</button> | |
| <button type="button" class="btn btn-secondary btn-lg">Large button</button> | |
| </div> | |
| <div class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span></code></pre> | |
| </div> | |
| <div class="bd-example"> | |
| <button type="button" class="btn btn-primary btn-sm">Small button</button> | |
| <button type="button" class="btn btn-secondary btn-sm">Small button</button> | |
| </div> | |
| <div class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span></code></pre> | |
| </div> | |
| <p>Create block level buttons—those that span the full width of a parent—by adding <code | |
| class="highlighter-rouge">.btn-block</code>.</p> | |
| <div class="bd-example"> | |
| <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> | |
| <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button> | |
| </div> | |
| <div class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg btn-block"</span><span class="nt">></span>Block level button<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg btn-block"</span><span class="nt">></span>Block level button<span class="nt"></button></span></code></pre> | |
| </div> | |
| <h2 id="active-state"> | |
| <div>Active state<a class="anchorjs-link " href="#active-state" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. | |
| <strong>There’s no need to add a class to <code class="highlighter-rouge"><button></code>s as they use | |
| a | |
| pseudo-class</strong>. However, you can still force the same active appearance with <code | |
| class="highlighter-rouge">.active</code> (and include the <code>aria-pressed="true"</code> attribute) | |
| should | |
| you need to replicate the state programmatically.</p> | |
| <div class="bd-example"> | |
| <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a> | |
| <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a> | |
| </div> | |
| <div class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg active"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-pressed=</span><span class="s">"true"</span><span class="nt">></span>Primary link<span class="nt"></a></span> | |
| <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg active"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-pressed=</span><span class="s">"true"</span><span class="nt">></span>Link<span class="nt"></a></span></code></pre> | |
| </div> | |
| <h2 id="disabled-state"> | |
| <div>Disabled state<a class="anchorjs-link " href="#disabled-state" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Make buttons look inactive by adding the <code class="highlighter-rouge">disabled</code> boolean attribute | |
| to | |
| any <code class="highlighter-rouge"><button></code> element.</p> | |
| <div class="bd-example"> | |
| <button type="button" class="btn btn-lg btn-primary" disabled="">Primary button</button> | |
| <button type="button" class="btn btn-secondary btn-lg" disabled="">Button</button> | |
| </div> | |
| <div class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-primary"</span> <span class="na">disabled</span><span class="nt">></span>Primary button<span class="nt"></button></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span> <span class="na">disabled</span><span class="nt">></span>Button<span class="nt"></button></span></code></pre> | |
| </div> | |
| <p>Disabled buttons using the <code class="highlighter-rouge"><a></code> element behave a bit different: | |
| </p> | |
| <ul> | |
| <li><code class="highlighter-rouge"><a></code>s don’t support the <code | |
| class="highlighter-rouge">disabled</code> attribute, so you must add the <code | |
| class="highlighter-rouge">.disabled</code> class to make it visually appear disabled.</li> | |
| <li>Some future-friendly styles are included to disable all <code | |
| class="highlighter-rouge">pointer-events</code> on anchor buttons. In browsers which support that | |
| property, you won’t see the disabled cursor at all.</li> | |
| <li>Disabled buttons should include the <code class="highlighter-rouge">aria-disabled="true"</code> | |
| attribute | |
| to indicate the state of the element to assistive technologies.</li> | |
| </ul> | |
| <div class="bd-example"> | |
| <a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a> | |
| <a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a> | |
| </div> | |
| <div class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg disabled"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Primary link<span class="nt"></a></span> | |
| <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg disabled"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Link<span class="nt"></a></span></code></pre> | |
| </div> | |
| <div class="bd-callout bd-callout-warning"> | |
| <h5 id="link-functionality-caveat">Link functionality caveat</h5> | |
| <p>The <code class="highlighter-rouge">.disabled</code> class uses <code | |
| class="highlighter-rouge">pointer-events: none</code> to try to disable the link functionality of <code | |
| class="highlighter-rouge"><a></code>s, but that CSS property is not yet standardized. In addition, | |
| even in browsers that do support <code class="highlighter-rouge">pointer-events: none</code>, keyboard | |
| navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies | |
| will | |
| still be able to activate these links. So to be safe, add a <code | |
| class="highlighter-rouge">tabindex="-1"</code> attribute on these links (to prevent them from receiving | |
| keyboard focus) and use custom JavaScript to disable their functionality.</p> | |
| </div> | |
| <h2 id="button-plugin"> | |
| <div>Button plugin<a class="anchorjs-link " href="#button-plugin" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars. | |
| </p> | |
| <h3 id="toggle-states"> | |
| <div>Toggle states<a class="anchorjs-link " href="#toggle-states" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Add <code class="highlighter-rouge">data-toggle="button"</code> to toggle a button’s <code | |
| class="highlighter-rouge">active</code> state. If you’re pre-toggling a button, you must manually add the | |
| <code class="highlighter-rouge">.active</code> class <strong>and</strong> <code | |
| class="highlighter-rouge">aria-pressed="true"</code> to the <code | |
| class="highlighter-rouge"><button></code>.</p> | |
| <div class="bd-example"> | |
| <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> | |
| Single toggle | |
| </button> | |
| </div> | |
| <div class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"button"</span> <span class="na">aria-pressed=</span><span class="s">"false"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span> | |
| Single toggle | |
| <span class="nt"></button></span></code></pre> | |
| </div> | |
| <h3 id="checkbox-and-radio-buttons"> | |
| <div>Checkbox and radio buttons<a class="anchorjs-link " href="#checkbox-and-radio-buttons" aria-label="Anchor" | |
| data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Bootstrap’s <code class="highlighter-rouge">.button</code> styles can be applied to other elements, such as | |
| <code class="highlighter-rouge"><label></code>s, to provide checkbox or radio style button toggling. | |
| Add | |
| <code class="highlighter-rouge">data-toggle="buttons"</code> to a <code | |
| class="highlighter-rouge">.btn-group</code> containing those modified buttons to enable their toggling | |
| behavior via JavaScript and add <code class="highlighter-rouge">.btn-group-toggle</code> to style the <code | |
| class="highlighter-rouge"><input></code>s within your buttons. <strong>Note that you can create | |
| single | |
| input-powered buttons or groups of them.</strong></p> | |
| <p>The checked state for these buttons is <strong>only updated via <code class="highlighter-rouge">click</code> | |
| event</strong> on the button. If you use another method to update the input—e.g., with <code | |
| class="highlighter-rouge"><input type="reset"></code> or by manually applying the input’s <code | |
| class="highlighter-rouge">checked</code> property—you’ll need to toggle <code | |
| class="highlighter-rouge">.active</code> on the <code class="highlighter-rouge"><label></code> | |
| manually.</p> | |
| <p>Note that pre-checked buttons require you to manually add the <code class="highlighter-rouge">.active</code> | |
| class to the input’s <code class="highlighter-rouge"><label></code>.</p> | |
| <div class="bd-example"> | |
| <div class="btn-group-toggle" data-toggle="buttons"> | |
| <label class="btn btn-secondary active"> | |
| <input type="checkbox" checked="" autocomplete="off"> Checked | |
| </label> | |
| </div> | |
| </div> | |
| <div class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span> Checked | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span></code></pre> | |
| </div> | |
| <div class="bd-example"> | |
| <div class="btn-group btn-group-toggle" data-toggle="buttons"> | |
| <label class="btn btn-secondary active"> | |
| <input type="radio" name="options" id="option1" autocomplete="off" checked=""> Active | |
| </label> | |
| <label class="btn btn-secondary"> | |
| <input type="radio" name="options" id="option2" autocomplete="off"> Radio | |
| </label> | |
| <label class="btn btn-secondary"> | |
| <input type="radio" name="options" id="option3" autocomplete="off"> Radio | |
| </label> | |
| </div> | |
| </div> | |
| <div class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option1"</span> <span class="na">autocomplete=</span><span class="s">"off"</span> <span class="na">checked</span><span class="nt">></span> Active | |
| <span class="nt"></label></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option2"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span> Radio | |
| <span class="nt"></label></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option3"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span> Radio | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span></code></pre> | |
| </div> | |
| </main> | |
| <main class="bd-content" role="main"> | |
| <h1 class="bd-title" id="content">Colors</h1> | |
| <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> | |
| <h2 id="color"> | |
| <div>Color<a class="anchorjs-link " href="#color" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <div class="bd-example"> | |
| <p class="text-primary">.text-primary</p> | |
| <p class="text-secondary">.text-secondary</p> | |
| <p class="text-success">.text-success</p> | |
| <p class="text-danger">.text-danger</p> | |
| <p class="text-warning">.text-warning</p> | |
| <p class="text-info">.text-info</p> | |
| <p class="text-light bg-dark">.text-light</p> | |
| <p class="text-dark">.text-dark</p> | |
| <p class="text-body">.text-body</p> | |
| <p class="text-muted">.text-muted</p> | |
| <p class="text-white bg-dark">.text-white</p> | |
| <p class="text-black-50">.text-black-50</p> | |
| <p class="text-white-50 bg-dark">.text-white-50</p> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-primary"</span><span class="nt">></span>.text-primary<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-secondary"</span><span class="nt">></span>.text-secondary<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-success"</span><span class="nt">></span>.text-success<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-danger"</span><span class="nt">></span>.text-danger<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-warning"</span><span class="nt">></span>.text-warning<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-info"</span><span class="nt">></span>.text-info<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-light bg-dark"</span><span class="nt">></span>.text-light<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-dark"</span><span class="nt">></span>.text-dark<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-body"</span><span class="nt">></span>.text-body<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>.text-muted<span class="nt"></p></span> | |
| <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-white bg-dark"</span><span class="nt">></span>.text-white<span class="nt"></p></span> | |
| <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> | |
| <div class="bd-example"> | |
| <p><a href="#" class="text-primary">Primary link</a></p> | |
| <p><a href="#" class="text-secondary">Secondary link</a></p> | |
| <p><a href="#" class="text-success">Success link</a></p> | |
| <p><a href="#" class="text-danger">Danger link</a></p> | |
| <p><a href="#" class="text-warning">Warning link</a></p> | |
| <p><a href="#" class="text-info">Info link</a></p> | |
| <p><a href="#" class="text-light bg-dark">Light link</a></p> | |
| <p><a href="#" class="text-dark">Dark link</a></p> | |
| <p><a href="#" class="text-muted">Muted link</a></p> | |
| <p><a href="#" class="text-white bg-dark">White link</a></p> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-primary"</span><span class="nt">></span>Primary link<span class="nt"></a></p></span> | |
| <span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-secondary"</span><span class="nt">></span>Secondary link<span class="nt"></a></p></span> | |
| <span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-success"</span><span class="nt">></span>Success link<span class="nt"></a></p></span> | |
| <span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-danger"</span><span class="nt">></span>Danger link<span class="nt"></a></p></span> | |
| <span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-warning"</span><span class="nt">></span>Warning link<span class="nt"></a></p></span> | |
| <span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-info"</span><span class="nt">></span>Info link<span class="nt"></a></p></span> | |
| <span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-light bg-dark"</span><span class="nt">></span>Light link<span class="nt"></a></p></span> | |
| <span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-dark"</span><span class="nt">></span>Dark link<span class="nt"></a></p></span> | |
| <span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Muted link<span class="nt"></a></p></span> | |
| <span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-white bg-dark"</span><span class="nt">></span>White link<span class="nt"></a></p></span></code></pre> | |
| </figure> | |
| <h2 id="background-color"> | |
| <div>Background color<a class="anchorjs-link " href="#background-color" aria-label="Anchor" | |
| data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div> | |
| </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> | |
| <div class="bd-example"> | |
| <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> | |
| <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> | |
| <div class="p-3 mb-2 bg-success text-white">.bg-success</div> | |
| <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> | |
| <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> | |
| <div class="p-3 mb-2 bg-info text-white">.bg-info</div> | |
| <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> | |
| <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> | |
| <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> | |
| <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div> | |
| </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">"p-3 mb-2 bg-primary text-white"</span><span class="nt">></span>.bg-primary<span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-secondary text-white"</span><span class="nt">></span>.bg-secondary<span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-success text-white"</span><span class="nt">></span>.bg-success<span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-danger text-white"</span><span class="nt">></span>.bg-danger<span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-warning text-dark"</span><span class="nt">></span>.bg-warning<span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-info text-white"</span><span class="nt">></span>.bg-info<span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-light text-dark"</span><span class="nt">></span>.bg-light<span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-dark text-white"</span><span class="nt">></span>.bg-dark<span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-white text-dark"</span><span class="nt">></span>.bg-white<span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-transparent text-dark"</span><span class="nt">></span>.bg-transparent<span class="nt"></div></span></code></pre> | |
| </figure> | |
| </main> | |
| <main class="bd-content" role="main"> | |
| <h1 class="bd-title" id="content">Forms</h1> | |
| <p class="bd-lead">Examples and usage guidelines for form control styles, layout options, and custom components | |
| for creating a wide variety of forms.</p> | |
| <h2 id="overview"> | |
| <div>Overview<a class="anchorjs-link " href="#overview" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Bootstrap’s form controls expand on <a href="/docs/4.1/content/reboot/#forms">our Rebooted form styles</a> with | |
| classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers | |
| and devices.</p> | |
| <p>Be sure to use an appropriate <code class="highlighter-rouge">type</code> attribute on all inputs (e.g., <code | |
| class="highlighter-rouge">email</code> for email address or <code class="highlighter-rouge">number</code> for | |
| numerical information) to take advantage of newer input controls like email verification, number selection, and | |
| more.</p> | |
| <p>Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required | |
| classes, form layout, and more.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-group"> | |
| <label for="exampleInputEmail1">Email address</label> | |
| <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" | |
| placeholder="Enter email"> | |
| <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="exampleInputPassword1">Password</label> | |
| <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> | |
| </div> | |
| <div class="form-group form-check"> | |
| <input type="checkbox" class="form-check-input" id="exampleCheck1"> | |
| <label class="form-check-label" for="exampleCheck1">Check me out</label> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Submit</button> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleInputEmail1"</span><span class="nt">></span>Email address<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail1"</span> <span class="na">aria-describedby=</span><span class="s">"emailHelp"</span> <span class="na">placeholder=</span><span class="s">"Enter email"</span><span class="nt">></span> | |
| <span class="nt"><small</span> <span class="na">id=</span><span class="s">"emailHelp"</span> <span class="na">class=</span><span class="s">"form-text text-muted"</span><span class="nt">></span>We'll never share your email with anyone else.<span class="nt"></small></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleInputPassword1"</span><span class="nt">></span>Password<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputPassword1"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">id=</span><span class="s">"exampleCheck1"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"exampleCheck1"</span><span class="nt">></span>Check me out<span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Submit<span class="nt"></button></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h2 id="form-controls"> | |
| <div>Form controls<a class="anchorjs-link " href="#form-controls" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Textual form controls—like <code class="highlighter-rouge"><input></code>s, <code | |
| class="highlighter-rouge"><select></code>s, and <code | |
| class="highlighter-rouge"><textarea></code>s—are styled with the <code | |
| class="highlighter-rouge">.form-control</code> class. Included are styles for general appearance, focus state, | |
| sizing, and more.</p> | |
| <p>Be sure to explore our <a href="#custom-forms">custom forms</a> to further style <code | |
| class="highlighter-rouge"><select></code>s.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-group"> | |
| <label for="exampleFormControlInput1">Email address</label> | |
| <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="exampleFormControlSelect1">Example select</label> | |
| <select class="form-control" id="exampleFormControlSelect1"> | |
| <option>1</option> | |
| <option>2</option> | |
| <option>3</option> | |
| <option>4</option> | |
| <option>5</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="exampleFormControlSelect2">Example multiple select</label> | |
| <select multiple="" class="form-control" id="exampleFormControlSelect2"> | |
| <option>1</option> | |
| <option>2</option> | |
| <option>3</option> | |
| <option>4</option> | |
| <option>5</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="exampleFormControlTextarea1">Example textarea</label> | |
| <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlInput1"</span><span class="nt">></span>Email address<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlInput1"</span> <span class="na">placeholder=</span><span class="s">"name@example.com"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlSelect1"</span><span class="nt">></span>Example select<span class="nt"></label></span> | |
| <span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlSelect1"</span><span class="nt">></span> | |
| <span class="nt"><option></span>1<span class="nt"></option></span> | |
| <span class="nt"><option></span>2<span class="nt"></option></span> | |
| <span class="nt"><option></span>3<span class="nt"></option></span> | |
| <span class="nt"><option></span>4<span class="nt"></option></span> | |
| <span class="nt"><option></span>5<span class="nt"></option></span> | |
| <span class="nt"></select></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlSelect2"</span><span class="nt">></span>Example multiple select<span class="nt"></label></span> | |
| <span class="nt"><select</span> <span class="na">multiple</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlSelect2"</span><span class="nt">></span> | |
| <span class="nt"><option></span>1<span class="nt"></option></span> | |
| <span class="nt"><option></span>2<span class="nt"></option></span> | |
| <span class="nt"><option></span>3<span class="nt"></option></span> | |
| <span class="nt"><option></span>4<span class="nt"></option></span> | |
| <span class="nt"><option></span>5<span class="nt"></option></span> | |
| <span class="nt"></select></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlTextarea1"</span><span class="nt">></span>Example textarea<span class="nt"></label></span> | |
| <span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlTextarea1"</span> <span class="na">rows=</span><span class="s">"3"</span><span class="nt">></textarea></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <p>For file inputs, swap the <code class="highlighter-rouge">.form-control</code> for <code | |
| class="highlighter-rouge">.form-control-file</code>.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-group"> | |
| <label for="exampleFormControlFile1">Example file input</label> | |
| <input type="file" class="form-control-file" id="exampleFormControlFile1"> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlFile1"</span><span class="nt">></span>Example file input<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"form-control-file"</span> <span class="na">id=</span><span class="s">"exampleFormControlFile1"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h3 id="sizing"> | |
| <div>Sizing<a class="anchorjs-link " href="#sizing" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Set heights using classes like <code class="highlighter-rouge">.form-control-lg</code> and <code | |
| class="highlighter-rouge">.form-control-sm</code>.</p> | |
| <div class="bd-example"> | |
| <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"> | |
| <input class="form-control" type="text" placeholder="Default input"> | |
| <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control form-control-lg"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">".form-control-lg"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Default input"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control form-control-sm"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">".form-control-sm"</span><span class="nt">></span></code></pre> | |
| </figure> | |
| <div class="bd-example"> | |
| <select class="form-control form-control-lg"> | |
| <option>Large select</option> | |
| </select> | |
| <select class="form-control"> | |
| <option>Default select</option> | |
| </select> | |
| <select class="form-control form-control-sm"> | |
| <option>Small select</option> | |
| </select> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control form-control-lg"</span><span class="nt">></span> | |
| <span class="nt"><option></span>Large select<span class="nt"></option></span> | |
| <span class="nt"></select></span> | |
| <span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span> | |
| <span class="nt"><option></span>Default select<span class="nt"></option></span> | |
| <span class="nt"></select></span> | |
| <span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control form-control-sm"</span><span class="nt">></span> | |
| <span class="nt"><option></span>Small select<span class="nt"></option></span> | |
| <span class="nt"></select></span></code></pre> | |
| </figure> | |
| <h3 id="readonly"> | |
| <div>Readonly<a class="anchorjs-link " href="#readonly" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Add the <code class="highlighter-rouge">readonly</code> boolean attribute on an input to prevent modification | |
| of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard | |
| cursor.</p> | |
| <div class="bd-example"> | |
| <input class="form-control" type="text" placeholder="Readonly input here…" readonly=""> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Readonly input here…"</span> <span class="na">readonly</span><span class="nt">></span></code></pre> | |
| </figure> | |
| <h3 id="readonly-plain-text"> | |
| <div>Readonly plain text<a class="anchorjs-link " href="#readonly-plain-text" aria-label="Anchor" | |
| data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>If you want to have <code class="highlighter-rouge"><input readonly></code> elements in your form styled | |
| as plain text, use the <code class="highlighter-rouge">.form-control-plaintext</code> class to remove the | |
| default form field styling and preserve the correct margin and padding.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-group row"> | |
| <label for="staticEmail" class="col-sm-2 col-form-label">Email</label> | |
| <div class="col-sm-10"> | |
| <input type="text" readonly="" class="form-control-plaintext" id="staticEmail" value="email@example.com"> | |
| </div> | |
| </div> | |
| <div class="form-group row"> | |
| <label for="inputPassword" class="col-sm-2 col-form-label">Password</label> | |
| <div class="col-sm-10"> | |
| <input type="password" class="form-control" id="inputPassword" placeholder="Password"> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"staticEmail"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label"</span><span class="nt">></span>Email<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">readonly</span> <span class="na">class=</span><span class="s">"form-control-plaintext"</span> <span class="na">id=</span><span class="s">"staticEmail"</span> <span class="na">value=</span><span class="s">"email@example.com"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label"</span><span class="nt">></span>Password<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <div class="bd-example"> | |
| <form class="form-inline"> | |
| <div class="form-group mb-2"> | |
| <label for="staticEmail2" class="sr-only">Email</label> | |
| <input type="text" readonly="" class="form-control-plaintext" id="staticEmail2" value="email@example.com"> | |
| </div> | |
| <div class="form-group mx-sm-3 mb-2"> | |
| <label for="inputPassword2" class="sr-only">Password</label> | |
| <input type="password" class="form-control" id="inputPassword2" placeholder="Password"> | |
| </div> | |
| <button type="submit" class="btn btn-primary mb-2">Confirm identity</button> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group mb-2"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"staticEmail2"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Email<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">readonly</span> <span class="na">class=</span><span class="s">"form-control-plaintext"</span> <span class="na">id=</span><span class="s">"staticEmail2"</span> <span class="na">value=</span><span class="s">"email@example.com"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group mx-sm-3 mb-2"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword2"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Password<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword2"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary mb-2"</span><span class="nt">></span>Confirm identity<span class="nt"></button></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h2 id="range-inputs"> | |
| <div>Range Inputs<a class="anchorjs-link " href="#range-inputs" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Set horizontally scrollable range inputs using <code class="highlighter-rouge">.form-control-range</code>.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-group"> | |
| <label for="formControlRange">Example Range input</label> | |
| <input type="range" class="form-control-range" id="formControlRange"> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"formControlRange"</span><span class="nt">></span>Example Range input<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"form-control-range"</span> <span class="na">id=</span><span class="s">"formControlRange"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h2 id="checkboxes-and-radios"> | |
| <div>Checkboxes and radios<a class="anchorjs-link " href="#checkboxes-and-radios" aria-label="Anchor" | |
| data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Default checkboxes and radios are improved upon with the help of <code | |
| class="highlighter-rouge">.form-check</code>, <strong>a single class for both input types that improves the | |
| layout and behavior of their HTML elements</strong>. Checkboxes are for selecting one or several options in a | |
| list, while radios are for selecting one option from many.</p> | |
| <p>Disabled checkboxes and radios are supported, but to provide a <code | |
| class="highlighter-rouge">not-allowed</code> cursor on hover of the parent <code | |
| class="highlighter-rouge"><label></code>, you’ll need to add the <code | |
| class="highlighter-rouge">disabled</code> attribute to the <code | |
| class="highlighter-rouge">.form-check-input</code>. The disabled attribute will apply a lighter color to help | |
| indicate the input’s state.</p> | |
| <p>Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible | |
| labels. As such, our <code class="highlighter-rouge"><input></code>s and <code | |
| class="highlighter-rouge"><label></code>s are sibling elements as opposed to an <code | |
| class="highlighter-rouge"><input></code> within a <code class="highlighter-rouge"><label></code>. | |
| This is slightly more verbose as you must specify <code class="highlighter-rouge">id</code> and <code | |
| class="highlighter-rouge">for</code> attributes to relate the <code | |
| class="highlighter-rouge"><input></code> and <code class="highlighter-rouge"><label></code>.</p> | |
| <h3 id="default-stacked"> | |
| <div>Default (stacked)<a class="anchorjs-link " href="#default-stacked" aria-label="Anchor" | |
| data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and | |
| appropriately spaced with <code class="highlighter-rouge">.form-check</code>.</p> | |
| <div class="bd-example"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> | |
| <label class="form-check-label" for="defaultCheck1"> | |
| Default checkbox | |
| </label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled=""> | |
| <label class="form-check-label" for="defaultCheck2"> | |
| Disabled checkbox | |
| </label> | |
| </div> | |
| </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">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"defaultCheck1"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"defaultCheck1"</span><span class="nt">></span> | |
| Default checkbox | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"defaultCheck2"</span> <span class="na">disabled</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"defaultCheck2"</span><span class="nt">></span> | |
| Disabled checkbox | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span></code></pre> | |
| </figure> | |
| <div class="bd-example"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" | |
| checked=""> | |
| <label class="form-check-label" for="exampleRadios1"> | |
| Default radio | |
| </label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"> | |
| <label class="form-check-label" for="exampleRadios2"> | |
| Second default radio | |
| </label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" | |
| disabled=""> | |
| <label class="form-check-label" for="exampleRadios3"> | |
| Disabled radio | |
| </label> | |
| </div> | |
| </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">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios"</span> <span class="na">id=</span><span class="s">"exampleRadios1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">checked</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"exampleRadios1"</span><span class="nt">></span> | |
| Default radio | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios"</span> <span class="na">id=</span><span class="s">"exampleRadios2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"exampleRadios2"</span><span class="nt">></span> | |
| Second default radio | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios"</span> <span class="na">id=</span><span class="s">"exampleRadios3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"exampleRadios3"</span><span class="nt">></span> | |
| Disabled radio | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span></code></pre> | |
| </figure> | |
| <h3 id="inline"> | |
| <div>Inline<a class="anchorjs-link " href="#inline" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Group checkboxes or radios on the same horizontal row by adding <code | |
| class="highlighter-rouge">.form-check-inline</code> to any <code class="highlighter-rouge">.form-check</code>. | |
| <h3 id="inline"> | |
| <div>Inline<a class="anchorjs-link " href="#inline" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| </p> | |
| <div class="bd-example"> | |
| <div class="form-check form-check-inline"> | |
| <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> | |
| <label class="form-check-label" for="inlineCheckbox1">1</label> | |
| </div> | |
| <div class="form-check form-check-inline"> | |
| <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> | |
| <label class="form-check-label" for="inlineCheckbox2">2</label> | |
| </div> | |
| <div class="form-check form-check-inline"> | |
| <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled=""> | |
| <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label> | |
| </div> | |
| <h3 id="inline"> | |
| <div>Inline<a class="anchorjs-link " href="#inline" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| </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">"form-check form-check-inline"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox1"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineCheckbox1"</span><span class="nt">></span>1<span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineCheckbox2"</span><span class="nt">></span>2<span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineCheckbox3"</span><span class="nt">></span>3 (disabled)<span class="nt"></label></span> | |
| <span class="nt"></div></span></code></pre> | |
| <h3 id="inline"> | |
| <div>Inline<a class="anchorjs-link " href="#inline" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| </figure> | |
| <div class="bd-example"> | |
| <div class="form-check form-check-inline"> | |
| <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> | |
| <label class="form-check-label" for="inlineRadio1">1</label> | |
| </div> | |
| <div class="form-check form-check-inline"> | |
| <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> | |
| <label class="form-check-label" for="inlineRadio2">2</label> | |
| </div> | |
| <div class="form-check form-check-inline"> | |
| <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" | |
| disabled=""> | |
| <label class="form-check-label" for="inlineRadio3">3 (disabled)</label> | |
| </div> | |
| </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">"form-check form-check-inline"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio1"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineRadio1"</span><span class="nt">></span>1<span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineRadio2"</span><span class="nt">></span>2<span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineRadio3"</span><span class="nt">></span>3 (disabled)<span class="nt"></label></span> | |
| <span class="nt"></div></span></code></pre> | |
| </figure> | |
| <h3 id="without-labels"> | |
| <div>Without labels<a class="anchorjs-link " href="#without-labels" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Add <code class="highlighter-rouge">.position-static</code> to inputs within <code | |
| class="highlighter-rouge">.form-check</code> that don’t have any label text. Remember to still provide some | |
| form of label for assistive technologies (for instance, using <code | |
| class="highlighter-rouge">aria-label</code>).</p> | |
| <div class="bd-example"> | |
| <div class="form-check"> | |
| <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" | |
| aria-label="..."> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" | |
| value="option1" aria-label="..."> | |
| </div> | |
| </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">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input position-static"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"blankCheckbox"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input position-static"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"blankRadio"</span> <span class="na">id=</span><span class="s">"blankRadio1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span> | |
| <span class="nt"></div></span></code></pre> | |
| </figure> | |
| <h2 id="layout"> | |
| <div>Layout<a class="anchorjs-link " href="#layout" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Since Bootstrap applies <code class="highlighter-rouge">display: block</code> and <code | |
| class="highlighter-rouge">width: 100%</code> to almost all our form controls, forms will by default stack | |
| vertically. Additional classes can be used to vary this layout on a per-form basis.</p> | |
| <h3 id="form-groups"> | |
| <div>Form groups<a class="anchorjs-link " href="#form-groups" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>The <code class="highlighter-rouge">.form-group</code> class is the easiest way to add some structure to forms. | |
| It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form | |
| validation messaging. By default it only applies <code class="highlighter-rouge">margin-bottom</code>, but it | |
| picks up additional styles in <code class="highlighter-rouge">.form-inline</code> as needed. Use it with <code | |
| class="highlighter-rouge"><fieldset></code>s, <code class="highlighter-rouge"><div></code>s, or | |
| nearly any other element.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-group"> | |
| <label for="formGroupExampleInput">Example label</label> | |
| <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="formGroupExampleInput2">Another label</label> | |
| <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"formGroupExampleInput"</span><span class="nt">></span>Example label<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"formGroupExampleInput"</span> <span class="na">placeholder=</span><span class="s">"Example input"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"formGroupExampleInput2"</span><span class="nt">></span>Another label<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"formGroupExampleInput2"</span> <span class="na">placeholder=</span><span class="s">"Another input"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h3 id="form-grid"> | |
| <div>Form grid<a class="anchorjs-link " href="#form-grid" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>More complex forms can be built using our grid classes. Use these for form layouts that require multiple | |
| columns, varied widths, and additional alignment options.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="row"> | |
| <div class="col"> | |
| <input type="text" class="form-control" placeholder="First name"> | |
| </div> | |
| <div class="col"> | |
| <input type="text" class="form-control" placeholder="Last name"> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"First name"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h4 id="form-row"> | |
| <div>Form row<a class="anchorjs-link " href="#form-row" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h4> | |
| <p>You may also swap <code class="highlighter-rouge">.row</code> for <code | |
| class="highlighter-rouge">.form-row</code>, a variation of our standard grid row that overrides the default | |
| column gutters for tighter and more compact layouts.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-row"> | |
| <div class="col"> | |
| <input type="text" class="form-control" placeholder="First name"> | |
| </div> | |
| <div class="col"> | |
| <input type="text" class="form-control" placeholder="Last name"> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"First name"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <p>More complex layouts can also be created with the grid system.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-row"> | |
| <div class="form-group col-md-6"> | |
| <label for="inputEmail4">Email</label> | |
| <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> | |
| </div> | |
| <div class="form-group col-md-6"> | |
| <label for="inputPassword4">Password</label> | |
| <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="inputAddress">Address</label> | |
| <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="inputAddress2">Address 2</label> | |
| <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group col-md-6"> | |
| <label for="inputCity">City</label> | |
| <input type="text" class="form-control" id="inputCity"> | |
| </div> | |
| <div class="form-group col-md-4"> | |
| <label for="inputState">State</label> | |
| <select id="inputState" class="form-control"> | |
| <option selected="">Choose...</option> | |
| <option>...</option> | |
| </select> | |
| </div> | |
| <div class="form-group col-md-2"> | |
| <label for="inputZip">Zip</label> | |
| <input type="text" class="form-control" id="inputZip"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="gridCheck"> | |
| <label class="form-check-label" for="gridCheck"> | |
| Check me out | |
| </label> | |
| </div> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Sign in</button> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputEmail4"</span><span class="nt">></span>Email<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputEmail4"</span> <span class="na">placeholder=</span><span class="s">"Email"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword4"</span><span class="nt">></span>Password<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword4"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputAddress"</span><span class="nt">></span>Address<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputAddress"</span> <span class="na">placeholder=</span><span class="s">"1234 Main St"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputAddress2"</span><span class="nt">></span>Address 2<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputAddress2"</span> <span class="na">placeholder=</span><span class="s">"Apartment, studio, or floor"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputCity"</span><span class="nt">></span>City<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputCity"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-4"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputState"</span><span class="nt">></span>State<span class="nt"></label></span> | |
| <span class="nt"><select</span> <span class="na">id=</span><span class="s">"inputState"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span> | |
| <span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Choose...<span class="nt"></option></span> | |
| <span class="nt"><option></span>...<span class="nt"></option></span> | |
| <span class="nt"></select></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-2"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputZip"</span><span class="nt">></span>Zip<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputZip"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"gridCheck"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"gridCheck"</span><span class="nt">></span> | |
| Check me out | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Sign in<span class="nt"></button></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h4 id="horizontal-form"> | |
| <div>Horizontal form<a class="anchorjs-link " href="#horizontal-form" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h4> | |
| <p>Create horizontal forms with the grid by adding the <code class="highlighter-rouge">.row</code> class to form | |
| groups and using the <code class="highlighter-rouge">.col-*-*</code> classes to specify the width of your labels | |
| and controls. Be sure to add <code class="highlighter-rouge">.col-form-label</code> to your <code | |
| class="highlighter-rouge"><label></code>s as well so they’re vertically centered with their associated | |
| form controls.</p> | |
| <p>At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For | |
| example, we’ve removed the <code class="highlighter-rouge">padding-top</code> on our stacked radio inputs label | |
| to better align the text baseline.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-group row"> | |
| <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> | |
| <div class="col-sm-10"> | |
| <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> | |
| </div> | |
| </div> | |
| <div class="form-group row"> | |
| <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label> | |
| <div class="col-sm-10"> | |
| <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> | |
| </div> | |
| </div> | |
| <fieldset class="form-group"> | |
| <div class="row"> | |
| <legend class="col-form-label col-sm-2 pt-0">Radios</legend> | |
| <div class="col-sm-10"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" | |
| checked=""> | |
| <label class="form-check-label" for="gridRadios1"> | |
| First radio | |
| </label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> | |
| <label class="form-check-label" for="gridRadios2"> | |
| Second radio | |
| </label> | |
| </div> | |
| <div class="form-check disabled"> | |
| <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" | |
| disabled=""> | |
| <label class="form-check-label" for="gridRadios3"> | |
| Third disabled radio | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </fieldset> | |
| <div class="form-group row"> | |
| <div class="col-sm-2">Checkbox</div> | |
| <div class="col-sm-10"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="gridCheck1"> | |
| <label class="form-check-label" for="gridCheck1"> | |
| Example checkbox | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group row"> | |
| <div class="col-sm-10"> | |
| <button type="submit" class="btn btn-primary">Sign in</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputEmail3"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label"</span><span class="nt">></span>Email<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputEmail3"</span> <span class="na">placeholder=</span><span class="s">"Email"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword3"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label"</span><span class="nt">></span>Password<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword3"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><fieldset</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> | |
| <span class="nt"><legend</span> <span class="na">class=</span><span class="s">"col-form-label col-sm-2 pt-0"</span><span class="nt">></span>Radios<span class="nt"></legend></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gridRadios"</span> <span class="na">id=</span><span class="s">"gridRadios1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">checked</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"gridRadios1"</span><span class="nt">></span> | |
| First radio | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gridRadios"</span> <span class="na">id=</span><span class="s">"gridRadios2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"gridRadios2"</span><span class="nt">></span> | |
| Second radio | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check disabled"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gridRadios"</span> <span class="na">id=</span><span class="s">"gridRadios3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"gridRadios3"</span><span class="nt">></span> | |
| Third disabled radio | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></fieldset></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-2"</span><span class="nt">></span>Checkbox<span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"gridCheck1"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"gridCheck1"</span><span class="nt">></span> | |
| Example checkbox | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Sign in<span class="nt"></button></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h5 id="horizontal-form-label-sizing"> | |
| <div>Horizontal form label sizing<a class="anchorjs-link " href="#horizontal-form-label-sizing" | |
| aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div> | |
| </h5> | |
| <p>Be sure to use <code class="highlighter-rouge">.col-form-label-sm</code> or <code | |
| class="highlighter-rouge">.col-form-label-lg</code> to your <code | |
| class="highlighter-rouge"><label></code>s or <code class="highlighter-rouge"><legend></code>s to | |
| correctly follow the size of <code class="highlighter-rouge">.form-control-lg</code> and <code | |
| class="highlighter-rouge">.form-control-sm</code>.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-group row"> | |
| <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label> | |
| <div class="col-sm-10"> | |
| <input type="email" class="form-control form-control-sm" id="colFormLabelSm" | |
| placeholder="col-form-label-sm"> | |
| </div> | |
| </div> | |
| <div class="form-group row"> | |
| <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label> | |
| <div class="col-sm-10"> | |
| <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label"> | |
| </div> | |
| </div> | |
| <div class="form-group row"> | |
| <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label> | |
| <div class="col-sm-10"> | |
| <input type="email" class="form-control form-control-lg" id="colFormLabelLg" | |
| placeholder="col-form-label-lg"> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"colFormLabelSm"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label col-form-label-sm"</span><span class="nt">></span>Email<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control form-control-sm"</span> <span class="na">id=</span><span class="s">"colFormLabelSm"</span> <span class="na">placeholder=</span><span class="s">"col-form-label-sm"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"colFormLabel"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label"</span><span class="nt">></span>Email<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"colFormLabel"</span> <span class="na">placeholder=</span><span class="s">"col-form-label"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"colFormLabelLg"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label col-form-label-lg"</span><span class="nt">></span>Email<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control form-control-lg"</span> <span class="na">id=</span><span class="s">"colFormLabelLg"</span> <span class="na">placeholder=</span><span class="s">"col-form-label-lg"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h4 id="column-sizing"> | |
| <div>Column sizing<a class="anchorjs-link " href="#column-sizing" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h4> | |
| <p>As shown in the previous examples, our grid system allows you to place any number of <code | |
| class="highlighter-rouge">.col</code>s within a <code class="highlighter-rouge">.row</code> or <code | |
| class="highlighter-rouge">.form-row</code>. They’ll split the available width equally between them. You may | |
| also pick a subset of your columns to take up more or less space, while the remaining <code | |
| class="highlighter-rouge">.col</code>s equally split the rest, with specific column classes like <code | |
| class="highlighter-rouge">.col-7</code>.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-row"> | |
| <div class="col-7"> | |
| <input type="text" class="form-control" placeholder="City"> | |
| </div> | |
| <div class="col"> | |
| <input type="text" class="form-control" placeholder="State"> | |
| </div> | |
| <div class="col"> | |
| <input type="text" class="form-control" placeholder="Zip"> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-7"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"City"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"State"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Zip"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h4 id="auto-sizing"> | |
| <div>Auto-sizing<a class="anchorjs-link " href="#auto-sizing" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h4> | |
| <p>The example below uses a flexbox utility to vertically center the contents and changes <code | |
| class="highlighter-rouge">.col</code> to <code class="highlighter-rouge">.col-auto</code> so that your columns | |
| only take up as much space as needed. Put another way, the column sizes itself based on the contents.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-row align-items-center"> | |
| <div class="col-auto"> | |
| <label class="sr-only" for="inlineFormInput">Name</label> | |
| <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe"> | |
| </div> | |
| <div class="col-auto"> | |
| <label class="sr-only" for="inlineFormInputGroup">Username</label> | |
| <div class="input-group mb-2"> | |
| <div class="input-group-prepend"> | |
| <div class="input-group-text">@</div> | |
| </div> | |
| <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username"> | |
| </div> | |
| </div> | |
| <div class="col-auto"> | |
| <div class="form-check mb-2"> | |
| <input class="form-check-input" type="checkbox" id="autoSizingCheck"> | |
| <label class="form-check-label" for="autoSizingCheck"> | |
| Remember me | |
| </label> | |
| </div> | |
| </div> | |
| <div class="col-auto"> | |
| <button type="submit" class="btn btn-primary mb-2">Submit</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row align-items-center"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormInput"</span><span class="nt">></span>Name<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control mb-2"</span> <span class="na">id=</span><span class="s">"inlineFormInput"</span> <span class="na">placeholder=</span><span class="s">"Jane Doe"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormInputGroup"</span><span class="nt">></span>Username<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-2"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>@<span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inlineFormInputGroup"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check mb-2"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"autoSizingCheck"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"autoSizingCheck"</span><span class="nt">></span> | |
| Remember me | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary mb-2"</span><span class="nt">></span>Submit<span class="nt"></button></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <p>You can then remix that once again with size-specific column classes.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-row align-items-center"> | |
| <div class="col-sm-3 my-1"> | |
| <label class="sr-only" for="inlineFormInputName">Name</label> | |
| <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe"> | |
| </div> | |
| <div class="col-sm-3 my-1"> | |
| <label class="sr-only" for="inlineFormInputGroupUsername">Username</label> | |
| <div class="input-group"> | |
| <div class="input-group-prepend"> | |
| <div class="input-group-text">@</div> | |
| </div> | |
| <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username"> | |
| </div> | |
| </div> | |
| <div class="col-auto my-1"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="autoSizingCheck2"> | |
| <label class="form-check-label" for="autoSizingCheck2"> | |
| Remember me | |
| </label> | |
| </div> | |
| </div> | |
| <div class="col-auto my-1"> | |
| <button type="submit" class="btn btn-primary">Submit</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row align-items-center"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-3 my-1"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormInputName"</span><span class="nt">></span>Name<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inlineFormInputName"</span> <span class="na">placeholder=</span><span class="s">"Jane Doe"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-3 my-1"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormInputGroupUsername"</span><span class="nt">></span>Username<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>@<span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inlineFormInputGroupUsername"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto my-1"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"autoSizingCheck2"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"autoSizingCheck2"</span><span class="nt">></span> | |
| Remember me | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto my-1"</span><span class="nt">></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Submit<span class="nt"></button></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <p>And of course <a href="#custom-forms">custom form controls</a> are supported.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-row align-items-center"> | |
| <div class="col-auto my-1"> | |
| <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label> | |
| <select class="custom-select mr-sm-2" id="inlineFormCustomSelect"> | |
| <option selected="">Choose...</option> | |
| <option value="1">One</option> | |
| <option value="2">Two</option> | |
| <option value="3">Three</option> | |
| </select> | |
| </div> | |
| <div class="col-auto my-1"> | |
| <div class="custom-control custom-checkbox mr-sm-2"> | |
| <input type="checkbox" class="custom-control-input" id="customControlAutosizing"> | |
| <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label> | |
| </div> | |
| </div> | |
| <div class="col-auto my-1"> | |
| <button type="submit" class="btn btn-primary">Submit</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row align-items-center"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto my-1"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"mr-sm-2 sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormCustomSelect"</span><span class="nt">></span>Preference<span class="nt"></label></span> | |
| <span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select mr-sm-2"</span> <span class="na">id=</span><span class="s">"inlineFormCustomSelect"</span><span class="nt">></span> | |
| <span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Choose...<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span> | |
| <span class="nt"></select></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto my-1"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox mr-sm-2"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customControlAutosizing"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customControlAutosizing"</span><span class="nt">></span>Remember my preference<span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto my-1"</span><span class="nt">></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Submit<span class="nt"></button></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h3 id="inline-forms"> | |
| <div>Inline forms<a class="anchorjs-link " href="#inline-forms" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Use the <code class="highlighter-rouge">.form-inline</code> class to display a series of labels, form controls, | |
| and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default | |
| states.</p> | |
| <ul> | |
| <li>Controls are <code class="highlighter-rouge">display: flex</code>, collapsing any HTML white space and | |
| allowing you to provide alignment control with <a href="/docs/4.1/utilities/spacing/">spacing</a> and <a | |
| href="/docs/4.1/utilities/flex/">flexbox</a> utilities.</li> | |
| <li>Controls and input groups receive <code class="highlighter-rouge">width: auto</code> to override the | |
| Bootstrap default <code class="highlighter-rouge">width: 100%</code>.</li> | |
| <li>Controls <strong>only appear inline in viewports that are at least 576px wide</strong> to account for narrow | |
| viewports on mobile devices.</li> | |
| </ul> | |
| <p>You may need to manually address the width and alignment of individual form controls with <a | |
| href="/docs/4.1/utilities/spacing/">spacing utilities</a> (as shown below). Lastly, be sure to always include | |
| a <code class="highlighter-rouge"><label></code> with each form control, even if you need to hide it from | |
| non-screenreader visitors with <code class="highlighter-rouge">.sr-only</code>.</p> | |
| <div class="bd-example"> | |
| <form class="form-inline"> | |
| <label class="sr-only" for="inlineFormInputName2">Name</label> | |
| <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe"> | |
| <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label> | |
| <div class="input-group mb-2 mr-sm-2"> | |
| <div class="input-group-prepend"> | |
| <div class="input-group-text">@</div> | |
| </div> | |
| <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username"> | |
| </div> | |
| <div class="form-check mb-2 mr-sm-2"> | |
| <input class="form-check-input" type="checkbox" id="inlineFormCheck"> | |
| <label class="form-check-label" for="inlineFormCheck"> | |
| Remember me | |
| </label> | |
| </div> | |
| <button type="submit" class="btn btn-primary mb-2">Submit</button> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormInputName2"</span><span class="nt">></span>Name<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control mb-2 mr-sm-2"</span> <span class="na">id=</span><span class="s">"inlineFormInputName2"</span> <span class="na">placeholder=</span><span class="s">"Jane Doe"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormInputGroupUsername2"</span><span class="nt">></span>Username<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-2 mr-sm-2"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>@<span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inlineFormInputGroupUsername2"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check mb-2 mr-sm-2"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineFormCheck"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineFormCheck"</span><span class="nt">></span> | |
| Remember me | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary mb-2"</span><span class="nt">></span>Submit<span class="nt"></button></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <p>Custom form controls and selects are also supported.</p> | |
| <div class="bd-example"> | |
| <form class="form-inline"> | |
| <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label> | |
| <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref"> | |
| <option selected="">Choose...</option> | |
| <option value="1">One</option> | |
| <option value="2">Two</option> | |
| <option value="3">Three</option> | |
| </select> | |
| <div class="custom-control custom-checkbox my-1 mr-sm-2"> | |
| <input type="checkbox" class="custom-control-input" id="customControlInline"> | |
| <label class="custom-control-label" for="customControlInline">Remember my preference</label> | |
| </div> | |
| <button type="submit" class="btn btn-primary my-1">Submit</button> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"my-1 mr-2"</span> <span class="na">for=</span><span class="s">"inlineFormCustomSelectPref"</span><span class="nt">></span>Preference<span class="nt"></label></span> | |
| <span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select my-1 mr-sm-2"</span> <span class="na">id=</span><span class="s">"inlineFormCustomSelectPref"</span><span class="nt">></span> | |
| <span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Choose...<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span> | |
| <span class="nt"></select></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox my-1 mr-sm-2"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customControlInline"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customControlInline"</span><span class="nt">></span>Remember my preference<span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary my-1"</span><span class="nt">></span>Submit<span class="nt"></button></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <div class="bd-callout bd-callout-warning"> | |
| <h5 id="alternatives-to-hidden-labels">Alternatives to hidden labels</h5> | |
| <p>Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label | |
| for every input. For these inline forms, you can hide the labels using the <code | |
| class="highlighter-rouge">.sr-only</code> class. There are further alternative methods of providing a label | |
| for assistive technologies, such as the <code class="highlighter-rouge">aria-label</code>, <code | |
| class="highlighter-rouge">aria-labelledby</code> or <code class="highlighter-rouge">title</code> attribute. | |
| If none of these are present, assistive technologies may resort to using the <code | |
| class="highlighter-rouge">placeholder</code> attribute, if present, but note that use of <code | |
| class="highlighter-rouge">placeholder</code> as a replacement for other labelling methods is not advised. | |
| </p> | |
| </div> | |
| <h2 id="help-text"> | |
| <div>Help text<a class="anchorjs-link " href="#help-text" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Block-level help text in forms can be created using <code class="highlighter-rouge">.form-text</code> | |
| (previously known as <code class="highlighter-rouge">.help-block</code> in v3). Inline help text can be flexibly | |
| implemented using any inline HTML element and utility classes like <code | |
| class="highlighter-rouge">.text-muted</code>.</p> | |
| <div class="bd-callout bd-callout-warning"> | |
| <h5 id="associating-help-text-with-form-controls">Associating help text with form controls</h5> | |
| <p>Help text should be explicitly associated with the form control it relates to using the <code | |
| class="highlighter-rouge">aria-describedby</code> attribute. This will ensure that assistive | |
| technologies—such as screen readers—will announce this help text when the user focuses or enters the control. | |
| </p> | |
| </div> | |
| <p>Help text below inputs can be styled with <code class="highlighter-rouge">.form-text</code>. This class | |
| includes <code class="highlighter-rouge">display: block</code> and adds some top margin for easy spacing from | |
| the inputs above.</p> | |
| <div class="bd-example"> | |
| <label for="inputPassword5">Password</label> | |
| <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock"> | |
| <small id="passwordHelpBlock" class="form-text text-muted"> | |
| Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special | |
| characters, or emoji. | |
| </small> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword5"</span><span class="nt">></span>Password<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">id=</span><span class="s">"inputPassword5"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-describedby=</span><span class="s">"passwordHelpBlock"</span><span class="nt">></span> | |
| <span class="nt"><small</span> <span class="na">id=</span><span class="s">"passwordHelpBlock"</span> <span class="na">class=</span><span class="s">"form-text text-muted"</span><span class="nt">></span> | |
| Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. | |
| <span class="nt"></small></span></code></pre> | |
| </figure> | |
| <p>Inline text can use any typical inline HTML element (be it a <code | |
| class="highlighter-rouge"><small></code>, <code class="highlighter-rouge"><span></code>, or | |
| something else) with nothing more than a utility class.</p> | |
| <div class="bd-example"> | |
| <form class="form-inline"> | |
| <div class="form-group"> | |
| <label for="inputPassword6">Password</label> | |
| <input type="password" id="inputPassword6" class="form-control mx-sm-3" | |
| aria-describedby="passwordHelpInline"> | |
| <small id="passwordHelpInline" class="text-muted"> | |
| Must be 8-20 characters long. | |
| </small> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword6"</span><span class="nt">></span>Password<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">id=</span><span class="s">"inputPassword6"</span> <span class="na">class=</span><span class="s">"form-control mx-sm-3"</span> <span class="na">aria-describedby=</span><span class="s">"passwordHelpInline"</span><span class="nt">></span> | |
| <span class="nt"><small</span> <span class="na">id=</span><span class="s">"passwordHelpInline"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span> | |
| Must be 8-20 characters long. | |
| <span class="nt"></small></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h2 id="disabled-forms"> | |
| <div>Disabled forms<a class="anchorjs-link " href="#disabled-forms" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Add the <code class="highlighter-rouge">disabled</code> boolean attribute on an input to prevent user | |
| interactions and make it appear lighter.</p> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"disabledInput"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Disabled input here..."</span> <span class="na">disabled</span><span class="nt">></span></code></pre> | |
| </figure> | |
| <p>Add the <code class="highlighter-rouge">disabled</code> attribute to a <code | |
| class="highlighter-rouge"><fieldset></code> to disable all the controls within.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <fieldset disabled=""> | |
| <div class="form-group"> | |
| <label for="disabledTextInput">Disabled input</label> | |
| <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="disabledSelect">Disabled select menu</label> | |
| <select id="disabledSelect" class="form-control"> | |
| <option>Disabled select</option> | |
| </select> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled=""> | |
| <label class="form-check-label" for="disabledFieldsetCheck"> | |
| Can't check this | |
| </label> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Submit</button> | |
| </fieldset> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><fieldset</span> <span class="na">disabled</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"disabledTextInput"</span><span class="nt">></span>Disabled input<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"disabledTextInput"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Disabled input"</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"disabledSelect"</span><span class="nt">></span>Disabled select menu<span class="nt"></label></span> | |
| <span class="nt"><select</span> <span class="na">id=</span><span class="s">"disabledSelect"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span> | |
| <span class="nt"><option></span>Disabled select<span class="nt"></option></span> | |
| <span class="nt"></select></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"disabledFieldsetCheck"</span> <span class="na">disabled</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"disabledFieldsetCheck"</span><span class="nt">></span> | |
| Can't check this | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Submit<span class="nt"></button></span> | |
| <span class="nt"></fieldset></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <div class="bd-callout bd-callout-warning"> | |
| <h5 id="caveat-with-anchors">Caveat with anchors</h5> | |
| <p>By default, browsers will treat all native form controls (<code | |
| class="highlighter-rouge"><input></code>, <code class="highlighter-rouge"><select></code> and | |
| <code class="highlighter-rouge"><button></code> elements) inside a <code | |
| class="highlighter-rouge"><fieldset disabled></code> as disabled, preventing both keyboard and mouse | |
| interactions on them. However, if your form also includes <code class="highlighter-rouge"><a ... class="btn | |
| btn-*"></code> elements, these will only be given a style of <code | |
| class="highlighter-rouge">pointer-events: none</code>. As noted in the section about <a | |
| href="/docs/4.1/components/buttons/#disabled-state">disabled state for buttons</a> (and specifically in the | |
| sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in | |
| Internet Explorer 10, and won’t prevent keyboard users from being able to focus or activate these links. So to | |
| be safe, use custom JavaScript to disable such links.</p> | |
| </div> | |
| <div class="bd-callout bd-callout-danger"> | |
| <h4 id="cross-browser-compatibility">Cross-browser compatibility</h4> | |
| <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support | |
| the <code class="highlighter-rouge">disabled</code> attribute on a <code | |
| class="highlighter-rouge"><fieldset></code>. Use custom JavaScript to disable the fieldset in these | |
| browsers.</p> | |
| </div> | |
| <h2 id="validation"> | |
| <div>Validation<a class="anchorjs-link " href="#validation" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>Provide valuable, actionable feedback to your users with HTML5 form validation–<a | |
| href="https://caniuse.com/#feat=form-validation">available in all our supported browsers</a>. Choose from the | |
| browser default validation feedback, or implement custom messages with our built-in classes and starter | |
| JavaScript.</p> | |
| <div class="bd-callout bd-callout-warning"> | |
| <p>We currently recommend using custom validation styles, as native browser default validation messages are not | |
| consistently exposed to assistive technologies in all browsers (most notably, Chrome on desktop and mobile). | |
| </p> | |
| </div> | |
| <h3 id="how-it-works"> | |
| <div>How it works<a class="anchorjs-link " href="#how-it-works" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Here’s how form validation works with Bootstrap:</p> | |
| <ul> | |
| <li>HTML form validation is applied via CSS’s two pseudo-classes, <code | |
| class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code>. It applies to | |
| <code class="highlighter-rouge"><input></code>, <code class="highlighter-rouge"><select></code>, | |
| and <code class="highlighter-rouge"><textarea></code> elements.</li> | |
| <li>Bootstrap scopes the <code class="highlighter-rouge">:invalid</code> and <code | |
| class="highlighter-rouge">:valid</code> styles to parent <code | |
| class="highlighter-rouge">.was-validated</code> class, usually applied to the <code | |
| class="highlighter-rouge"><form></code>. Otherwise, any required field without a value shows up as | |
| invalid on page load. This way, you may choose when to activate them (typically after form submission is | |
| attempted).</li> | |
| <li>To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), | |
| remove the <code class="highlighter-rouge">.was-validated</code> class from the <code | |
| class="highlighter-rouge"><form></code> again after submission.</li> | |
| <li>As a fallback, <code class="highlighter-rouge">.is-invalid</code> and <code | |
| class="highlighter-rouge">.is-valid</code> classes may be used instead of the pseudo-classes for <a | |
| href="#server-side">server side validation</a>. They do not require a <code | |
| class="highlighter-rouge">.was-validated</code> parent class.</li> | |
| <li>Due to constraints in how CSS works, we cannot (at present) apply styles to a <code | |
| class="highlighter-rouge"><label></code> that comes before a form control in the DOM without the help | |
| of custom JavaScript.</li> | |
| <li>All modern browsers support the <a | |
| href="https://www.w3.org/TR/html5/sec-forms.html#the-constraint-validation-api">constraint validation | |
| API</a>, a series of JavaScript methods for validating form controls.</li> | |
| <li>Feedback messages may utilize the <a href="#browser-defaults">browser defaults</a> (different for each | |
| browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.</li> | |
| <li>You may provide custom validity messages with <code class="highlighter-rouge">setCustomValidity</code> in | |
| JavaScript.</li> | |
| </ul> | |
| <p>With that in mind, consider the following demos for our custom form validation styles, optional server side | |
| classes, and browser defaults.</p> | |
| <h3 id="custom-styles"> | |
| <div>Custom styles<a class="anchorjs-link " href="#custom-styles" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>For custom Bootstrap form validation messages, you’ll need to add the <code | |
| class="highlighter-rouge">novalidate</code> boolean attribute to your <code | |
| class="highlighter-rouge"><form></code>. This disables the browser default feedback tooltips, but still | |
| provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will | |
| intercept the submit button and relay feedback to you.</p> | |
| <p>When attempting to submit, you’ll see the <code class="highlighter-rouge">:invalid</code> and <code | |
| class="highlighter-rouge">:valid</code> styles applied to your form controls.</p> | |
| <div class="bd-example"> | |
| <form class="needs-validation" novalidate=""> | |
| <div class="form-row"> | |
| <div class="col-md-4 mb-3"> | |
| <label for="validationCustom01">First name</label> | |
| <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" | |
| required=""> | |
| <div class="valid-feedback"> | |
| Looks good! | |
| </div> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <label for="validationCustom02">Last name</label> | |
| <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" | |
| required=""> | |
| <div class="valid-feedback"> | |
| Looks good! | |
| </div> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <label for="validationCustomUsername">Username</label> | |
| <div class="input-group"> | |
| <div class="input-group-prepend"> | |
| <span class="input-group-text" id="inputGroupPrepend">@</span> | |
| </div> | |
| <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" | |
| aria-describedby="inputGroupPrepend" required=""> | |
| <div class="invalid-feedback"> | |
| Please choose a username. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="col-md-6 mb-3"> | |
| <label for="validationCustom03">City</label> | |
| <input type="text" class="form-control" id="validationCustom03" placeholder="City" required=""> | |
| <div class="invalid-feedback"> | |
| Please provide a valid city. | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <label for="validationCustom04">State</label> | |
| <input type="text" class="form-control" id="validationCustom04" placeholder="State" required=""> | |
| <div class="invalid-feedback"> | |
| Please provide a valid state. | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <label for="validationCustom05">Zip</label> | |
| <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required=""> | |
| <div class="invalid-feedback"> | |
| Please provide a valid zip. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required=""> | |
| <label class="form-check-label" for="invalidCheck"> | |
| Agree to terms and conditions | |
| </label> | |
| <div class="invalid-feedback"> | |
| You must agree before submitting. | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" type="submit">Submit form</button> | |
| </form> | |
| <script> | |
| // Example starter JavaScript for disabling form submissions if there are invalid fields | |
| (function () { | |
| 'use strict'; | |
| window.addEventListener('load', function () { | |
| // Fetch all the forms we want to apply custom Bootstrap validation styles to | |
| var forms = document.getElementsByClassName('needs-validation'); | |
| // Loop over them and prevent submission | |
| var validation = Array.prototype.filter.call(forms, function (form) { | |
| form.addEventListener('submit', function (event) { | |
| if (form.checkValidity() === false) { | |
| event.preventDefault(); | |
| event.stopPropagation(); | |
| } | |
| form.classList.add('was-validated'); | |
| }, false); | |
| }); | |
| }, false); | |
| })(); | |
| </script> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"needs-validation"</span> <span class="na">novalidate</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom01"</span><span class="nt">></span>First name<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationCustom01"</span> <span class="na">placeholder=</span><span class="s">"First name"</span> <span class="na">value=</span><span class="s">"Mark"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-feedback"</span><span class="nt">></span> | |
| Looks good! | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom02"</span><span class="nt">></span>Last name<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationCustom02"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span> <span class="na">value=</span><span class="s">"Otto"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-feedback"</span><span class="nt">></span> | |
| Looks good! | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustomUsername"</span><span class="nt">></span>Username<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span> | |
| <span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"inputGroupPrepend"</span><span class="nt">></span>@<span class="nt"></span></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationCustomUsername"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"inputGroupPrepend"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span> | |
| Please choose a username. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom03"</span><span class="nt">></span>City<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationCustom03"</span> <span class="na">placeholder=</span><span class="s">"City"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span> | |
| Please provide a valid city. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom04"</span><span class="nt">></span>State<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationCustom04"</span> <span class="na">placeholder=</span><span class="s">"State"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span> | |
| Please provide a valid state. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom05"</span><span class="nt">></span>Zip<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationCustom05"</span> <span class="na">placeholder=</span><span class="s">"Zip"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span> | |
| Please provide a valid zip. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"invalidCheck"</span><span class="nt">></span> | |
| Agree to terms and conditions | |
| <span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span> | |
| You must agree before submitting. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit form<span class="nt"></button></span> | |
| <span class="nt"></form></span> | |
| <span class="nt"><script></span> | |
| <span class="c1">// Example starter JavaScript for disabling form submissions if there are invalid fields</span> | |
| <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> | |
| <span class="s1">'use strict'</span><span class="p">;</span> | |
| <span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'load'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> | |
| <span class="c1">// Fetch all the forms we want to apply custom Bootstrap validation styles to</span> | |
| <span class="kd">var</span> <span class="nx">forms</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'needs-validation'</span><span class="p">);</span> | |
| <span class="c1">// Loop over them and prevent submission</span> | |
| <span class="kd">var</span> <span class="nx">validation</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">filter</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">forms</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">form</span><span class="p">)</span> <span class="p">{</span> | |
| <span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'submit'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> | |
| <span class="k">if</span> <span class="p">(</span><span class="nx">form</span><span class="p">.</span><span class="nx">checkValidity</span><span class="p">()</span> <span class="o">===</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span> | |
| <span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> | |
| <span class="nx">event</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span> | |
| <span class="p">}</span> | |
| <span class="nx">form</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'was-validated'</span><span class="p">);</span> | |
| <span class="p">},</span> <span class="kc">false</span><span class="p">);</span> | |
| <span class="p">});</span> | |
| <span class="p">},</span> <span class="kc">false</span><span class="p">);</span> | |
| <span class="p">})();</span> | |
| <span class="nt"></script></span></code></pre> | |
| </figure> | |
| <h3 id="browser-defaults"> | |
| <div>Browser defaults<a class="anchorjs-link " href="#browser-defaults" aria-label="Anchor" | |
| data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, | |
| you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a | |
| slightly different style of feedback.</p> | |
| <p>While these feedback styles cannot be styled with CSS, you can still customize the feedback text through | |
| JavaScript.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-row"> | |
| <div class="col-md-4 mb-3"> | |
| <label for="validationDefault01">First name</label> | |
| <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" | |
| required=""> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <label for="validationDefault02">Last name</label> | |
| <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" | |
| required=""> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <label for="validationDefaultUsername">Username</label> | |
| <div class="input-group"> | |
| <div class="input-group-prepend"> | |
| <span class="input-group-text" id="inputGroupPrepend2">@</span> | |
| </div> | |
| <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" | |
| aria-describedby="inputGroupPrepend2" required=""> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="col-md-6 mb-3"> | |
| <label for="validationDefault03">City</label> | |
| <input type="text" class="form-control" id="validationDefault03" placeholder="City" required=""> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <label for="validationDefault04">State</label> | |
| <input type="text" class="form-control" id="validationDefault04" placeholder="State" required=""> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <label for="validationDefault05">Zip</label> | |
| <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required=""> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required=""> | |
| <label class="form-check-label" for="invalidCheck2"> | |
| Agree to terms and conditions | |
| </label> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" type="submit">Submit form</button> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationDefault01"</span><span class="nt">></span>First name<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationDefault01"</span> <span class="na">placeholder=</span><span class="s">"First name"</span> <span class="na">value=</span><span class="s">"Mark"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationDefault02"</span><span class="nt">></span>Last name<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationDefault02"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span> <span class="na">value=</span><span class="s">"Otto"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationDefaultUsername"</span><span class="nt">></span>Username<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span> | |
| <span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"inputGroupPrepend2"</span><span class="nt">></span>@<span class="nt"></span></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationDefaultUsername"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"inputGroupPrepend2"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationDefault03"</span><span class="nt">></span>City<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationDefault03"</span> <span class="na">placeholder=</span><span class="s">"City"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationDefault04"</span><span class="nt">></span>State<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationDefault04"</span> <span class="na">placeholder=</span><span class="s">"State"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationDefault05"</span><span class="nt">></span>Zip<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationDefault05"</span> <span class="na">placeholder=</span><span class="s">"Zip"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck2"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"invalidCheck2"</span><span class="nt">></span> | |
| Agree to terms and conditions | |
| <span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit form<span class="nt"></button></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h3 id="server-side"> | |
| <div>Server side<a class="anchorjs-link " href="#server-side" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>We recommend using client side validation, but in case you require server side, you can indicate invalid and | |
| valid form fields with <code class="highlighter-rouge">.is-invalid</code> and <code | |
| class="highlighter-rouge">.is-valid</code>. Note that <code class="highlighter-rouge">.invalid-feedback</code> | |
| is also supported with these classes.</p> | |
| <div class="bd-example"> | |
| <form> | |
| <div class="form-row"> | |
| <div class="col-md-4 mb-3"> | |
| <label for="validationServer01">First name</label> | |
| <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" | |
| value="Mark" required=""> | |
| <div class="valid-feedback"> | |
| Looks good! | |
| </div> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <label for="validationServer02">Last name</label> | |
| <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" | |
| value="Otto" required=""> | |
| <div class="valid-feedback"> | |
| Looks good! | |
| </div> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <label for="validationServerUsername">Username</label> | |
| <div class="input-group"> | |
| <div class="input-group-prepend"> | |
| <span class="input-group-text" id="inputGroupPrepend3">@</span> | |
| </div> | |
| <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" | |
| aria-describedby="inputGroupPrepend3" required=""> | |
| <div class="invalid-feedback"> | |
| Please choose a username. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="col-md-6 mb-3"> | |
| <label for="validationServer03">City</label> | |
| <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required=""> | |
| <div class="invalid-feedback"> | |
| Please provide a valid city. | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <label for="validationServer04">State</label> | |
| <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" | |
| required=""> | |
| <div class="invalid-feedback"> | |
| Please provide a valid state. | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <label for="validationServer05">Zip</label> | |
| <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required=""> | |
| <div class="invalid-feedback"> | |
| Please provide a valid zip. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <div class="form-check"> | |
| <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required=""> | |
| <label class="form-check-label" for="invalidCheck3"> | |
| Agree to terms and conditions | |
| </label> | |
| <div class="invalid-feedback"> | |
| You must agree before submitting. | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" type="submit">Submit form</button> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer01"</span><span class="nt">></span>First name<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-valid"</span> <span class="na">id=</span><span class="s">"validationServer01"</span> <span class="na">placeholder=</span><span class="s">"First name"</span> <span class="na">value=</span><span class="s">"Mark"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-feedback"</span><span class="nt">></span> | |
| Looks good! | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer02"</span><span class="nt">></span>Last name<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-valid"</span> <span class="na">id=</span><span class="s">"validationServer02"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span> <span class="na">value=</span><span class="s">"Otto"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-feedback"</span><span class="nt">></span> | |
| Looks good! | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServerUsername"</span><span class="nt">></span>Username<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span> | |
| <span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"inputGroupPrepend3"</span><span class="nt">></span>@<span class="nt"></span></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServerUsername"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"inputGroupPrepend3"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span> | |
| Please choose a username. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer03"</span><span class="nt">></span>City<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer03"</span> <span class="na">placeholder=</span><span class="s">"City"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span> | |
| Please provide a valid city. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer04"</span><span class="nt">></span>State<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer04"</span> <span class="na">placeholder=</span><span class="s">"State"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span> | |
| Please provide a valid state. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer05"</span><span class="nt">></span>Zip<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer05"</span> <span class="na">placeholder=</span><span class="s">"Zip"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span> | |
| Please provide a valid zip. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input is-invalid"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck3"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"invalidCheck3"</span><span class="nt">></span> | |
| Agree to terms and conditions | |
| <span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span> | |
| You must agree before submitting. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit form<span class="nt"></button></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h3 id="supported-elements"> | |
| <div>Supported elements<a class="anchorjs-link " href="#supported-elements" aria-label="Anchor" | |
| data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Our example forms show native textual <code class="highlighter-rouge"><input></code>s above, but form | |
| validation styles are available for our custom form controls, too.</p> | |
| <div class="bd-example"> | |
| <form class="was-validated"> | |
| <div class="custom-control custom-checkbox mb-3"> | |
| <input type="checkbox" class="custom-control-input" id="customControlValidation1" required=""> | |
| <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label> | |
| <div class="invalid-feedback">Example invalid feedback text</div> | |
| </div> | |
| <div class="custom-control custom-radio"> | |
| <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" | |
| required=""> | |
| <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label> | |
| </div> | |
| <div class="custom-control custom-radio mb-3"> | |
| <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" | |
| required=""> | |
| <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label> | |
| <div class="invalid-feedback">More example invalid feedback text</div> | |
| </div> | |
| <div class="form-group"> | |
| <select class="custom-select" required=""> | |
| <option value="">Open this select menu</option> | |
| <option value="1">One</option> | |
| <option value="2">Two</option> | |
| <option value="3">Three</option> | |
| </select> | |
| <div class="invalid-feedback">Example invalid custom select feedback</div> | |
| </div> | |
| <div class="custom-file"> | |
| <input type="file" class="custom-file-input" id="validatedCustomFile" required=""> | |
| <label class="custom-file-label" for="validatedCustomFile">Choose file...</label> | |
| <div class="invalid-feedback">Example invalid custom file feedback</div> | |
| </div> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"was-validated"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox mb-3"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customControlValidation1"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customControlValidation1"</span><span class="nt">></span>Check this custom checkbox<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>Example invalid feedback text<span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-radio"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customControlValidation2"</span> <span class="na">name=</span><span class="s">"radio-stacked"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customControlValidation2"</span><span class="nt">></span>Toggle this custom radio<span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-radio mb-3"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customControlValidation3"</span> <span class="na">name=</span><span class="s">"radio-stacked"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customControlValidation3"</span><span class="nt">></span>Or toggle this other custom radio<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>More example invalid feedback text<span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span> | |
| <span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>Open this select menu<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span> | |
| <span class="nt"></select></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>Example invalid custom select feedback<span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"validatedCustomFile"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"validatedCustomFile"</span><span class="nt">></span>Choose file...<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>Example invalid custom file feedback<span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h3 id="tooltips"> | |
| <div>Tooltips<a class="anchorjs-link " href="#tooltips" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>If your form layout allows it, you can swap the <code | |
| class="highlighter-rouge">.{valid|invalid}-feedback</code> classes for <code | |
| class="highlighter-rouge">.{valid|invalid}-tooltip</code> classes to display validation feedback in a styled | |
| tooltip. Be sure to have a parent with <code class="highlighter-rouge">position: relative</code> on it for | |
| tooltip positioning. In the example below, our column classes have this already, but your project may require an | |
| alternative setup.</p> | |
| <div class="bd-example"> | |
| <form class="needs-validation" novalidate=""> | |
| <div class="form-row"> | |
| <div class="col-md-4 mb-3"> | |
| <label for="validationTooltip01">First name</label> | |
| <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" | |
| required=""> | |
| <div class="valid-tooltip"> | |
| Looks good! | |
| </div> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <label for="validationTooltip02">Last name</label> | |
| <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" | |
| required=""> | |
| <div class="valid-tooltip"> | |
| Looks good! | |
| </div> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <label for="validationTooltipUsername">Username</label> | |
| <div class="input-group"> | |
| <div class="input-group-prepend"> | |
| <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span> | |
| </div> | |
| <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" | |
| aria-describedby="validationTooltipUsernamePrepend" required=""> | |
| <div class="invalid-tooltip"> | |
| Please choose a unique and valid username. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="col-md-6 mb-3"> | |
| <label for="validationTooltip03">City</label> | |
| <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required=""> | |
| <div class="invalid-tooltip"> | |
| Please provide a valid city. | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <label for="validationTooltip04">State</label> | |
| <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required=""> | |
| <div class="invalid-tooltip"> | |
| Please provide a valid state. | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <label for="validationTooltip05">Zip</label> | |
| <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required=""> | |
| <div class="invalid-tooltip"> | |
| Please provide a valid zip. | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" type="submit">Submit form</button> | |
| </form> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"needs-validation"</span> <span class="na">novalidate</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip01"</span><span class="nt">></span>First name<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationTooltip01"</span> <span class="na">placeholder=</span><span class="s">"First name"</span> <span class="na">value=</span><span class="s">"Mark"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-tooltip"</span><span class="nt">></span> | |
| Looks good! | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip02"</span><span class="nt">></span>Last name<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationTooltip02"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span> <span class="na">value=</span><span class="s">"Otto"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-tooltip"</span><span class="nt">></span> | |
| Looks good! | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltipUsername"</span><span class="nt">></span>Username<span class="nt"></label></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span> | |
| <span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"validationTooltipUsernamePrepend"</span><span class="nt">></span>@<span class="nt"></span></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationTooltipUsername"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"validationTooltipUsernamePrepend"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-tooltip"</span><span class="nt">></span> | |
| Please choose a unique and valid username. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip03"</span><span class="nt">></span>City<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationTooltip03"</span> <span class="na">placeholder=</span><span class="s">"City"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-tooltip"</span><span class="nt">></span> | |
| Please provide a valid city. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip04"</span><span class="nt">></span>State<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationTooltip04"</span> <span class="na">placeholder=</span><span class="s">"State"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-tooltip"</span><span class="nt">></span> | |
| Please provide a valid state. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip05"</span><span class="nt">></span>Zip<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationTooltip05"</span> <span class="na">placeholder=</span><span class="s">"Zip"</span> <span class="na">required</span><span class="nt">></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-tooltip"</span><span class="nt">></span> | |
| Please provide a valid zip. | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit form<span class="nt"></button></span> | |
| <span class="nt"></form></span></code></pre> | |
| </figure> | |
| <h2 id="custom-forms"> | |
| <div>Custom forms<a class="anchorjs-link " href="#custom-forms" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h2> | |
| <p>For even more customization and cross browser consistency, use our completely custom form elements to replace | |
| the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for | |
| any default form control.</p> | |
| <h3 id="checkboxes-and-radios-1"> | |
| <div>Checkboxes and radios<a class="anchorjs-link " href="#checkboxes-and-radios-1" aria-label="Anchor" | |
| data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Each checkbox and radio is wrapped in a <code class="highlighter-rouge"><div></code> with a sibling <code | |
| class="highlighter-rouge"><span></code> to create our custom control and a <code | |
| class="highlighter-rouge"><label></code> for the accompanying text. Structurally, this is the same | |
| approach as our default <code class="highlighter-rouge">.form-check</code>.</p> | |
| <p>We use the sibling selector (<code class="highlighter-rouge">~</code>) for all our <code | |
| class="highlighter-rouge"><input></code> states—like <code class="highlighter-rouge">:checked</code>—to | |
| properly style our custom form indicator. When combined with the <code | |
| class="highlighter-rouge">.custom-control-label</code> class, we can also style the text for each item based | |
| on the <code class="highlighter-rouge"><input></code>’s state.</p> | |
| <p>We hide the default <code class="highlighter-rouge"><input></code> with <code | |
| class="highlighter-rouge">opacity</code> and use the <code | |
| class="highlighter-rouge">.custom-control-label</code> to build a new custom form indicator in its place with | |
| <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code>. | |
| Unfortunately we can’t build a custom one from just the <code class="highlighter-rouge"><input></code> | |
| because CSS’s <code class="highlighter-rouge">content</code> doesn’t work on that element.</p> | |
| <p>In the checked states, we use <strong>base64 embedded SVG icons</strong> from <a | |
| href="https://useiconic.com/open">Open Iconic</a>. This provides us the best control for styling and | |
| positioning across browsers and devices.</p> | |
| <h4 id="checkboxes"> | |
| <div>Checkboxes<a class="anchorjs-link " href="#checkboxes" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h4> | |
| <div class="bd-example"> | |
| <div class="custom-control custom-checkbox"> | |
| <input type="checkbox" class="custom-control-input" id="customCheck1"> | |
| <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label> | |
| </div> | |
| </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">"custom-control custom-checkbox"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customCheck1"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customCheck1"</span><span class="nt">></span>Check this custom checkbox<span class="nt"></label></span> | |
| <span class="nt"></div></span></code></pre> | |
| </figure> | |
| <p>Custom checkboxes can also utilize the <code class="highlighter-rouge">:indeterminate</code> pseudo class when | |
| manually set via JavaScript (there is no available HTML attribute for specifying it).</p> | |
| <div class="bd-example bd-example-indeterminate"> | |
| <div class="custom-control custom-checkbox"> | |
| <input type="checkbox" class="custom-control-input" id="customCheck2"> | |
| <label class="custom-control-label" for="customCheck2">Check this custom checkbox</label> | |
| </div> | |
| </div> | |
| <p>If you’re using jQuery, something like this should suffice:</p> | |
| <figure class="highlight"> | |
| <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.your-checkbox'</span><span class="p">).</span><span class="nx">prop</span><span class="p">(</span><span class="s1">'indeterminate'</span><span class="p">,</span> <span class="kc">true</span><span class="p">)</span></code></pre> | |
| </figure> | |
| <h4 id="radios"> | |
| <div>Radios<a class="anchorjs-link " href="#radios" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h4> | |
| <div class="bd-example"> | |
| <div class="custom-control custom-radio"> | |
| <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"> | |
| <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label> | |
| </div> | |
| <div class="custom-control custom-radio"> | |
| <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"> | |
| <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label> | |
| </div> | |
| </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">"custom-control custom-radio"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">id=</span><span class="s">"customRadio1"</span> <span class="na">name=</span><span class="s">"customRadio"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customRadio1"</span><span class="nt">></span>Toggle this custom radio<span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-radio"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">id=</span><span class="s">"customRadio2"</span> <span class="na">name=</span><span class="s">"customRadio"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customRadio2"</span><span class="nt">></span>Or toggle this other custom radio<span class="nt"></label></span> | |
| <span class="nt"></div></span></code></pre> | |
| </figure> | |
| <h4 id="inline-1"> | |
| <div>Inline<a class="anchorjs-link " href="#inline-1" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h4> | |
| <div class="bd-example"> | |
| <div class="custom-control custom-radio custom-control-inline"> | |
| <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input"> | |
| <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label> | |
| </div> | |
| <div class="custom-control custom-radio custom-control-inline"> | |
| <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input"> | |
| <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label> | |
| </div> | |
| </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">"custom-control custom-radio custom-control-inline"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">id=</span><span class="s">"customRadioInline1"</span> <span class="na">name=</span><span class="s">"customRadioInline1"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customRadioInline1"</span><span class="nt">></span>Toggle this custom radio<span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-radio custom-control-inline"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">id=</span><span class="s">"customRadioInline2"</span> <span class="na">name=</span><span class="s">"customRadioInline1"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customRadioInline2"</span><span class="nt">></span>Or toggle this other custom radio<span class="nt"></label></span> | |
| <span class="nt"></div></span></code></pre> | |
| </figure> | |
| <h4 id="disabled"> | |
| <div>Disabled<a class="anchorjs-link " href="#disabled" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h4> | |
| <p>Custom checkboxes and radios can also be disabled. Add the <code class="highlighter-rouge">disabled</code> | |
| boolean attribute to the <code class="highlighter-rouge"><input></code> and the custom indicator and label | |
| description will be automatically styled.</p> | |
| <div class="bd-example"> | |
| <div class="custom-control custom-checkbox"> | |
| <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled=""> | |
| <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label> | |
| </div> | |
| <div class="custom-control custom-radio"> | |
| <input type="radio" id="customRadioDisabled" name="radioDisabled" class="custom-control-input" disabled=""> | |
| <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label> | |
| </div> | |
| </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">"custom-control custom-checkbox"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customCheckDisabled"</span> <span class="na">disabled</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customCheckDisabled"</span><span class="nt">></span>Check this custom checkbox<span class="nt"></label></span> | |
| <span class="nt"></div></span> | |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-radio"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">id=</span><span class="s">"radio3"</span> <span class="na">name=</span><span class="s">"radioDisabled"</span> <span class="na">id=</span><span class="s">"customRadioDisabled"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">disabled</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customRadioDisabled"</span><span class="nt">></span>Toggle this custom radio<span class="nt"></label></span> | |
| <span class="nt"></div></span></code></pre> | |
| </figure> | |
| <h3 id="select-menu"> | |
| <div>Select menu<a class="anchorjs-link " href="#select-menu" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Custom <code class="highlighter-rouge"><select></code> menus need only a custom class, <code | |
| class="highlighter-rouge">.custom-select</code> to trigger the custom styles. Custom styles are limited to the | |
| <code class="highlighter-rouge"><select></code>’s initial appearance and cannot modify the <code | |
| class="highlighter-rouge"><option></code>s due to browser limitations.</p> | |
| <div class="bd-example"> | |
| <select class="custom-select"> | |
| <option selected="">Open this select menu</option> | |
| <option value="1">One</option> | |
| <option value="2">Two</option> | |
| <option value="3">Three</option> | |
| </select> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span><span class="nt">></span> | |
| <span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Open this select menu<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span> | |
| <span class="nt"></select></span></code></pre> | |
| </figure> | |
| <p>You may also choose from small and large custom selects to match our similarly sized text inputs.</p> | |
| <div class="bd-example"> | |
| <select class="custom-select custom-select-lg mb-3"> | |
| <option selected="">Open this select menu</option> | |
| <option value="1">One</option> | |
| <option value="2">Two</option> | |
| <option value="3">Three</option> | |
| </select> | |
| <select class="custom-select custom-select-sm"> | |
| <option selected="">Open this select menu</option> | |
| <option value="1">One</option> | |
| <option value="2">Two</option> | |
| <option value="3">Three</option> | |
| </select> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select custom-select-lg mb-3"</span><span class="nt">></span> | |
| <span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Open this select menu<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span> | |
| <span class="nt"></select></span> | |
| <span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select custom-select-sm"</span><span class="nt">></span> | |
| <span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Open this select menu<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span> | |
| <span class="nt"></select></span></code></pre> | |
| </figure> | |
| <p>The <code class="highlighter-rouge">multiple</code> attribute is also supported:</p> | |
| <div class="bd-example"> | |
| <select class="custom-select" multiple=""> | |
| <option selected="">Open this select menu</option> | |
| <option value="1">One</option> | |
| <option value="2">Two</option> | |
| <option value="3">Three</option> | |
| </select> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">multiple</span><span class="nt">></span> | |
| <span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Open this select menu<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span> | |
| <span class="nt"></select></span></code></pre> | |
| </figure> | |
| <p>As is the <code class="highlighter-rouge">size</code> attribute:</p> | |
| <div class="bd-example"> | |
| <select class="custom-select" size="3"> | |
| <option selected="">Open this select menu</option> | |
| <option value="1">One</option> | |
| <option value="2">Two</option> | |
| <option value="3">Three</option> | |
| </select> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">size=</span><span class="s">"3"</span><span class="nt">></span> | |
| <span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Open this select menu<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span> | |
| <span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span> | |
| <span class="nt"></select></span></code></pre> | |
| </figure> | |
| <h3 id="range"> | |
| <div>Range<a class="anchorjs-link " href="#range" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>Create custom <code class="highlighter-rouge"><input type="range"></code> controls with <code | |
| class="highlighter-rouge">.custom-range</code>. The track (the background) and thumb (the value) are both | |
| styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or | |
| right of the thumb as a means to visually indicate progress, we do not currently support it.</p> | |
| <div class="bd-example"> | |
| <label for="customRange1">Example range</label> | |
| <input type="range" class="custom-range" id="customRange1"> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">for=</span><span class="s">"customRange1"</span><span class="nt">></span>Example range<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"custom-range"</span> <span class="na">id=</span><span class="s">"customRange1"</span><span class="nt">></span></code></pre> | |
| </figure> | |
| <p>Range inputs have implicit values for <code class="highlighter-rouge">min</code> and <code | |
| class="highlighter-rouge">max</code>—<code class="highlighter-rouge">0</code> and <code | |
| class="highlighter-rouge">100</code>, respectively. You may specify new values for those using the <code | |
| class="highlighter-rouge">min</code> and <code class="highlighter-rouge">max</code> attributes.</p> | |
| <div class="bd-example"> | |
| <label for="customRange2">Example range</label> | |
| <input type="range" class="custom-range" min="0" max="5" id="customRange2"> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">for=</span><span class="s">"customRange2"</span><span class="nt">></span>Example range<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"custom-range"</span> <span class="na">min=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"5"</span> <span class="na">id=</span><span class="s">"customRange2"</span><span class="nt">></span></code></pre> | |
| </figure> | |
| <p>By default, range inputs “snap” to integer values. To change this, you can specify a <code | |
| class="highlighter-rouge">step</code> value. In the example below, we double the number of steps by using | |
| <code class="highlighter-rouge">step="0.5"</code>.</p> | |
| <div class="bd-example"> | |
| <label for="customRange3">Example range</label> | |
| <input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3"> | |
| </div> | |
| <figure class="highlight"> | |
| <pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">for=</span><span class="s">"customRange3"</span><span class="nt">></span>Example range<span class="nt"></label></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"custom-range"</span> <span class="na">min=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"5"</span> <span class="na">step=</span><span class="s">"0.5"</span> <span class="na">id=</span><span class="s">"customRange3"</span><span class="nt">></span></code></pre> | |
| </figure> | |
| <h3 id="file-browser"> | |
| <div>File browser<a class="anchorjs-link " href="#file-browser" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h3> | |
| <p>The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up | |
| with functional <em>Choose file…</em> and selected file name text.</p> | |
| <div class="bd-example"> | |
| <div class="custom-file"> | |
| <input type="file" class="custom-file-input" id="customFile"> | |
| <label class="custom-file-label" for="customFile">Choose file</label> | |
| </div> | |
| </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">"custom-file"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"customFile"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFile"</span><span class="nt">></span>Choose file<span class="nt"></label></span> | |
| <span class="nt"></div></span></code></pre> | |
| </figure> | |
| <p>We hide the default file <code class="highlighter-rouge"><input></code> via <code | |
| class="highlighter-rouge">opacity</code> and instead style the <code | |
| class="highlighter-rouge"><label></code>. The button is generated and positioned with <code | |
| class="highlighter-rouge">::after</code>. Lastly, we declare a <code class="highlighter-rouge">width</code> | |
| and <code class="highlighter-rouge">height</code> on the <code class="highlighter-rouge"><input></code> | |
| for proper spacing for surrounding content.</p> | |
| <h4 id="translating-or-customizing-the-strings"> | |
| <div>Translating or customizing the strings<a class="anchorjs-link " | |
| href="#translating-or-customizing-the-strings" aria-label="Anchor" data-anchorjs-icon="#" | |
| style="padding-left: 0.375em;"></a></div> | |
| </h4> | |
| <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang"><code | |
| class="highlighter-rouge">:lang()</code> pseudo-class</a> is used to allow for translation of the “Browse” | |
| text into other languages. Override or add entries to the <code | |
| class="highlighter-rouge">$custom-file-text</code> Sass variable with the relevant <a | |
| href="https://en.wikipedia.org/wiki/IETF_language_tag">language tag</a> and localized strings. The English | |
| strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s | |
| language code is <code class="highlighter-rouge">es</code>):</p> | |
| <figure class="highlight"> | |
| <pre><code class="language-scss" data-lang="scss"><span class="nv">$custom-file-text</span><span class="p">:</span> <span class="p">(</span> | |
| <span class="n">en</span><span class="o">:</span> <span class="s2">"Browse"</span><span class="o">,</span> | |
| <span class="n">es</span><span class="o">:</span> <span class="s2">"Elegir"</span> | |
| <span class="p">);</span></code></pre> | |
| </figure> | |
| <p>Here’s <code class="highlighter-rouge">lang(es)</code> in action on the custom file input for a Spanish | |
| translation:</p> | |
| <div class="bd-example"> | |
| <div class="custom-file"> | |
| <input type="file" class="custom-file-input" id="customFileLang" lang="es"> | |
| <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label> | |
| </div> | |
| </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">"custom-file"</span><span class="nt">></span> | |
| <span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"customFileLang"</span> <span class="na">lang=</span><span class="s">"es"</span><span class="nt">></span> | |
| <span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFileLang"</span><span class="nt">></span>Seleccionar Archivo<span class="nt"></label></span> | |
| <span class="nt"></div></span></code></pre> | |
| </figure> | |
| <p>You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text | |
| to be shown. This can be done using <a | |
| href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">the <code | |
| class="highlighter-rouge">lang</code> attribute</a> on the <code class="highlighter-rouge"><span | |
| class="nt"><html></span></code> element or the <a | |
| href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12"><code | |
| class="highlighter-rouge">Content-Language</code> HTTP header</a>, among other methods.</p> | |
| </main> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment