diff options
| author | XhmikosR <[email protected]> | 2021-01-19 08:34:18 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2021-01-19 18:20:37 +0200 |
| commit | 0bb8f991a032ff984f45ede26b53643ffa93891b (patch) | |
| tree | b5c124360151f417b9a4c15f2a5a6f9e4389095c /docs/4.6/content | |
| parent | b298dc0b34fd1ca73e8aa83e57fac4151bfbc3db (diff) | |
| download | bootstrap-0bb8f991a032ff984f45ede26b53643ffa93891b.tar.xz bootstrap-0bb8f991a032ff984f45ede26b53643ffa93891b.zip | |
Add v4.6.0 docs
Diffstat (limited to 'docs/4.6/content')
| -rw-r--r-- | docs/4.6/content/code/index.html | 302 | ||||
| -rw-r--r-- | docs/4.6/content/figures/index.html | 282 | ||||
| -rw-r--r-- | docs/4.6/content/images/index.html | 314 | ||||
| -rw-r--r-- | docs/4.6/content/index.html | 11 | ||||
| -rw-r--r-- | docs/4.6/content/reboot/index.html | 592 | ||||
| -rw-r--r-- | docs/4.6/content/tables/index.html | 1700 | ||||
| -rw-r--r-- | docs/4.6/content/typography/index.html | 583 |
7 files changed, 3784 insertions, 0 deletions
diff --git a/docs/4.6/content/code/index.html b/docs/4.6/content/code/index.html new file mode 100644 index 000000000..8917f3ca8 --- /dev/null +++ b/docs/4.6/content/code/index.html @@ -0,0 +1,302 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> +<meta name="description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap."> +<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> +<meta name="generator" content="Hugo 0.80.0"> + +<meta name="docsearch:language" content="en"> +<meta name="docsearch:version" content="4.6"> + +<title>Code · Bootstrap v4.6</title> + +<link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/code/"> + + + +<!-- Bootstrap core CSS --> +<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> + +<!-- Documentation extras --> +<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet"> + +<link href="/docs/4.6/assets/css/docs.css" rel="stylesheet"> + +<!-- Favicons --> +<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> +<link rel="manifest" href="/docs/4.6/assets/img/favicons/manifest.json"> +<link rel="mask-icon" href="/docs/4.6/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon.ico"> +<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml"> +<meta name="theme-color" content="#563d7c"> + +<!-- Twitter --> +<meta name="twitter:card" content="summary"> +<meta name="twitter:site" content="@getbootstrap"> +<meta name="twitter:creator" content="@getbootstrap"> +<meta name="twitter:title" content="Code"> +<meta name="twitter:description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap."> +<meta name="twitter:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social-logo.png"> + +<!-- Facebook --> +<meta property="og:url" content="https://getbootstrap.com/docs/4.6/content/code/"> +<meta property="og:title" content="Code"> +<meta property="og:description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap."> +<meta property="og:type" content="article"> +<meta property="og:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social.png"> +<meta property="og:image:type" content="image/png"> +<meta property="og:image:width" content="1200"> +<meta property="og:image:height" content="630"> + +<script> + window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; + ga('create', 'UA-146052-10', 'getbootstrap.com'); + ga('set', 'anonymizeIp', true); + ga('send', 'pageview'); +</script> +<script async src="https://www.google-analytics.com/analytics.js"></script> + + + </head> + <body> + <div class="skippy overflow-hidden"> + <div class="container-xl"> + <a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a> + <a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a> + </div> +</div> + + + <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> + <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> + <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> + </a> + + <div class="navbar-nav-scroll"> + <ul class="navbar-nav bd-navbar-nav flex-row"> + <li class="nav-item"> + <a class="nav-link" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link active" href="/docs/4.6/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/docs/4.6/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> + </li> + </ul> + </div> + + <ul class="navbar-nav ml-md-auto"> + <li class="nav-item dropdown"> + <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + v4.6 + </a> + <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions"> + <a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/">5.0.x</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a> + <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="/docs/versions/">All versions</a> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"> + <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg> + </a> + </li> + </ul> + + <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a> +</header> + + + <div class="container-fluid"> + <div class="row flex-xl-nowrap"> + <div class="col-md-3 col-xl-2 bd-sidebar"> + <form role="search" class="bd-search d-flex align-items-center"> + <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.6"> + <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> + <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg> + </button> +</form> + +<div class="collapse d-md-block row" id="bd-docs-nav"> + <nav class="bd-links" aria-label="Main navigation"> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/getting-started/introduction/"> + Getting started + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/layout/overview/"> + Layout + </a> + </div> + + <div class="bd-toc-item active"> + <a class="bd-toc-link" href="/docs/4.6/content/reboot/"> + Content + </a> + <ul class="nav bd-sidenav"> + <li> + <a href="/docs/4.6/content/reboot/">Reboot</a> + </li> + <li> + <a href="/docs/4.6/content/typography/">Typography</a> + </li> + <li class="active bd-sidenav-active"> + <a href="/docs/4.6/content/code/">Code</a> + </li> + <li> + <a href="/docs/4.6/content/images/">Images</a> + </li> + <li> + <a href="/docs/4.6/content/tables/">Tables</a> + </li> + <li> + <a href="/docs/4.6/content/figures/">Figures</a> + </li> + </ul> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/components/alerts/"> + Components + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/utilities/borders/"> + Utilities + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/extend/approach/"> + Extend + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/migration/"> + Migration + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/about/overview/"> + About + </a> + </div> + </nav> +</div> + + </div> + + + <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation"> + <nav id="TableOfContents"> + <ul> + <li><a href="#inline-code">Inline code</a></li> + <li><a href="#code-blocks">Code blocks</a></li> + <li><a href="#variables">Variables</a></li> + <li><a href="#user-input">User input</a></li> + <li><a href="#sample-output">Sample output</a></li> + </ul> +</nav> + </nav> + + + <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> + <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> + <a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4-dev/site/content/docs/4.6/content/code.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a> + <h1 class="bd-title" id="content">Code</h1> + </div> + <p class="bd-lead">Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.</p> + <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> + + <h2 id="inline-code">Inline code</h2> +<p>Wrap inline snippets of code with <code><code></code>. Be sure to escape HTML angle brackets.</p> +<div class="bd-example"> +For example, <code><section></code> should be wrapped as inline. +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html">For example, <span class="p"><</span><span class="nt">code</span><span class="p">></span><span class="ni">&lt;</span>section<span class="ni">&gt;</span><span class="p"></</span><span class="nt">code</span><span class="p">></span> should be wrapped as inline.</code></pre></div> +<h2 id="code-blocks">Code blocks</h2> +<p>Use <code><pre></code>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the <code>.pre-scrollable</code> class, which will set a max-height of 340px and provide a y-axis scrollbar.</p> +<div class="bd-example"> +<pre><code><p>Sample text here...</p> +<p>And another line of sample text here...</p> +</code></pre> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">pre</span><span class="p">><</span><span class="nt">code</span><span class="p">></span><span class="ni">&lt;</span>p<span class="ni">&gt;</span>Sample text here...<span class="ni">&lt;</span>/p<span class="ni">&gt;</span> +<span class="ni">&lt;</span>p<span class="ni">&gt;</span>And another line of sample text here...<span class="ni">&lt;</span>/p<span class="ni">&gt;</span> +<span class="p"></</span><span class="nt">code</span><span class="p">></</span><span class="nt">pre</span><span class="p">></span></code></pre></div> +<h2 id="variables">Variables</h2> +<p>For indicating variables use the <code><var></code> tag.</p> +<div class="bd-example"> +<var>y</var> = <var>m</var><var>x</var> + <var>b</var> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">var</span><span class="p">></span>y<span class="p"></</span><span class="nt">var</span><span class="p">></span> = <span class="p"><</span><span class="nt">var</span><span class="p">></span>m<span class="p"></</span><span class="nt">var</span><span class="p">><</span><span class="nt">var</span><span class="p">></span>x<span class="p"></</span><span class="nt">var</span><span class="p">></span> + <span class="p"><</span><span class="nt">var</span><span class="p">></span>b<span class="p"></</span><span class="nt">var</span><span class="p">></span></code></pre></div> +<h2 id="user-input">User input</h2> +<p>Use the <code><kbd></code> to indicate input that is typically entered via keyboard.</p> +<div class="bd-example"> +To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> +To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html">To switch directories, type <span class="p"><</span><span class="nt">kbd</span><span class="p">></span>cd<span class="p"></</span><span class="nt">kbd</span><span class="p">></span> followed by the name of the directory.<span class="p"><</span><span class="nt">br</span><span class="p">></span> +To edit settings, press <span class="p"><</span><span class="nt">kbd</span><span class="p">><</span><span class="nt">kbd</span><span class="p">></span>ctrl<span class="p"></</span><span class="nt">kbd</span><span class="p">></span> + <span class="p"><</span><span class="nt">kbd</span><span class="p">></span>,<span class="p"></</span><span class="nt">kbd</span><span class="p">></</span><span class="nt">kbd</span><span class="p">></span></code></pre></div> +<h2 id="sample-output">Sample output</h2> +<p>For indicating sample output from a program use the <code><samp></code> tag.</p> +<div class="bd-example"> +<samp>This text is meant to be treated as sample output from a computer program.</samp> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">samp</span><span class="p">></span>This text is meant to be treated as sample output from a computer program.<span class="p"></</span><span class="nt">samp</span><span class="p">></span></code></pre></div> + + </main> + </div> + </div> + + <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> +<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script> + +<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> + + +<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> + +<script src="/docs/4.6/assets/js/docs.min.js"></script> + + </body> +</html> diff --git a/docs/4.6/content/figures/index.html b/docs/4.6/content/figures/index.html new file mode 100644 index 000000000..df589fcbd --- /dev/null +++ b/docs/4.6/content/figures/index.html @@ -0,0 +1,282 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> +<meta name="description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap."> +<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> +<meta name="generator" content="Hugo 0.80.0"> + +<meta name="docsearch:language" content="en"> +<meta name="docsearch:version" content="4.6"> + +<title>Figures · Bootstrap v4.6</title> + +<link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/figures/"> + + + +<!-- Bootstrap core CSS --> +<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> + +<!-- Documentation extras --> +<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet"> + +<link href="/docs/4.6/assets/css/docs.css" rel="stylesheet"> + +<!-- Favicons --> +<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> +<link rel="manifest" href="/docs/4.6/assets/img/favicons/manifest.json"> +<link rel="mask-icon" href="/docs/4.6/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon.ico"> +<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml"> +<meta name="theme-color" content="#563d7c"> + +<!-- Twitter --> +<meta name="twitter:card" content="summary"> +<meta name="twitter:site" content="@getbootstrap"> +<meta name="twitter:creator" content="@getbootstrap"> +<meta name="twitter:title" content="Figures"> +<meta name="twitter:description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap."> +<meta name="twitter:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social-logo.png"> + +<!-- Facebook --> +<meta property="og:url" content="https://getbootstrap.com/docs/4.6/content/figures/"> +<meta property="og:title" content="Figures"> +<meta property="og:description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap."> +<meta property="og:type" content="article"> +<meta property="og:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social.png"> +<meta property="og:image:type" content="image/png"> +<meta property="og:image:width" content="1200"> +<meta property="og:image:height" content="630"> + +<script> + window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; + ga('create', 'UA-146052-10', 'getbootstrap.com'); + ga('set', 'anonymizeIp', true); + ga('send', 'pageview'); +</script> +<script async src="https://www.google-analytics.com/analytics.js"></script> + + + </head> + <body> + <div class="skippy overflow-hidden"> + <div class="container-xl"> + <a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a> + <a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a> + </div> +</div> + + + <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> + <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> + <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> + </a> + + <div class="navbar-nav-scroll"> + <ul class="navbar-nav bd-navbar-nav flex-row"> + <li class="nav-item"> + <a class="nav-link" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link active" href="/docs/4.6/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/docs/4.6/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> + </li> + </ul> + </div> + + <ul class="navbar-nav ml-md-auto"> + <li class="nav-item dropdown"> + <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + v4.6 + </a> + <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions"> + <a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/">5.0.x</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a> + <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="/docs/versions/">All versions</a> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"> + <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg> + </a> + </li> + </ul> + + <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a> +</header> + + + <div class="container-fluid"> + <div class="row flex-xl-nowrap"> + <div class="col-md-3 col-xl-2 bd-sidebar"> + <form role="search" class="bd-search d-flex align-items-center"> + <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.6"> + <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> + <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg> + </button> +</form> + +<div class="collapse d-md-block row" id="bd-docs-nav"> + <nav class="bd-links" aria-label="Main navigation"> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/getting-started/introduction/"> + Getting started + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/layout/overview/"> + Layout + </a> + </div> + + <div class="bd-toc-item active"> + <a class="bd-toc-link" href="/docs/4.6/content/reboot/"> + Content + </a> + <ul class="nav bd-sidenav"> + <li> + <a href="/docs/4.6/content/reboot/">Reboot</a> + </li> + <li> + <a href="/docs/4.6/content/typography/">Typography</a> + </li> + <li> + <a href="/docs/4.6/content/code/">Code</a> + </li> + <li> + <a href="/docs/4.6/content/images/">Images</a> + </li> + <li> + <a href="/docs/4.6/content/tables/">Tables</a> + </li> + <li class="active bd-sidenav-active"> + <a href="/docs/4.6/content/figures/">Figures</a> + </li> + </ul> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/components/alerts/"> + Components + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/utilities/borders/"> + Utilities + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/extend/approach/"> + Extend + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/migration/"> + Migration + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/about/overview/"> + About + </a> + </div> + </nav> +</div> + + </div> + + + + <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> + <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> + <a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4-dev/site/content/docs/4.6/content/figures.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a> + <h1 class="bd-title" id="content">Figures</h1> + </div> + <p class="bd-lead">Documentation and examples for displaying related images and text with the figure component in Bootstrap.</p> + <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> + + <p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code><figure></code>.</p> +<p>Use the included <code>.figure</code> , <code>.figure-img</code> and <code>.figure-caption</code> classes to provide some baseline styles for the HTML5 <code><figure></code> and <code><figcaption></code> elements. Images in figures have no explicit size, so be sure to add the <code>.img-fluid</code> class to your <code><img></code> to make it responsive.</p> +<div class="bd-example"> +<figure class="figure"> + <svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text></svg> + + <figcaption class="figure-caption">A caption for the above image.</figcaption> +</figure> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">figure</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure"</span><span class="p">></span> + <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-img img-fluid rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> + <span class="p"><</span><span class="nt">figcaption</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-caption"</span><span class="p">></span>A caption for the above image.<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span> +<span class="p"></</span><span class="nt">figure</span><span class="p">></span></code></pre></div> +<p>Aligning the figure’s caption is easy with our <a href="/docs/4.6/utilities/text/#text-alignment">text utilities</a>.</p> +<div class="bd-example"> +<figure class="figure"> + <svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text></svg> + + <figcaption class="figure-caption text-right">A caption for the above image.</figcaption> +</figure> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">figure</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure"</span><span class="p">></span> + <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-img img-fluid rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> + <span class="p"><</span><span class="nt">figcaption</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-caption text-right"</span><span class="p">></span>A caption for the above image.<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span> +<span class="p"></</span><span class="nt">figure</span><span class="p">></span></code></pre></div> + + </main> + </div> + </div> + + <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> +<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script> + +<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> + + +<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> + +<script src="/docs/4.6/assets/js/docs.min.js"></script> + + </body> +</html> diff --git a/docs/4.6/content/images/index.html b/docs/4.6/content/images/index.html new file mode 100644 index 000000000..93403f52b --- /dev/null +++ b/docs/4.6/content/images/index.html @@ -0,0 +1,314 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> +<meta name="description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes."> +<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> +<meta name="generator" content="Hugo 0.80.0"> + +<meta name="docsearch:language" content="en"> +<meta name="docsearch:version" content="4.6"> + +<title>Images · Bootstrap v4.6</title> + +<link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/images/"> + + + +<!-- Bootstrap core CSS --> +<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> + +<!-- Documentation extras --> +<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet"> + +<link href="/docs/4.6/assets/css/docs.css" rel="stylesheet"> + +<!-- Favicons --> +<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> +<link rel="manifest" href="/docs/4.6/assets/img/favicons/manifest.json"> +<link rel="mask-icon" href="/docs/4.6/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon.ico"> +<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml"> +<meta name="theme-color" content="#563d7c"> + +<!-- Twitter --> +<meta name="twitter:card" content="summary"> +<meta name="twitter:site" content="@getbootstrap"> +<meta name="twitter:creator" content="@getbootstrap"> +<meta name="twitter:title" content="Images"> +<meta name="twitter:description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes."> +<meta name="twitter:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social-logo.png"> + +<!-- Facebook --> +<meta property="og:url" content="https://getbootstrap.com/docs/4.6/content/images/"> +<meta property="og:title" content="Images"> +<meta property="og:description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes."> +<meta property="og:type" content="article"> +<meta property="og:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social.png"> +<meta property="og:image:type" content="image/png"> +<meta property="og:image:width" content="1200"> +<meta property="og:image:height" content="630"> + +<script> + window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; + ga('create', 'UA-146052-10', 'getbootstrap.com'); + ga('set', 'anonymizeIp', true); + ga('send', 'pageview'); +</script> +<script async src="https://www.google-analytics.com/analytics.js"></script> + + + </head> + <body> + <div class="skippy overflow-hidden"> + <div class="container-xl"> + <a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a> + <a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a> + </div> +</div> + + + <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> + <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> + <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> + </a> + + <div class="navbar-nav-scroll"> + <ul class="navbar-nav bd-navbar-nav flex-row"> + <li class="nav-item"> + <a class="nav-link" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link active" href="/docs/4.6/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/docs/4.6/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> + </li> + </ul> + </div> + + <ul class="navbar-nav ml-md-auto"> + <li class="nav-item dropdown"> + <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + v4.6 + </a> + <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions"> + <a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/">5.0.x</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a> + <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="/docs/versions/">All versions</a> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"> + <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg> + </a> + </li> + </ul> + + <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a> +</header> + + + <div class="container-fluid"> + <div class="row flex-xl-nowrap"> + <div class="col-md-3 col-xl-2 bd-sidebar"> + <form role="search" class="bd-search d-flex align-items-center"> + <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.6"> + <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> + <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg> + </button> +</form> + +<div class="collapse d-md-block row" id="bd-docs-nav"> + <nav class="bd-links" aria-label="Main navigation"> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/getting-started/introduction/"> + Getting started + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/layout/overview/"> + Layout + </a> + </div> + + <div class="bd-toc-item active"> + <a class="bd-toc-link" href="/docs/4.6/content/reboot/"> + Content + </a> + <ul class="nav bd-sidenav"> + <li> + <a href="/docs/4.6/content/reboot/">Reboot</a> + </li> + <li> + <a href="/docs/4.6/content/typography/">Typography</a> + </li> + <li> + <a href="/docs/4.6/content/code/">Code</a> + </li> + <li class="active bd-sidenav-active"> + <a href="/docs/4.6/content/images/">Images</a> + </li> + <li> + <a href="/docs/4.6/content/tables/">Tables</a> + </li> + <li> + <a href="/docs/4.6/content/figures/">Figures</a> + </li> + </ul> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/components/alerts/"> + Components + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/utilities/borders/"> + Utilities + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/extend/approach/"> + Extend + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/migration/"> + Migration + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/about/overview/"> + About + </a> + </div> + </nav> +</div> + + </div> + + + <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation"> + <nav id="TableOfContents"> + <ul> + <li><a href="#responsive-images">Responsive images</a></li> + <li><a href="#image-thumbnails">Image thumbnails</a></li> + <li><a href="#aligning-images">Aligning images</a></li> + <li><a href="#picture">Picture</a></li> + </ul> +</nav> + </nav> + + + <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> + <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> + <a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4-dev/site/content/docs/4.6/content/images.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a> + <h1 class="bd-title" id="content">Images</h1> + </div> + <p class="bd-lead">Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.</p> + <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> + + <h2 id="responsive-images">Responsive images</h2> +<p>Images in Bootstrap are made responsive with <code>.img-fluid</code>. <code>max-width: 100%;</code> and <code>height: auto;</code> are applied to the image so that it scales with the parent element.</p> +<div class="bd-example"> +<svg class="bd-placeholder-img bd-placeholder-img-lg img-fluid" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive image</text></svg> + +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-fluid"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div> +<div class="bd-callout bd-callout-warning"> +<h5 id="svg-images-and-internet-explorer">SVG images and Internet Explorer</h5> +<p>In Internet Explorer 10 and 11, SVG images with <code>.img-fluid</code> are disproportionately sized. To fix this, add <code>width: 100%;</code> or <code>.w-100</code> where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically. +</div> + +<h2 id="image-thumbnails">Image thumbnails</h2> +<p>In addition to our <a href="/docs/4.6/utilities/borders/">border-radius utilities</a>, you can use <code>.img-thumbnail</code> to give an image a rounded 1px border appearance.</p> +<div class="bd-example"> +<svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg> + +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-thumbnail"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div> +<h2 id="aligning-images">Aligning images</h2> +<p>Align images with the <a href="/docs/4.6/utilities/float/">helper float classes</a> or <a href="/docs/4.6/utilities/text/#text-alignment">text alignment classes</a>. <code>block</code>-level images can be centered using <a href="/docs/4.6/utilities/spacing/#horizontal-centering">the <code>.mx-auto</code> margin utility class</a>.</p> +<div class="bd-example"> +<svg class="bd-placeholder-img rounded float-left" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg> + +<svg class="bd-placeholder-img rounded float-right" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg> + +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded float-left"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded float-right"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div> +<div class="bd-example"> +<svg class="bd-placeholder-img rounded mx-auto d-block" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg> + +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mx-auto d-block"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div> +<div class="bd-example"> +<div class="text-center"> + <svg class="bd-placeholder-img rounded" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg> + +</div> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-center"</span><span class="p">></span> + <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div> +<h2 id="picture">Picture</h2> +<p>If you are using the <code><picture></code> element to specify multiple <code><source></code> elements for a specific <code><img></code>, make sure to add the <code>.img-*</code> classes to the <code><img></code> and not to the <code><picture></code> tag.</p> +<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">picture</span><span class="p">></span> + <span class="p"><</span><span class="nt">source</span> <span class="na">srcset</span><span class="o">=</span><span class="s">"..."</span> <span class="na">type</span><span class="o">=</span><span class="s">"image/svg+xml"</span><span class="p">></span> + <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +<span class="p"></</span><span class="nt">picture</span><span class="p">></span> +</code></pre></div> + </main> + </div> + </div> + + <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> +<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script> + +<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> + + +<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> + +<script src="/docs/4.6/assets/js/docs.min.js"></script> + + </body> +</html> diff --git a/docs/4.6/content/index.html b/docs/4.6/content/index.html new file mode 100644 index 000000000..fcf166f36 --- /dev/null +++ b/docs/4.6/content/index.html @@ -0,0 +1,11 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <title>https://getbootstrap.com/docs/4.6/content/reboot/</title> + <link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/reboot/"> + <meta name="robots" content="noindex"> + <meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.6/content/reboot/"> + </head> +</html> diff --git a/docs/4.6/content/reboot/index.html b/docs/4.6/content/reboot/index.html new file mode 100644 index 000000000..633414f6f --- /dev/null +++ b/docs/4.6/content/reboot/index.html @@ -0,0 +1,592 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> +<meta name="description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon."> +<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> +<meta name="generator" content="Hugo 0.80.0"> + +<meta name="docsearch:language" content="en"> +<meta name="docsearch:version" content="4.6"> + +<title>Reboot · Bootstrap v4.6</title> + +<link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/reboot/"> + + + +<!-- Bootstrap core CSS --> +<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> + +<!-- Documentation extras --> +<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet"> + +<link href="/docs/4.6/assets/css/docs.css" rel="stylesheet"> + +<!-- Favicons --> +<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> +<link rel="manifest" href="/docs/4.6/assets/img/favicons/manifest.json"> +<link rel="mask-icon" href="/docs/4.6/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon.ico"> +<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml"> +<meta name="theme-color" content="#563d7c"> + +<!-- Twitter --> +<meta name="twitter:card" content="summary"> +<meta name="twitter:site" content="@getbootstrap"> +<meta name="twitter:creator" content="@getbootstrap"> +<meta name="twitter:title" content="Reboot"> +<meta name="twitter:description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon."> +<meta name="twitter:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social-logo.png"> + +<!-- Facebook --> +<meta property="og:url" content="https://getbootstrap.com/docs/4.6/content/reboot/"> +<meta property="og:title" content="Reboot"> +<meta property="og:description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon."> +<meta property="og:type" content="article"> +<meta property="og:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social.png"> +<meta property="og:image:type" content="image/png"> +<meta property="og:image:width" content="1200"> +<meta property="og:image:height" content="630"> + +<script> + window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; + ga('create', 'UA-146052-10', 'getbootstrap.com'); + ga('set', 'anonymizeIp', true); + ga('send', 'pageview'); +</script> +<script async src="https://www.google-analytics.com/analytics.js"></script> + + + </head> + <body> + <div class="skippy overflow-hidden"> + <div class="container-xl"> + <a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a> + <a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a> + </div> +</div> + + + <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> + <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> + <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> + </a> + + <div class="navbar-nav-scroll"> + <ul class="navbar-nav bd-navbar-nav flex-row"> + <li class="nav-item"> + <a class="nav-link" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link active" href="/docs/4.6/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/docs/4.6/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> + </li> + </ul> + </div> + + <ul class="navbar-nav ml-md-auto"> + <li class="nav-item dropdown"> + <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + v4.6 + </a> + <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions"> + <a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/">5.0.x</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a> + <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="/docs/versions/">All versions</a> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"> + <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg> + </a> + </li> + </ul> + + <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a> +</header> + + + <div class="container-fluid"> + <div class="row flex-xl-nowrap"> + <div class="col-md-3 col-xl-2 bd-sidebar"> + <form role="search" class="bd-search d-flex align-items-center"> + <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.6"> + <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> + <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg> + </button> +</form> + +<div class="collapse d-md-block row" id="bd-docs-nav"> + <nav class="bd-links" aria-label="Main navigation"> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/getting-started/introduction/"> + Getting started + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/layout/overview/"> + Layout + </a> + </div> + + <div class="bd-toc-item active"> + <a class="bd-toc-link" href="/docs/4.6/content/reboot/"> + Content + </a> + <ul class="nav bd-sidenav"> + <li class="active bd-sidenav-active"> + <a href="/docs/4.6/content/reboot/">Reboot</a> + </li> + <li> + <a href="/docs/4.6/content/typography/">Typography</a> + </li> + <li> + <a href="/docs/4.6/content/code/">Code</a> + </li> + <li> + <a href="/docs/4.6/content/images/">Images</a> + </li> + <li> + <a href="/docs/4.6/content/tables/">Tables</a> + </li> + <li> + <a href="/docs/4.6/content/figures/">Figures</a> + </li> + </ul> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/components/alerts/"> + Components + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/utilities/borders/"> + Utilities + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/extend/approach/"> + Extend + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/migration/"> + Migration + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/about/overview/"> + About + </a> + </div> + </nav> +</div> + + </div> + + + <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation"> + <nav id="TableOfContents"> + <ul> + <li><a href="#approach">Approach</a></li> + <li><a href="#page-defaults">Page defaults</a></li> + <li><a href="#native-font-stack">Native font stack</a></li> + <li><a href="#headings-and-paragraphs">Headings and paragraphs</a></li> + <li><a href="#lists">Lists</a></li> + <li><a href="#preformatted-text">Preformatted text</a></li> + <li><a href="#tables">Tables</a></li> + <li><a href="#forms">Forms</a> + <ul> + <li><a href="#pointers-on-buttons">Pointers on buttons</a></li> + </ul> + </li> + <li><a href="#misc-elements">Misc elements</a> + <ul> + <li><a href="#address">Address</a></li> + <li><a href="#blockquote">Blockquote</a></li> + <li><a href="#inline-elements">Inline elements</a></li> + <li><a href="#summary">Summary</a></li> + </ul> + </li> + <li><a href="#html5-hidden-attribute">HTML5 <code>[hidden]</code> attribute</a></li> + </ul> +</nav> + </nav> + + + <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> + <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> + <a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4-dev/site/content/docs/4.6/content/reboot.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a> + <h1 class="bd-title" id="content">Reboot</h1> + </div> + <p class="bd-lead">Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.</p> + <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> + + <h2 id="approach">Approach</h2> +<p>Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <code><table></code> styles for a simpler baseline and later provide <code>.table</code>, <code>.table-bordered</code>, and more.</p> +<p>Here are our guidelines and reasons for choosing what to override in Reboot:</p> +<ul> +<li>Update some browser default values to use <code>rem</code>s instead of <code>em</code>s for scalable component spacing.</li> +<li>Avoid <code>margin-top</code>. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of <code>margin</code> is a simpler mental model.</li> +<li>For easier scaling across device sizes, block elements should use <code>rem</code>s for <code>margin</code>s.</li> +<li>Keep declarations of <code>font</code>-related properties to a minimum, using <code>inherit</code> whenever possible.</li> +</ul> +<h2 id="page-defaults">Page defaults</h2> +<p>The <code><html></code> and <code><body></code> elements are updated to provide better page-wide defaults. More specifically:</p> +<ul> +<li>The <code>box-sizing</code> is globally set on every element—including <code>*::before</code> and <code>*::after</code>, to <code>border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.</li> +<li>No base <code>font-size</code> is declared on the <code><html></code>, but <code>16px</code> is assumed (the browser default). <code>font-size: 1rem</code> is applied on the <code><body></code> for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.</li> +<li>The <code><body></code> also sets a global <code>font-family</code>, <code>line-height</code>, and <code>text-align</code>. This is inherited later by some form elements to prevent font inconsistencies.</li> +<li>For safety, the <code><body></code> has a declared <code>background-color</code>, defaulting to <code>#fff</code>.</li> +</ul> +<h2 id="native-font-stack">Native font stack</h2> +<p>The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a “native font stack” for optimum text rendering on every device and OS. Read more about <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stacks in this <em>Smashing Magazine</em> article</a>.</p> +<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$font-family-sans-serif</span><span class="o">:</span> + <span class="c1">// Safari for macOS and iOS (San Francisco)</span> + <span class="o">-</span><span class="n">apple-system</span><span class="o">,</span> + <span class="c1">// Chrome < 56 for macOS (San Francisco)</span> + <span class="n">BlinkMacSystemFont</span><span class="o">,</span> + <span class="c1">// Windows</span> + <span class="s2">"Segoe UI"</span><span class="o">,</span> + <span class="c1">// Android</span> + <span class="n">Roboto</span><span class="o">,</span> + <span class="c1">// Basic web fallback</span> + <span class="s2">"Helvetica Neue"</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span> + <span class="c1">// Linux</span> + <span class="s2">"Noto Sans"</span><span class="o">,</span> + <span class="s2">"Liberation Sans"</span><span class="o">,</span> + <span class="c1">// Sans serif fallback</span> + <span class="no">sans-serif</span><span class="o">,</span> + <span class="c1">// Emoji fonts</span> + <span class="s2">"Apple Color Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Symbol"</span><span class="o">,</span> <span class="s2">"Noto Color Emoji"</span> <span class="nv">!default</span><span class="p">;</span> +</code></pre></div><p>Note that because the font stack includes emoji fonts, many common symbol/dingbat unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform’s native emoji font, and they won’t be affected by any CSS <code>color</code> styles.</p> +<p>This <code>font-family</code> is applied to the <code><body></code> and automatically inherited globally throughout Bootstrap. To switch the global <code>font-family</code>, update <code>$font-family-base</code> and recompile Bootstrap.</p> +<h2 id="headings-and-paragraphs">Headings and paragraphs</h2> +<p>All heading elements—e.g., <code><h1></code>—and <code><p></code> are reset to have their <code>margin-top</code> removed. Headings have <code>margin-bottom: .5rem</code> added and paragraphs <code>margin-bottom: 1rem</code> for easy spacing.</p> +<table> + <thead> + <tr> + <th>Heading</th> + <th>Example</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <code><h1></h1></code> + </td> + <td><span class="h1">h1. Bootstrap heading</span></td> + </tr> + <tr> + <td> + <code><h2></h2></code> + </td> + <td><span class="h2">h2. Bootstrap heading</span></td> + </tr> + <tr> + <td> + <code><h3></h3></code> + </td> + <td><span class="h3">h3. Bootstrap heading</span></td> + </tr> + <tr> + <td> + <code><h4></h4></code> + </td> + <td><span class="h4">h4. Bootstrap heading</span></td> + </tr> + <tr> + <td> + <code><h5></h5></code> + </td> + <td><span class="h5">h5. Bootstrap heading</span></td> + </tr> + <tr> + <td> + <code><h6></h6></code> + </td> + <td><span class="h6">h6. Bootstrap heading</span></td> + </tr> + </tbody> +</table> +<h2 id="lists">Lists</h2> +<p>All lists—<code><ul></code>, <code><ol></code>, and <code><dl></code>—have their <code>margin-top</code> removed and a <code>margin-bottom: 1rem</code>. Nested lists have no <code>margin-bottom</code>.</p> +<div class="bd-example"> +<ul> +<li>All lists have their top margin removed</li> +<li>And their bottom margin normalized</li> +<li>Nested lists have no bottom margin +<ul> +<li>This way they have a more even appearance</li> +<li>Particularly when followed by more list items</li> +</ul> +</li> +<li>The left padding has also been reset</li> +</ul> +<ol> +<li>Here’s an ordered list</li> +<li>With a few list items</li> +<li>It has the same overall look</li> +<li>As the previous unordered list</li> +</ol> + +</div> +<p>For simpler styling, clear hierarchy, and better spacing, description lists have updated <code>margin</code>s. <code><dd></code>s reset <code>margin-left</code> to <code>0</code> and add <code>margin-bottom: .5rem</code>. <code><dt></code>s are <strong>bolded</strong>.</p> +<div class="bd-example"> + <dl> + <dt>Description lists</dt> + <dd>A description list is perfect for defining terms.</dd> + <dt>Term</dt> + <dd>Definition for the term.</dd> + <dd>A second definition for the same term.</dd> + <dt>Another term</dt> + <dd>Definition for this other term.</dd> + </dl> +</div> +<h2 id="preformatted-text">Preformatted text</h2> +<p>The <code><pre></code> element is reset to remove its <code>margin-top</code> and use <code>rem</code> units for its <code>margin-bottom</code>.</p> +<div class="bd-example"> +<pre> +.example-element { + margin-bottom: 1rem; +} +</pre> +</div> +<h2 id="tables">Tables</h2> +<p>Tables are slightly adjusted to style <code><caption></code>s, collapse borders, and ensure consistent <code>text-align</code> throughout. Additional changes for borders, padding, and more come with <a href="/docs/4.6/content/tables/">the <code>.table</code> class</a>.</p> +<div class="bd-example"> + <table> + <caption> + This is an example table, and this is its caption to describe the contents. + </caption> + <thead> + <tr> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + </tr> + </thead> + <tbody> + <tr> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + </tbody> + </table> +</div> +<h2 id="forms">Forms</h2> +<p>Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:</p> +<ul> +<li><code><fieldset></code>s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.</li> +<li><code><legend></code>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.</li> +<li><code><label></code>s are set to <code>display: inline-block</code> to allow <code>margin</code> to be applied.</li> +<li><code><input></code>s, <code><select></code>s, <code><textarea></code>s, and <code><button></code>s are mostly addressed by Normalize, but Reboot removes their <code>margin</code> and sets <code>line-height: inherit</code>, too.</li> +<li><code><textarea></code>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.</li> +<li><code><button></code>s and <code><input></code> button elements have <code>cursor: pointer</code> when <code>:not(:disabled)</code>.</li> +</ul> +<p>These changes, and more, are demonstrated below.</p> +<form class="bd-example"> + <fieldset> + <legend>Example legend</legend> + <p> + <label for="input">Example input</label> + <input type="text" id="input" placeholder="Example input"> + </p> + <p> + <label for="select">Example select</label> + <select id="select"> + <option value="">Choose...</option> + <optgroup label="Option group 1"> + <option value="">Option 1</option> + <option value="">Option 2</option> + <option value="">Option 3</option> + </optgroup> + <optgroup label="Option group 2"> + <option value="">Option 4</option> + <option value="">Option 5</option> + <option value="">Option 6</option> + </optgroup> + </select> + </p> + <p> + <label> + <input type="checkbox" value=""> + Check this checkbox + </label> + </p> + <p> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> + Option one is this and that + </label> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> + Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. + </label> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> + Option three is disabled + </label> + </p> + <p> + <label for="textarea">Example textarea</label> + <textarea id="textarea" rows="3"></textarea> + </p> + <p> + <label for="date">Example date</label> + <input type="date" id="date"> + </p> + <p> + <label for="time">Example time</label> + <input type="time" id="time"> + </p> + <p> + <label for="output">Example output</label> + <output name="result" id="output">100</output> + </p> + <p> + <button type="submit">Button submit</button> + <input type="submit" value="Input submit button"> + <input type="reset" value="Input reset button"> + <input type="button" value="Input button"> + </p> + <p> + <button type="submit" disabled>Button submit</button> + <input type="submit" value="Input submit button" disabled> + <input type="reset" value="Input reset button" disabled> + <input type="button" value="Input button" disabled> + </p> + </fieldset> +</form> +<h3 id="pointers-on-buttons">Pointers on buttons</h3> +<p>Reboot includes an enhancement for <code>role="button"</code> to change the default cursor to <code>pointer</code>. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <code><button></code> elements, which get their own <code>cursor</code> change.</p> +<div class="bd-example"> +<span role="button" tabindex="0">Non-button element button</span> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">span</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span>Non-button element button<span class="p"></</span><span class="nt">span</span><span class="p">></span></code></pre></div> +<h2 id="misc-elements">Misc elements</h2> +<h3 id="address">Address</h3> +<p>The <code><address></code> element is updated to reset the browser default <code>font-style</code> from <code>italic</code> to <code>normal</code>. <code>line-height</code> is also now inherited, and <code>margin-bottom: 1rem</code> has been added. <code><address></code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <code><br></code>.</p> +<div class="bd-example"> + <address> + <strong>Twitter, Inc.</strong><br> + 1355 Market St, Suite 900<br> + San Francisco, CA 94103<br> + <abbr title="Phone">P:</abbr> (123) 456-7890 + </address> + <address> + <strong>Full Name</strong><br> + <a href="mailto:[email protected]">[email protected]</a> + </address> +</div> +<h3 id="blockquote">Blockquote</h3> +<p>The default <code>margin</code> on blockquotes is <code>1em 40px</code>, so we reset that to <code>0 0 1rem</code> for something more consistent with other elements.</p> +<div class="bd-example"> + <blockquote class="blockquote"> + <p>A well-known quote, contained in a blockquote element.</p> + <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> + </blockquote> +</div> +<h3 id="inline-elements">Inline elements</h3> +<p>The <code><abbr></code> element receives basic styling to make it stand out amongst paragraph text.</p> +<div class="bd-example"> + Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. +</div> +<h3 id="summary">Summary</h3> +<p>The default <code>cursor</code> on summary is <code>text</code>, so we reset that to <code>pointer</code> to convey that the element can be interacted with by clicking on it.</p> +<div class="bd-example"> + <details> + <summary>Some details</summary> + <p>More info about the details.</p> + </details> + <details open> + <summary>Even more details</summary> + <p>Here are even more details about the details.</p> + </details> +</div> +<h2 id="html5-hidden-attribute">HTML5 <code>[hidden]</code> attribute</h2> +<p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code>[hidden]</code></a>, which is styled as <code>display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code>[hidden] { display: none !important; }</code> to help prevent its <code>display</code> from getting accidentally overridden. While <code>[hidden]</code> isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p> +<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">hidden</span><span class="p">></span> +</code></pre></div><div class="bd-callout bd-callout-warning"> +<h5 id="jquery-incompatibility">jQuery incompatibility</h5> +<p><code>[hidden]</code> is not compatible with jQuery’s <code>$(...).hide()</code> and <code>$(...).show()</code> methods. Therefore, we don’t currently especially endorse <code>[hidden]</code> over other techniques for managing the <code>display</code> of elements. +</div> + +<p>To merely toggle the visibility of an element, meaning its <code>display</code> is not modified and the element can still affect the flow of the document, use <a href="/docs/4.6/utilities/visibility/">the <code>.invisible</code> class</a> instead.</p> + + </main> + </div> + </div> + + <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> +<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script> + +<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> + + +<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> + +<script src="/docs/4.6/assets/js/docs.min.js"></script> + + </body> +</html> diff --git a/docs/4.6/content/tables/index.html b/docs/4.6/content/tables/index.html new file mode 100644 index 000000000..3bd0a28f1 --- /dev/null +++ b/docs/4.6/content/tables/index.html @@ -0,0 +1,1700 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> +<meta name="description" content="Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap."> +<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> +<meta name="generator" content="Hugo 0.80.0"> + +<meta name="docsearch:language" content="en"> +<meta name="docsearch:version" content="4.6"> + +<title>Tables · Bootstrap v4.6</title> + +<link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/tables/"> + + + +<!-- Bootstrap core CSS --> +<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> + +<!-- Documentation extras --> +<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet"> + +<link href="/docs/4.6/assets/css/docs.css" rel="stylesheet"> + +<!-- Favicons --> +<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> +<link rel="manifest" href="/docs/4.6/assets/img/favicons/manifest.json"> +<link rel="mask-icon" href="/docs/4.6/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon.ico"> +<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml"> +<meta name="theme-color" content="#563d7c"> + +<!-- Twitter --> +<meta name="twitter:card" content="summary"> +<meta name="twitter:site" content="@getbootstrap"> +<meta name="twitter:creator" content="@getbootstrap"> +<meta name="twitter:title" content="Tables"> +<meta name="twitter:description" content="Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap."> +<meta name="twitter:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social-logo.png"> + +<!-- Facebook --> +<meta property="og:url" content="https://getbootstrap.com/docs/4.6/content/tables/"> +<meta property="og:title" content="Tables"> +<meta property="og:description" content="Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap."> +<meta property="og:type" content="article"> +<meta property="og:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social.png"> +<meta property="og:image:type" content="image/png"> +<meta property="og:image:width" content="1200"> +<meta property="og:image:height" content="630"> + +<script> + window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; + ga('create', 'UA-146052-10', 'getbootstrap.com'); + ga('set', 'anonymizeIp', true); + ga('send', 'pageview'); +</script> +<script async src="https://www.google-analytics.com/analytics.js"></script> + + + </head> + <body> + <div class="skippy overflow-hidden"> + <div class="container-xl"> + <a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a> + <a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a> + </div> +</div> + + + <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> + <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> + <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> + </a> + + <div class="navbar-nav-scroll"> + <ul class="navbar-nav bd-navbar-nav flex-row"> + <li class="nav-item"> + <a class="nav-link" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link active" href="/docs/4.6/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/docs/4.6/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> + </li> + </ul> + </div> + + <ul class="navbar-nav ml-md-auto"> + <li class="nav-item dropdown"> + <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + v4.6 + </a> + <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions"> + <a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/">5.0.x</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a> + <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="/docs/versions/">All versions</a> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"> + <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg> + </a> + </li> + </ul> + + <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a> +</header> + + + <div class="container-fluid"> + <div class="row flex-xl-nowrap"> + <div class="col-md-3 col-xl-2 bd-sidebar"> + <form role="search" class="bd-search d-flex align-items-center"> + <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.6"> + <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> + <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg> + </button> +</form> + +<div class="collapse d-md-block row" id="bd-docs-nav"> + <nav class="bd-links" aria-label="Main navigation"> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/getting-started/introduction/"> + Getting started + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/layout/overview/"> + Layout + </a> + </div> + + <div class="bd-toc-item active"> + <a class="bd-toc-link" href="/docs/4.6/content/reboot/"> + Content + </a> + <ul class="nav bd-sidenav"> + <li> + <a href="/docs/4.6/content/reboot/">Reboot</a> + </li> + <li> + <a href="/docs/4.6/content/typography/">Typography</a> + </li> + <li> + <a href="/docs/4.6/content/code/">Code</a> + </li> + <li> + <a href="/docs/4.6/content/images/">Images</a> + </li> + <li class="active bd-sidenav-active"> + <a href="/docs/4.6/content/tables/">Tables</a> + </li> + <li> + <a href="/docs/4.6/content/figures/">Figures</a> + </li> + </ul> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/components/alerts/"> + Components + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/utilities/borders/"> + Utilities + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/extend/approach/"> + Extend + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/migration/"> + Migration + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/about/overview/"> + About + </a> + </div> + </nav> +</div> + + </div> + + + <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation"> + <nav id="TableOfContents"> + <ul> + <li><a href="#examples">Examples</a></li> + <li><a href="#table-head-options">Table head options</a></li> + <li><a href="#striped-rows">Striped rows</a></li> + <li><a href="#bordered-table">Bordered table</a></li> + <li><a href="#borderless-table">Borderless table</a></li> + <li><a href="#hoverable-rows">Hoverable rows</a></li> + <li><a href="#small-table">Small table</a></li> + <li><a href="#contextual-classes">Contextual classes</a></li> + <li><a href="#captions">Captions</a></li> + <li><a href="#responsive-tables">Responsive tables</a> + <ul> + <li><a href="#always-responsive">Always responsive</a></li> + <li><a href="#breakpoint-specific">Breakpoint specific</a></li> + </ul> + </li> + </ul> +</nav> + </nav> + + + <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> + <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> + <a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4-dev/site/content/docs/4.6/content/tables.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a> + <h1 class="bd-title" id="content">Tables</h1> + </div> + <p class="bd-lead">Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.</p> + <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> + + <h2 id="examples">Examples</h2> +<p>Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be <strong>opt-in</strong>. Just add the base class <code>.table</code> to any <code><table></code>, then extend with custom styles or our various included modifier classes.</p> +<p>Using the most basic table markup, here’s how <code>.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 4</strong>, meaning any nested tables will be styled in the same manner as the parent.</p> +<div class="bd-example"> +<table class="table"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Larry<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<p>You can also invert the colors—with light text on dark backgrounds—with <code>.table-dark</code>.</p> +<div class="bd-example"> +<table class="table table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-dark"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Larry<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<h2 id="table-head-options">Table head options</h2> +<p>Similar to tables and dark tables, use the modifier classes <code>.thead-light</code> or <code>.thead-dark</code> to make <code><thead></code>s appear light or dark gray.</p> +<div class="bd-example"> +<table class="table"> + <thead class="thead-dark"> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> + +<table class="table"> + <thead class="thead-light"> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span> <span class="na">class</span><span class="o">=</span><span class="s">"thead-dark"</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Larry<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span> + +<span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span> <span class="na">class</span><span class="o">=</span><span class="s">"thead-light"</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Larry<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<h2 id="striped-rows">Striped rows</h2> +<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>.</p> +<div class="bd-example"> +<table class="table table-striped"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-striped"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Larry<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<div class="bd-example"> +<table class="table table-striped table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-striped table-dark"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Larry<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<h2 id="bordered-table">Bordered table</h2> +<p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p> +<div class="bd-example"> +<table class="table table-bordered"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-bordered"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">colspan</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Larry the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<div class="bd-example"> +<table class="table table-bordered table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-bordered table-dark"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">colspan</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Larry the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<h2 id="borderless-table">Borderless table</h2> +<p>Add <code>.table-borderless</code> for a table without borders.</p> +<div class="bd-example"> +<table class="table table-borderless"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-borderless"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">colspan</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Larry the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<p><code>.table-borderless</code> can also be used on dark tables.</p> +<div class="bd-example"> +<table class="table table-borderless table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-borderless table-dark"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">colspan</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Larry the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<h2 id="hoverable-rows">Hoverable rows</h2> +<p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code><tbody></code>.</p> +<div class="bd-example"> +<table class="table table-hover"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-hover"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">colspan</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Larry the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<div class="bd-example"> +<table class="table table-hover table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-hover table-dark"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">colspan</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Larry the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<h2 id="small-table">Small table</h2> +<p>Add <code>.table-sm</code> to make tables more compact by cutting cell padding in half.</p> +<div class="bd-example"> +<table class="table table-sm"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-sm"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">colspan</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Larry the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<div class="bd-example"> +<table class="table table-sm table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table table-sm table-dark"</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">colspan</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>Larry the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<h2 id="contextual-classes">Contextual classes</h2> +<p>Use contextual classes to color table rows or individual cells.</p> +<div class="bd-example"> + <table class="table"> + <thead> + <tr> + <th scope="col">Class</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr class="table-active"> + <th scope="row">Active</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">Default</th> + <td>Cell</td> + <td>Cell</td> + </tr> + + <tr class="table-primary"> + <th scope="row">Primary</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="table-secondary"> + <th scope="row">Secondary</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="table-success"> + <th scope="row">Success</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="table-danger"> + <th scope="row">Danger</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="table-warning"> + <th scope="row">Warning</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="table-info"> + <th scope="row">Info</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="table-light"> + <th scope="row">Light</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="table-dark"> + <th scope="row">Dark</th> + <td>Cell</td> + <td>Cell</td> + </tr> + </tbody> + </table> +</div> +<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- On rows --></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-active"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-primary"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-secondary"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-success"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-danger"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-warning"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-info"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-light"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-dark"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> + +<span class="c"><!-- On cells (`td` or `th`) --></span> +<span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-active"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-primary"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-secondary"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-success"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-danger"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-warning"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-info"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-light"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-dark"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> +<span class="p"></</span><span class="nt">tr</span><span class="p">></span></code></pre></div> +<p>Regular table background variants are not available with the dark table, however, you may use <a href="/docs/4.6/utilities/colors/">text or background utilities</a> to achieve similar styles.</p> +<div class="bd-example"> + <table class="table table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr class="bg-primary"> + <th scope="row">1</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="bg-success"> + <th scope="row">3</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">4</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="bg-info"> + <th scope="row">5</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">6</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="bg-warning"> + <th scope="row">7</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">8</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="bg-danger"> + <th scope="row">9</th> + <td>Cell</td> + <td>Cell</td> + </tr> + </tbody> + </table> +</div> +<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- On rows --></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-primary"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-success"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-warning"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-danger"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> +<span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-info"</span><span class="p">></span>...<span class="p"></</span><span class="nt">tr</span><span class="p">></span> + +<span class="c"><!-- On cells (`td` or `th`) --></span> +<span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-primary"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-success"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-warning"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-danger"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-info"</span><span class="p">></span>...<span class="p"></</span><span class="nt">td</span><span class="p">></span> +<span class="p"></</span><span class="nt">tr</span><span class="p">></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>.sr-only</code> class. +</div> + +<p>Create responsive tables by wrapping any <code>.table</code> with <code>.table-responsive{-sm|-md|-lg|-xl}</code>, making the table scroll horizontally at each <code>max-width</code> breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.</p> +<div class="bd-callout bd-callout-info"> +Note that since browsers do not currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code>min-</code> and <code>max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons. +</div> + +<h2 id="captions">Captions</h2> +<p>A <code><caption></code> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.</p> +<div class="bd-example"> +<table class="table"> + <caption>List of users</caption> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table"</span><span class="p">></span> + <span class="p"><</span><span class="nt">caption</span><span class="p">></span>List of users<span class="p"></</span><span class="nt">caption</span><span class="p">></span> + <span class="p"><</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>#<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>First<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Last<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"col"</span><span class="p">></span>Handle<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">thead</span><span class="p">></span> + <span class="p"><</span><span class="nt">tbody</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>1<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mark<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Otto<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>2<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Jacob<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Thornton<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">tr</span><span class="p">></span> + <span class="p"><</span><span class="nt">th</span> <span class="na">scope</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>3<span class="p"></</span><span class="nt">th</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>Larry<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>the Bird<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"><</span><span class="nt">td</span><span class="p">></span>@twitter<span class="p"></</span><span class="nt">td</span><span class="p">></span> + <span class="p"></</span><span class="nt">tr</span><span class="p">></span> + <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> +<span class="p"></</span><span class="nt">table</span><span class="p">></span></code></pre></div> +<h2 id="responsive-tables">Responsive tables</h2> +<p>Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a <code>.table</code> with <code>.table-responsive</code>. Or, pick a maximum breakpoint with which to have a responsive table up to by using <code>.table-responsive{-sm|-md|-lg|-xl}</code>.</p> +<div class="bd-callout bd-callout-warning"> +<h5 id="vertical-clippingtruncation">Vertical clipping/truncation</h5> +<p>Responsive tables make use of <code>overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets. +</div> + +<h3 id="always-responsive">Always responsive</h3> +<p>Across every breakpoint, use <code>.table-responsive</code> for horizontally scrolling tables.</p> +<div class="bd-example"> + <div class="table-responsive"> + <table class="table"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + </tbody> + </table> + </div> +</div> +<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-responsive"</span><span class="p">></span> + <span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table"</span><span class="p">></span> + ... + <span class="p"></</span><span class="nt">table</span><span class="p">></span> +<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</code></pre></div><h3 id="breakpoint-specific">Breakpoint specific</h3> +<p>Use <code>.table-responsive{-sm|-md|-lg|-xl}</code> as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.</p> +<p><strong>These tables may appear broken until their responsive styles apply at specific viewport widths.</strong></p> + + + + +<div class="bd-example"> +<div class="table-responsive-sm"> + <table class="table"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + </tbody> + </table> +</div> +</div> + + +<div class="bd-example"> +<div class="table-responsive-md"> + <table class="table"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + </tbody> + </table> +</div> +</div> + + +<div class="bd-example"> +<div class="table-responsive-lg"> + <table class="table"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + </tbody> + </table> +</div> +</div> + + +<div class="bd-example"> +<div class="table-responsive-xl"> + <table class="table"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + </tbody> + </table> +</div> +</div> + +<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-responsive-sm"</span><span class="p">></span> + <span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table"</span><span class="p">></span> + ... + <span class="p"></</span><span class="nt">table</span><span class="p">></span> +<span class="p"></</span><span class="nt">div</span><span class="p">></span> + +<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-responsive-md"</span><span class="p">></span> + <span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table"</span><span class="p">></span> + ... + <span class="p"></</span><span class="nt">table</span><span class="p">></span> +<span class="p"></</span><span class="nt">div</span><span class="p">></span> + +<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-responsive-lg"</span><span class="p">></span> + <span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table"</span><span class="p">></span> + ... + <span class="p"></</span><span class="nt">table</span><span class="p">></span> +<span class="p"></</span><span class="nt">div</span><span class="p">></span> + +<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"table-responsive-xl"</span><span class="p">></span> + <span class="p"><</span><span class="nt">table</span> <span class="na">class</span><span class="o">=</span><span class="s">"table"</span><span class="p">></span> + ... + <span class="p"></</span><span class="nt">table</span><span class="p">></span> +<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div> + + </main> + </div> + </div> + + <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> +<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script> + +<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> + + +<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> + +<script src="/docs/4.6/assets/js/docs.min.js"></script> + + </body> +</html> diff --git a/docs/4.6/content/typography/index.html b/docs/4.6/content/typography/index.html new file mode 100644 index 000000000..c49fa26fd --- /dev/null +++ b/docs/4.6/content/typography/index.html @@ -0,0 +1,583 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> +<meta name="description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more."> +<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> +<meta name="generator" content="Hugo 0.80.0"> + +<meta name="docsearch:language" content="en"> +<meta name="docsearch:version" content="4.6"> + +<title>Typography · Bootstrap v4.6</title> + +<link rel="canonical" href="https://getbootstrap.com/docs/4.6/content/typography/"> + + + +<!-- Bootstrap core CSS --> +<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> + +<!-- Documentation extras --> +<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet"> + +<link href="/docs/4.6/assets/css/docs.css" rel="stylesheet"> + +<!-- Favicons --> +<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> +<link rel="manifest" href="/docs/4.6/assets/img/favicons/manifest.json"> +<link rel="mask-icon" href="/docs/4.6/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c"> +<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon.ico"> +<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml"> +<meta name="theme-color" content="#563d7c"> + +<!-- Twitter --> +<meta name="twitter:card" content="summary"> +<meta name="twitter:site" content="@getbootstrap"> +<meta name="twitter:creator" content="@getbootstrap"> +<meta name="twitter:title" content="Typography"> +<meta name="twitter:description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more."> +<meta name="twitter:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social-logo.png"> + +<!-- Facebook --> +<meta property="og:url" content="https://getbootstrap.com/docs/4.6/content/typography/"> +<meta property="og:title" content="Typography"> +<meta property="og:description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more."> +<meta property="og:type" content="article"> +<meta property="og:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social.png"> +<meta property="og:image:type" content="image/png"> +<meta property="og:image:width" content="1200"> +<meta property="og:image:height" content="630"> + +<script> + window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; + ga('create', 'UA-146052-10', 'getbootstrap.com'); + ga('set', 'anonymizeIp', true); + ga('send', 'pageview'); +</script> +<script async src="https://www.google-analytics.com/analytics.js"></script> + + + </head> + <body> + <div class="skippy overflow-hidden"> + <div class="container-xl"> + <a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a> + <a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a> + </div> +</div> + + + <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> + <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> + <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> + </a> + + <div class="navbar-nav-scroll"> + <ul class="navbar-nav bd-navbar-nav flex-row"> + <li class="nav-item"> + <a class="nav-link" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link active" href="/docs/4.6/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/docs/4.6/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> + </li> + </ul> + </div> + + <ul class="navbar-nav ml-md-auto"> + <li class="nav-item dropdown"> + <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + v4.6 + </a> + <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions"> + <a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/">5.0.x</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a> + <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="/docs/versions/">All versions</a> + </div> + </li> + + <li class="nav-item"> + <a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"> + <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg> + </a> + </li> + <li class="nav-item"> + <a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"> + <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg> + </a> + </li> + </ul> + + <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.6/getting-started/download/">Download</a> +</header> + + + <div class="container-fluid"> + <div class="row flex-xl-nowrap"> + <div class="col-md-3 col-xl-2 bd-sidebar"> + <form role="search" class="bd-search d-flex align-items-center"> + <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.6"> + <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> + <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg> + </button> +</form> + +<div class="collapse d-md-block row" id="bd-docs-nav"> + <nav class="bd-links" aria-label="Main navigation"> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/getting-started/introduction/"> + Getting started + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/layout/overview/"> + Layout + </a> + </div> + + <div class="bd-toc-item active"> + <a class="bd-toc-link" href="/docs/4.6/content/reboot/"> + Content + </a> + <ul class="nav bd-sidenav"> + <li> + <a href="/docs/4.6/content/reboot/">Reboot</a> + </li> + <li class="active bd-sidenav-active"> + <a href="/docs/4.6/content/typography/">Typography</a> + </li> + <li> + <a href="/docs/4.6/content/code/">Code</a> + </li> + <li> + <a href="/docs/4.6/content/images/">Images</a> + </li> + <li> + <a href="/docs/4.6/content/tables/">Tables</a> + </li> + <li> + <a href="/docs/4.6/content/figures/">Figures</a> + </li> + </ul> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/components/alerts/"> + Components + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/utilities/borders/"> + Utilities + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/extend/approach/"> + Extend + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/migration/"> + Migration + </a> + </div> + + <div class="bd-toc-item"> + <a class="bd-toc-link" href="/docs/4.6/about/overview/"> + About + </a> + </div> + </nav> +</div> + + </div> + + + <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation"> + <nav id="TableOfContents"> + <ul> + <li><a href="#global-settings">Global settings</a></li> + <li><a href="#headings">Headings</a> + <ul> + <li><a href="#customizing-headings">Customizing headings</a></li> + </ul> + </li> + <li><a href="#display-headings">Display headings</a></li> + <li><a href="#lead">Lead</a></li> + <li><a href="#inline-text-elements">Inline text elements</a></li> + <li><a href="#text-utilities">Text utilities</a></li> + <li><a href="#abbreviations">Abbreviations</a></li> + <li><a href="#blockquotes">Blockquotes</a> + <ul> + <li><a href="#naming-a-source">Naming a source</a></li> + <li><a href="#alignment">Alignment</a></li> + </ul> + </li> + <li><a href="#lists">Lists</a> + <ul> + <li><a href="#unstyled">Unstyled</a></li> + <li><a href="#inline">Inline</a></li> + <li><a href="#description-list-alignment">Description list alignment</a></li> + </ul> + </li> + <li><a href="#responsive-font-sizes">Responsive font sizes</a></li> + </ul> +</nav> + </nav> + + + <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> + <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> + <a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/blob/v4-dev/site/content/docs/4.6/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">Typography</h1> + </div> + <p class="bd-lead">Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p> + <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script> + + <h2 id="global-settings">Global settings</h2> +<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <a href="/docs/4.6/utilities/text/">textual utility classes</a>.</p> +<ul> +<li>Use a <a href="/docs/4.6/content/reboot/#native-font-stack">native font stack</a> that selects the best <code>font-family</code> for each OS and device.</li> +<li>For a more inclusive and accessible type scale, we use the browser’s default root <code>font-size</code> (typically 16px) so visitors can customize their browser defaults as needed.</li> +<li>Use the <code>$font-family-base</code>, <code>$font-size-base</code>, and <code>$line-height-base</code> attributes as our typographic base applied to the <code><body></code>.</li> +<li>Set the global link color via <code>$link-color</code> and apply link underlines only on <code>:hover</code>.</li> +<li>Use <code>$body-bg</code> to set a <code>background-color</code> on the <code><body></code> (<code>#fff</code> by default).</li> +</ul> +<p>These styles can be found within <code>_reboot.scss</code>, and the global variables are defined in <code>_variables.scss</code>. Make sure to set <code>$font-size-base</code> in <code>rem</code>.</p> +<h2 id="headings">Headings</h2> +<p>All HTML headings, <code><h1></code> through <code><h6></code>, are available.</p> +<table> + <thead> + <tr> + <th>Heading</th> + <th>Example</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <code><h1></h1></code> + </td> + <td><span class="h1">h1. Bootstrap heading</span></td> + </tr> + <tr> + <td> + <code><h2></h2></code> + </td> + <td><span class="h2">h2. Bootstrap heading</span></td> + </tr> + <tr> + <td> + <code><h3></h3></code> + </td> + <td><span class="h3">h3. Bootstrap heading</span></td> + </tr> + <tr> + <td> + <code><h4></h4></code> + </td> + <td><span class="h4">h4. Bootstrap heading</span></td> + </tr> + <tr> + <td> + <code><h5></h5></code> + </td> + <td><span class="h5">h5. Bootstrap heading</span></td> + </tr> + <tr> + <td> + <code><h6></h6></code> + </td> + <td><span class="h6">h6. Bootstrap heading</span></td> + </tr> + </tbody> +</table> +<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>h1. Bootstrap heading<span class="p"></</span><span class="nt">h1</span><span class="p">></span> +<span class="p"><</span><span class="nt">h2</span><span class="p">></span>h2. Bootstrap heading<span class="p"></</span><span class="nt">h2</span><span class="p">></span> +<span class="p"><</span><span class="nt">h3</span><span class="p">></span>h3. Bootstrap heading<span class="p"></</span><span class="nt">h3</span><span class="p">></span> +<span class="p"><</span><span class="nt">h4</span><span class="p">></span>h4. Bootstrap heading<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +<span class="p"><</span><span class="nt">h5</span><span class="p">></span>h5. Bootstrap heading<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +<span class="p"><</span><span class="nt">h6</span><span class="p">></span>h6. Bootstrap heading<span class="p"></</span><span class="nt">h6</span><span class="p">></span> +</code></pre></div><p><code>.h1</code> through <code>.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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h1"</span><span class="p">></span>h1. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h2"</span><span class="p">></span>h2. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h3"</span><span class="p">></span>h3. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h4"</span><span class="p">></span>h4. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h5"</span><span class="p">></span>h5. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h6"</span><span class="p">></span>h6. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span></code></pre></div> +<h3 id="customizing-headings">Customizing headings</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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">h3</span><span class="p">></span> + Fancy display heading + <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>With faded secondary text<span class="p"></</span><span class="nt">small</span><span class="p">></span> +<span class="p"></</span><span class="nt">h3</span><span class="p">></span></code></pre></div> +<h2 id="display-headings">Display headings</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> +<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-1"</span><span class="p">></span>Display 1<span class="p"></</span><span class="nt">h1</span><span class="p">></span> +<span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-2"</span><span class="p">></span>Display 2<span class="p"></</span><span class="nt">h1</span><span class="p">></span> +<span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-3"</span><span class="p">></span>Display 3<span class="p"></</span><span class="nt">h1</span><span class="p">></span> +<span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-4"</span><span class="p">></span>Display 4<span class="p"></</span><span class="nt">h1</span><span class="p">></span> +</code></pre></div><h2 id="lead">Lead</h2> +<p>Make a paragraph stand out by adding <code>.lead</code>.</p> +<div class="bd-example"> +<p class="lead"> + This is a lead paragraph. It stands out from regular paragraphs. +</p> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"lead"</span><span class="p">></span> + This is a lead paragraph. It stands out from regular paragraphs. +<span class="p"></</span><span class="nt">p</span><span class="p">></span></code></pre></div> +<h2 id="inline-text-elements">Inline text elements</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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span><span class="p">></span>You can use the mark tag to <span class="p"><</span><span class="nt">mark</span><span class="p">></span>highlight<span class="p"></</span><span class="nt">mark</span><span class="p">></span> text.<span class="p"></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">del</span><span class="p">></span>This line of text is meant to be treated as deleted text.<span class="p"></</span><span class="nt">del</span><span class="p">></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">s</span><span class="p">></span>This line of text is meant to be treated as no longer accurate.<span class="p"></</span><span class="nt">s</span><span class="p">></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">ins</span><span class="p">></span>This line of text is meant to be treated as an addition to the document.<span class="p"></</span><span class="nt">ins</span><span class="p">></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">u</span><span class="p">></span>This line of text will render as underlined<span class="p"></</span><span class="nt">u</span><span class="p">></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">small</span><span class="p">></span>This line of text is meant to be treated as fine print.<span class="p"></</span><span class="nt">small</span><span class="p">></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">strong</span><span class="p">></span>This line rendered as bold text.<span class="p"></</span><span class="nt">strong</span><span class="p">></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">em</span><span class="p">></span>This line rendered as italicized text.<span class="p"></</span><span class="nt">em</span><span class="p">></</span><span class="nt">p</span><span class="p">></span></code></pre></div> +<p><code>.mark</code> and <code>.small</code> classes are also available to apply the same styles as <code><mark></code> and <code><small></code> while avoiding any unwanted semantic implications that the tags would bring.</p> +<p>While not shown above, feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p> +<h2 id="text-utilities">Text utilities</h2> +<p>Change text alignment, transform, style, weight, and color with our <a href="/docs/4.6/utilities/text/">text utilities</a> and <a href="/docs/4.6/utilities/colors/">color utilities</a>.</p> +<h2 id="abbreviations">Abbreviations</h2> +<p>Stylized implementation of HTML’s <code><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>.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><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">abbr</span> <span class="na">title</span><span class="o">=</span><span class="s">"attribute"</span><span class="p">></span>attr<span class="p"></</span><span class="nt">abbr</span><span class="p">></</span><span class="nt">p</span><span class="p">></span> +<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">abbr</span> <span class="na">title</span><span class="o">=</span><span class="s">"HyperText Markup Language"</span> <span class="na">class</span><span class="o">=</span><span class="s">"initialism"</span><span class="p">></span>HTML<span class="p"></</span><span class="nt">abbr</span><span class="p">></</span><span class="nt">p</span><span class="p">></span></code></pre></div> +<h2 id="blockquotes">Blockquotes</h2> +<p>For quoting blocks of content from another source within your document. Wrap <code><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">A well-known quote, contained in a blockquote element.</p> +</blockquote> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote"</span><span class="p">></span> + <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span> +<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></code></pre></div> +<h3 id="naming-a-source">Naming a source</h3> +<p>Add a <code><footer class="blockquote-footer"></code> for identifying the source. Wrap the name of the source work in <code><cite></code>.</p> +<div class="bd-example"> +<blockquote class="blockquote"> + <p class="mb-0">A well-known quote, contained in a blockquote element.</p> + <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> +</blockquote> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote"</span><span class="p">></span> + <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span> + <span class="p"><</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></</span><span class="nt">footer</span><span class="p">></span> +<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></code></pre></div> +<h3 id="alignment">Alignment</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">>A well-known quote, contained in a blockquote element.</p> + <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> +</blockquote> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote text-center"</span><span class="p">></span> + <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span> + <span class="p"><</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></</span><span class="nt">footer</span><span class="p">></span> +<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></code></pre></div> +<div class="bd-example"> +<blockquote class="blockquote text-right"> + <p class="mb-0">A well-known quote, contained in a blockquote element.</p> + <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> +</blockquote> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote text-right"</span><span class="p">></span> + <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span> + <span class="p"><</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></</span><span class="nt">footer</span><span class="p">></span> +<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></code></pre></div> +<h2 id="lists">Lists</h2> +<h3 id="unstyled">Unstyled</h3> +<p>Remove the default <code>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>This is a list.</li> + <li>It appears completely unstyled.</li> + <li>Structurally, it's still a list.</li> + <li>However, this style only applies to immediate child elements.</li> + <li>Nested lists: + <ul> + <li>are unaffected by this style</li> + <li>will still show a bullet</li> + <li>and have appropriate left margin</li> + </ul> + </li> + <li>This may still come in handy in some situations.</li> +</ul> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-unstyled"</span><span class="p">></span> + <span class="p"><</span><span class="nt">li</span><span class="p">></span>This is a list.<span class="p"></</span><span class="nt">li</span><span class="p">></span> + <span class="p"><</span><span class="nt">li</span><span class="p">></span>It appears completely unstyled.<span class="p"></</span><span class="nt">li</span><span class="p">></span> + <span class="p"><</span><span class="nt">li</span><span class="p">></span>Structurally, it's still a list.<span class="p"></</span><span class="nt">li</span><span class="p">></span> + <span class="p"><</span><span class="nt">li</span><span class="p">></span>However, this style only applies to immediate child elements.<span class="p"></</span><span class="nt">li</span><span class="p">></span> + <span class="p"><</span><span class="nt">li</span><span class="p">></span>Nested lists: + <span class="p"><</span><span class="nt">ul</span><span class="p">></span> + <span class="p"><</span><span class="nt">li</span><span class="p">></span>are unaffected by this style<span class="p"></</span><span class="nt">li</span><span class="p">></span> + <span class="p"><</span><span class="nt">li</span><span class="p">></span>will still show a bullet<span class="p"></</span><span class="nt">li</span><span class="p">></span> + <span class="p"><</span><span class="nt">li</span><span class="p">></span>and have appropriate left margin<span class="p"></</span><span class="nt">li</span><span class="p">></span> + <span class="p"></</span><span class="nt">ul</span><span class="p">></span> + <span class="p"></</span><span class="nt">li</span><span class="p">></span> + <span class="p"><</span><span class="nt">li</span><span class="p">></span>This may still come in handy in some situations.<span class="p"></</span><span class="nt">li</span><span class="p">></span> +<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div> +<h3 id="inline">Inline</h3> +<p>Remove a list’s bullets and apply some light <code>margin</code> with a combination of two classes, <code>.list-inline</code> and <code>.list-inline-item</code>.</p> +<div class="bd-example"> +<ul class="list-inline"> + <li class="list-inline-item">This is a list item.</li> + <li class="list-inline-item">And another one.</li> + <li class="list-inline-item">But they're displayed inline.</li> +</ul> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline"</span><span class="p">></span> + <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline-item"</span><span class="p">></span>This is a list item.<span class="p"></</span><span class="nt">li</span><span class="p">></span> + <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline-item"</span><span class="p">></span>And another one.<span class="p"></</span><span class="nt">li</span><span class="p">></span> + <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline-item"</span><span class="p">></span>But they're displayed inline.<span class="p"></</span><span class="nt">li</span><span class="p">></span> +<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div> +<h3 id="description-list-alignment">Description list alignment</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>.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">Term</dt> + <dd class="col-sm-9"> + <p>Definition for the term.</p> + <p>And some more placeholder definition text.</p> + </dd> + + <dt class="col-sm-3">Another term</dt> + <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd> + + <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> + <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">I heard you like definition lists. Let me put a definition list inside your definition list.</dd> + </dl> + </dd> +</dl> +</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">dl</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span> + <span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Description lists<span class="p"></</span><span class="nt">dt</span><span class="p">></span> + <span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>A description list is perfect for defining terms.<span class="p"></</span><span class="nt">dd</span><span class="p">></span> + + <span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Term<span class="p"></</span><span class="nt">dt</span><span class="p">></span> + <span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span> + <span class="p"><</span><span class="nt">p</span><span class="p">></span>Definition for the term.<span class="p"></</span><span class="nt">p</span><span class="p">></span> + <span class="p"><</span><span class="nt">p</span><span class="p">></span>And some more placeholder definition text.<span class="p"></</span><span class="nt">p</span><span class="p">></span> + <span class="p"></</span><span class="nt">dd</span><span class="p">></span> + + <span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Another term<span class="p"></</span><span class="nt">dt</span><span class="p">></span> + <span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>This definition is short, so no extra paragraphs or anything.<span class="p"></</span><span class="nt">dd</span><span class="p">></span> + + <span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3 text-truncate"</span><span class="p">></span>Truncated term is truncated<span class="p"></</span><span class="nt">dt</span><span class="p">></span> + <span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>This can be useful when space is tight. Adds an ellipsis at the end.<span class="p"></</span><span class="nt">dd</span><span class="p">></span> + + <span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Nesting<span class="p"></</span><span class="nt">dt</span><span class="p">></span> + <span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span> + <span class="p"><</span><span class="nt">dl</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span> + <span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-4"</span><span class="p">></span>Nested definition list<span class="p"></</span><span class="nt">dt</span><span class="p">></span> + <span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-8"</span><span class="p">></span>I heard you like definition lists. Let me put a definition list inside your definition list.<span class="p"></</span><span class="nt">dd</span><span class="p">></span> + <span class="p"></</span><span class="nt">dl</span><span class="p">></span> + <span class="p"></</span><span class="nt">dd</span><span class="p">></span> +<span class="p"></</span><span class="nt">dl</span><span class="p">></span></code></pre></div> +<h2 id="responsive-font-sizes">Responsive font sizes</h2> +<p>As of v4.3.0, Bootstrap ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. <abbr title="Responsive font sizes">RFS</abbr> can be enabled by changing the <code>$enable-responsive-font-sizes</code> Sass variable to <code>true</code> and recompiling Bootstrap.</p> +<p>To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal <code>font-size</code> properties. Responsive font sizes will be compiled into <code>calc()</code> functions with a mix of <code>rem</code> and viewport units to enable the responsive scaling behavior. More about <abbr title="Responsive font sizes">RFS</abbr> and its configuration can be found on its <a href="https://github.com/twbs/rfs/tree/v8.0.4">GitHub repository</a>.</p> + + </main> + </div> + </div> + + <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> +<script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script> + +<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> + + +<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> + +<script src="/docs/4.6/assets/js/docs.min.js"></script> + + </body> +</html> |