mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-01 01:21:49 +02:00
Code Issues Releases Wiki Activity

Add v4.5.1 docs (#31409)

Browse Source
This commit is contained in:
XhmikosR
2020-08-04 19:36:55 +03:00
committed by GitHub
parent 3f76a6fcd2
commit 891f87bb54
118 changed files with 2674 additions and 2372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/4.5/content/code/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.0.1">
<meta name="generator" content="Jekyll v4.1.1">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="4.5">
@@ -15,7 +15,7 @@
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/code/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
@@ -62,9 +62,10 @@
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
<div class="skippy overflow-hidden">
<div class="container-xl">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
@@ -478,13 +479,16 @@
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Code</h1>
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/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 class="highlighter-rouge">&lt;code&gt;</code>. Be sure to escape HTML angle brackets.</p>
<p>Wrap inline snippets of code with <code class="language-plaintext highlighter-rouge">&lt;code&gt;</code>. Be sure to escape HTML angle brackets.</p>
<div class="bd-example">
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
@@ -493,7 +497,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="code-blocks">Code blocks</h2>
<p>Use <code class="highlighter-rouge">&lt;pre&gt;</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 class="highlighter-rouge">.pre-scrollable</code> class, which will set a max-height of 340px and provide a y-axis scrollbar.</p>
<p>Use <code class="language-plaintext highlighter-rouge">&lt;pre&gt;</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 class="language-plaintext highlighter-rouge">.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>&lt;p&gt;Sample text here...&lt;/p&gt;
@@ -506,7 +510,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="variables">Variables</h2>
<p>For indicating variables use the <code class="highlighter-rouge">&lt;var&gt;</code> tag.</p>
<p>For indicating variables use the <code class="language-plaintext highlighter-rouge">&lt;var&gt;</code> tag.</p>
<div class="bd-example">
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
@@ -515,7 +519,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="user-input">User input</h2>
<p>Use the <code class="highlighter-rouge">&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p>
<p>Use the <code class="language-plaintext highlighter-rouge">&lt;kbd&gt;</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 />
@@ -526,7 +530,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<h2 id="sample-output">Sample output</h2>
<p>For indicating sample output from a program use the <code class="highlighter-rouge">&lt;samp&gt;</code> tag.</p>
<p>For indicating sample output from a program use the <code class="language-plaintext highlighter-rouge">&lt;samp&gt;</code> tag.</p>
<div class="bd-example">
<samp>This text is meant to be treated as sample output from a computer program.</samp>
@@ -539,6 +543,6 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
</body>
</html>

22
docs/4.5/content/figures/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Documentation and examples for 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="Jekyll v4.0.1">
<meta name="generator" content="Jekyll v4.1.1">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="4.5">
@@ -15,7 +15,7 @@
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/figures/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
@@ -62,9 +62,10 @@
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
<div class="skippy overflow-hidden">
<div class="container-xl">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
@@ -468,13 +469,16 @@
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Figures</h1>
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/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 class="highlighter-rouge">&lt;figure&gt;</code>.</p>
<p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code class="language-plaintext highlighter-rouge">&lt;figure&gt;</code>.</p>
<p>Use the included <code class="highlighter-rouge">.figure</code> , <code class="highlighter-rouge">.figure-img</code> and <code class="highlighter-rouge">.figure-caption</code> classes to provide some baseline styles for the HTML5 <code class="highlighter-rouge">&lt;figure&gt;</code> and <code class="highlighter-rouge">&lt;figcaption&gt;</code> elements. Images in figures have no explicit size, so be sure to add the <code class="highlighter-rouge">.img-fluid</code> class to your <code class="highlighter-rouge">&lt;img&gt;</code> to make it responsive.</p>
<p>Use the included <code class="language-plaintext highlighter-rouge">.figure</code> , <code class="language-plaintext highlighter-rouge">.figure-img</code> and <code class="language-plaintext highlighter-rouge">.figure-caption</code> classes to provide some baseline styles for the HTML5 <code class="language-plaintext highlighter-rouge">&lt;figure&gt;</code> and <code class="language-plaintext highlighter-rouge">&lt;figcaption&gt;</code> elements. Images in figures have no explicit size, so be sure to add the <code class="language-plaintext highlighter-rouge">.img-fluid</code> class to your <code class="language-plaintext highlighter-rouge">&lt;img&gt;</code> to make it responsive.</p>
<div class="bd-example">
<figure class="figure">
@@ -506,6 +510,6 @@
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
</body>
</html>

30
docs/4.5/content/images/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Documentation and examples for 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="Jekyll v4.0.1">
<meta name="generator" content="Jekyll v4.1.1">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="4.5">
@@ -15,7 +15,7 @@
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/images/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
@@ -62,9 +62,10 @@
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
<div class="skippy overflow-hidden">
<div class="container-xl">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
@@ -477,13 +478,16 @@
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Images</h1>
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/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 class="highlighter-rouge">.img-fluid</code>. <code class="highlighter-rouge">max-width: 100%;</code> and <code class="highlighter-rouge">height: auto;</code> are applied to the image so that it scales with the parent element.</p>
<p>Images in Bootstrap are made responsive with <code class="language-plaintext highlighter-rouge">.img-fluid</code>. <code class="language-plaintext highlighter-rouge">max-width: 100%;</code> and <code class="language-plaintext highlighter-rouge">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" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Responsive image"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive image</text></svg>
@@ -492,14 +496,14 @@
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid"</span> <span class="na">alt=</span><span class="s">"Responsive image"</span><span class="nt">&gt;</span></code></pre></figure>
<div class="bd-callout bd-callout-warning">
<h5 id="svg-images-and-ie-10">SVG images and IE 10</h5>
<h5 id="svg-images-and-internet-explorer">SVG images and Internet Explorer</h5>
<p>In Internet Explorer 10, SVG images with <code class="highlighter-rouge">.img-fluid</code> are disproportionately sized. To fix this, add <code class="highlighter-rouge">width: 100% \9;</code> where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.</p>
<p>In Internet Explorer 10 and 11, SVG images with <code class="language-plaintext highlighter-rouge">.img-fluid</code> are disproportionately sized. To fix this, add <code class="language-plaintext highlighter-rouge">width: 100%;</code> or <code class="language-plaintext highlighter-rouge">.w-100</code> where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.</p>
</div>
<h2 id="image-thumbnails">Image thumbnails</h2>
<p>In addition to our <a href="/docs/4.5/utilities/borders/">border-radius utilities</a>, you can use <code class="highlighter-rouge">.img-thumbnail</code> to give an image a rounded 1px border appearance.</p>
<p>In addition to our <a href="/docs/4.5/utilities/borders/">border-radius utilities</a>, you can use <code class="language-plaintext highlighter-rouge">.img-thumbnail</code> to give an image a rounded 1px border appearance.</p>
<div class="bd-example bd-example-images">
<svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" 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"><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="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
@@ -509,7 +513,7 @@
<h2 id="aligning-images">Aligning images</h2>
<p>Align images with the <a href="/docs/4.5/utilities/float/">helper float classes</a> or <a href="/docs/4.5/utilities/text/#text-alignment">text alignment classes</a>. <code class="highlighter-rouge">block</code>-level images can be centered using <a href="/docs/4.5/utilities/spacing/#horizontal-centering">the <code class="highlighter-rouge">.mx-auto</code> margin utility class</a>.</p>
<p>Align images with the <a href="/docs/4.5/utilities/float/">helper float classes</a> or <a href="/docs/4.5/utilities/text/#text-alignment">text alignment classes</a>. <code class="language-plaintext highlighter-rouge">block</code>-level images can be centered using <a href="/docs/4.5/utilities/spacing/#horizontal-centering">the <code class="language-plaintext highlighter-rouge">.mx-auto</code> margin utility class</a>.</p>
<div class="bd-example bd-example-images">
<svg class="bd-placeholder-img rounded float-left" width="200" height="200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 200x200"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
@@ -537,7 +541,7 @@
<h2 id="picture">Picture</h2>
<p>If you are using the <code class="highlighter-rouge">&lt;picture&gt;</code> element to specify multiple <code class="highlighter-rouge">&lt;source&gt;</code> elements for a specific <code class="highlighter-rouge">&lt;img&gt;</code>, make sure to add the <code class="highlighter-rouge">.img-*</code> classes to the <code class="highlighter-rouge">&lt;img&gt;</code> and not to the <code class="highlighter-rouge">&lt;picture&gt;</code> tag.</p>
<p>If you are using the <code class="language-plaintext highlighter-rouge">&lt;picture&gt;</code> element to specify multiple <code class="language-plaintext highlighter-rouge">&lt;source&gt;</code> elements for a specific <code class="language-plaintext highlighter-rouge">&lt;img&gt;</code>, make sure to add the <code class="language-plaintext highlighter-rouge">.img-*</code> classes to the <code class="language-plaintext highlighter-rouge">&lt;img&gt;</code> and not to the <code class="language-plaintext highlighter-rouge">&lt;picture&gt;</code> tag.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">​<span class="nt">&lt;picture&gt;</span>
<span class="nt">&lt;source</span> <span class="na">srcset=</span><span class="s">"..."</span> <span class="na">type=</span><span class="s">"image/svg+xml"</span><span class="nt">&gt;</span>
@@ -550,6 +554,6 @@
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
</body>
</html>

96
docs/4.5/content/reboot/index.html
View File

@@ -5,7 +5,7 @@
<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="Jekyll v4.0.1">
<meta name="generator" content="Jekyll v4.1.1">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="4.5">
@@ -15,7 +15,7 @@
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/reboot/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
@@ -62,9 +62,10 @@
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
<div class="skippy overflow-hidden">
<div class="container-xl">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
@@ -494,32 +495,35 @@
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Reboot</h1>
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/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 class="highlighter-rouge">&lt;table&gt;</code> styles for a simpler baseline and later provide <code class="highlighter-rouge">.table</code>, <code class="highlighter-rouge">.table-bordered</code>, and more.</p>
<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 class="language-plaintext highlighter-rouge">&lt;table&gt;</code> styles for a simpler baseline and later provide <code class="language-plaintext highlighter-rouge">.table</code>, <code class="language-plaintext highlighter-rouge">.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 class="highlighter-rouge">rem</code>s instead of <code class="highlighter-rouge">em</code>s for scalable component spacing.</li>
<li>Avoid <code class="highlighter-rouge">margin-top</code>. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of <code class="highlighter-rouge">margin</code> is a simpler mental model.</li>
<li>For easier scaling across device sizes, block elements should use <code class="highlighter-rouge">rem</code>s for <code class="highlighter-rouge">margin</code>s.</li>
<li>Keep declarations of <code class="highlighter-rouge">font</code>-related properties to a minimum, using <code class="highlighter-rouge">inherit</code> whenever possible.</li>
<li>Update some browser default values to use <code class="language-plaintext highlighter-rouge">rem</code>s instead of <code class="language-plaintext highlighter-rouge">em</code>s for scalable component spacing.</li>
<li>Avoid <code class="language-plaintext highlighter-rouge">margin-top</code>. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of <code class="language-plaintext highlighter-rouge">margin</code> is a simpler mental model.</li>
<li>For easier scaling across device sizes, block elements should use <code class="language-plaintext highlighter-rouge">rem</code>s for <code class="language-plaintext highlighter-rouge">margin</code>s.</li>
<li>Keep declarations of <code class="language-plaintext highlighter-rouge">font</code>-related properties to a minimum, using <code class="language-plaintext highlighter-rouge">inherit</code> whenever possible.</li>
</ul>
<h2 id="page-defaults">Page defaults</h2>
<p>The <code class="highlighter-rouge"><span class="nt">&lt;html&gt;</span></code> and <code class="highlighter-rouge">&lt;body&gt;</code> elements are updated to provide better page-wide defaults. More specifically:</p>
<p>The <code class="language-plaintext highlighter-rouge">&lt;html&gt;</code> and <code class="language-plaintext highlighter-rouge">&lt;body&gt;</code> elements are updated to provide better page-wide defaults. More specifically:</p>
<ul>
<li>The <code class="highlighter-rouge">box-sizing</code> is globally set on every element—including <code class="highlighter-rouge">*::before</code> and <code class="highlighter-rouge">*::after</code>, to <code class="highlighter-rouge">border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.</li>
<li>No base <code class="highlighter-rouge">font-size</code> is declared on the <code class="highlighter-rouge"><span class="nt">&lt;html&gt;</span></code>, but <code class="highlighter-rouge">16px</code> is assumed (the browser default). <code class="highlighter-rouge">font-size: 1rem</code> is applied on the <code class="highlighter-rouge">&lt;body&gt;</code> for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.</li>
<li>The <code class="highlighter-rouge">&lt;body&gt;</code> also sets a global <code class="highlighter-rouge">font-family</code>, <code class="highlighter-rouge">line-height</code>, and <code class="highlighter-rouge">text-align</code>. This is inherited later by some form elements to prevent font inconsistencies.</li>
<li>For safety, the <code class="highlighter-rouge">&lt;body&gt;</code> has a declared <code class="highlighter-rouge">background-color</code>, defaulting to <code class="highlighter-rouge">#fff</code>.</li>
<li>The <code class="language-plaintext highlighter-rouge">box-sizing</code> is globally set on every element—including <code class="language-plaintext highlighter-rouge">*::before</code> and <code class="language-plaintext highlighter-rouge">*::after</code>, to <code class="language-plaintext highlighter-rouge">border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.</li>
<li>No base <code class="language-plaintext highlighter-rouge">font-size</code> is declared on the <code class="language-plaintext highlighter-rouge">&lt;html&gt;</code>, but <code class="language-plaintext highlighter-rouge">16px</code> is assumed (the browser default). <code class="language-plaintext highlighter-rouge">font-size: 1rem</code> is applied on the <code class="language-plaintext highlighter-rouge">&lt;body&gt;</code> for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.</li>
<li>The <code class="language-plaintext highlighter-rouge">&lt;body&gt;</code> also sets a global <code class="language-plaintext highlighter-rouge">font-family</code>, <code class="language-plaintext highlighter-rouge">line-height</code>, and <code class="language-plaintext highlighter-rouge">text-align</code>. This is inherited later by some form elements to prevent font inconsistencies.</li>
<li>For safety, the <code class="language-plaintext highlighter-rouge">&lt;body&gt;</code> has a declared <code class="language-plaintext highlighter-rouge">background-color</code>, defaulting to <code class="language-plaintext highlighter-rouge">#fff</code>.</li>
</ul>
<h2 id="native-font-stack">Native font stack</h2>
@@ -544,11 +548,11 @@
<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="o">!</span><span class="nt">default</span><span class="o">;</span></code></pre></figure>
<p>This <code class="highlighter-rouge">font-family</code> is applied to the <code class="highlighter-rouge">&lt;body&gt;</code> and automatically inherited globally throughout Bootstrap. To switch the global <code class="highlighter-rouge">font-family</code>, update <code class="highlighter-rouge">$font-family-base</code> and recompile Bootstrap.</p>
<p>This <code class="language-plaintext highlighter-rouge">font-family</code> is applied to the <code class="language-plaintext highlighter-rouge">&lt;body&gt;</code> and automatically inherited globally throughout Bootstrap. To switch the global <code class="language-plaintext highlighter-rouge">font-family</code>, update <code class="language-plaintext highlighter-rouge">$font-family-base</code> and recompile Bootstrap.</p>
<h2 id="headings-and-paragraphs">Headings and paragraphs</h2>
<p>All heading elements—e.g., <code class="highlighter-rouge">&lt;h1&gt;</code>—and <code class="highlighter-rouge">&lt;p&gt;</code> are reset to have their <code class="highlighter-rouge">margin-top</code> removed. Headings have <code class="highlighter-rouge">margin-bottom: .5rem</code> added and paragraphs <code class="highlighter-rouge">margin-bottom: 1rem</code> for easy spacing.</p>
<p>All heading elements—e.g., <code class="language-plaintext highlighter-rouge">&lt;h1&gt;</code>—and <code class="language-plaintext highlighter-rouge">&lt;p&gt;</code> are reset to have their <code class="language-plaintext highlighter-rouge">margin-top</code> removed. Headings have <code class="language-plaintext highlighter-rouge">margin-bottom: .5rem</code> added and paragraphs <code class="language-plaintext highlighter-rouge">margin-bottom: 1rem</code> for easy spacing.</p>
<table>
<thead>
@@ -560,42 +564,42 @@
<tbody>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p>
<p><code class="language-plaintext highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p>
</td>
<td><span class="h1">h1. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p>
<p><code class="language-plaintext highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p>
</td>
<td><span class="h2">h2. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p>
<p><code class="language-plaintext highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p>
</td>
<td><span class="h3">h3. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p>
<p><code class="language-plaintext highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p>
</td>
<td><span class="h4">h4. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p>
<p><code class="language-plaintext highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p>
</td>
<td><span class="h5">h5. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p>
<p><code class="language-plaintext highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p>
</td>
<td><span class="h6">h6. Bootstrap heading</span></td>
@@ -605,7 +609,7 @@
<h2 id="lists">Lists</h2>
<p>All lists—<code class="highlighter-rouge">&lt;ul&gt;</code>, <code class="highlighter-rouge">&lt;ol&gt;</code>, and <code class="highlighter-rouge">&lt;dl&gt;</code>—have their <code class="highlighter-rouge">margin-top</code> removed and a <code class="highlighter-rouge">margin-bottom: 1rem</code>. Nested lists have no <code class="highlighter-rouge">margin-bottom</code>.</p>
<p>All lists—<code class="language-plaintext highlighter-rouge">&lt;ul&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;ol&gt;</code>, and <code class="language-plaintext highlighter-rouge">&lt;dl&gt;</code>—have their <code class="language-plaintext highlighter-rouge">margin-top</code> removed and a <code class="language-plaintext highlighter-rouge">margin-bottom: 1rem</code>. Nested lists have no <code class="language-plaintext highlighter-rouge">margin-bottom</code>.</p>
<div class="bd-example">
@@ -641,7 +645,7 @@
</div>
<p>For simpler styling, clear hierarchy, and better spacing, description lists have updated <code class="highlighter-rouge">margin</code>s. <code class="highlighter-rouge">&lt;dd&gt;</code>s reset <code class="highlighter-rouge">margin-left</code> to <code class="highlighter-rouge">0</code> and add <code class="highlighter-rouge">margin-bottom: .5rem</code>. <code class="highlighter-rouge">&lt;dt&gt;</code>s are <strong>bolded</strong>.</p>
<p>For simpler styling, clear hierarchy, and better spacing, description lists have updated <code class="language-plaintext highlighter-rouge">margin</code>s. <code class="language-plaintext highlighter-rouge">&lt;dd&gt;</code>s reset <code class="language-plaintext highlighter-rouge">margin-left</code> to <code class="language-plaintext highlighter-rouge">0</code> and add <code class="language-plaintext highlighter-rouge">margin-bottom: .5rem</code>. <code class="language-plaintext highlighter-rouge">&lt;dt&gt;</code>s are <strong>bolded</strong>.</p>
<div class="bd-example">
<dl>
@@ -657,7 +661,7 @@
<h2 id="preformatted-text">Preformatted text</h2>
<p>The <code class="highlighter-rouge">&lt;pre&gt;</code> element is reset to remove its <code class="highlighter-rouge">margin-top</code> and use <code class="highlighter-rouge">rem</code> units for its <code class="highlighter-rouge">margin-bottom</code>.</p>
<p>The <code class="language-plaintext highlighter-rouge">&lt;pre&gt;</code> element is reset to remove its <code class="language-plaintext highlighter-rouge">margin-top</code> and use <code class="language-plaintext highlighter-rouge">rem</code> units for its <code class="language-plaintext highlighter-rouge">margin-bottom</code>.</p>
<div class="bd-example">
<pre>
@@ -669,7 +673,7 @@
<h2 id="tables">Tables</h2>
<p>Tables are slightly adjusted to style <code class="highlighter-rouge">&lt;caption&gt;</code>s, collapse borders, and ensure consistent <code class="highlighter-rouge">text-align</code> throughout. Additional changes for borders, padding, and more come with <a href="/docs/4.5/content/tables/">the <code class="highlighter-rouge">.table</code> class</a>.</p>
<p>Tables are slightly adjusted to style <code class="language-plaintext highlighter-rouge">&lt;caption&gt;</code>s, collapse borders, and ensure consistent <code class="language-plaintext highlighter-rouge">text-align</code> throughout. Additional changes for borders, padding, and more come with <a href="/docs/4.5/content/tables/">the <code class="language-plaintext highlighter-rouge">.table</code> class</a>.</p>
<div class="bd-example">
<table>
@@ -712,12 +716,12 @@
<p>Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:</p>
<ul>
<li><code class="highlighter-rouge">&lt;fieldset&gt;</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 class="highlighter-rouge">&lt;legend&gt;</code>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.</li>
<li><code class="highlighter-rouge">&lt;label&gt;</code>s are set to <code class="highlighter-rouge">display: inline-block</code> to allow <code class="highlighter-rouge">margin</code> to be applied.</li>
<li><code class="highlighter-rouge">&lt;input&gt;</code>s, <code class="highlighter-rouge">&lt;select&gt;</code>s, <code class="highlighter-rouge">&lt;textarea&gt;</code>s, and <code class="highlighter-rouge">&lt;button&gt;</code>s are mostly addressed by Normalize, but Reboot removes their <code class="highlighter-rouge">margin</code> and sets <code class="highlighter-rouge">line-height: inherit</code>, too.</li>
<li><code class="highlighter-rouge">&lt;textarea&gt;</code>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.</li>
<li><code class="highlighter-rouge">&lt;button&gt;</code>s and <code class="highlighter-rouge">&lt;input&gt;</code> button elements have <code class="highlighter-rouge">cursor: pointer</code> when <code class="highlighter-rouge">:not(:disabled)</code>.</li>
<li><code class="language-plaintext highlighter-rouge">&lt;fieldset&gt;</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 class="language-plaintext highlighter-rouge">&lt;legend&gt;</code>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.</li>
<li><code class="language-plaintext highlighter-rouge">&lt;label&gt;</code>s are set to <code class="language-plaintext highlighter-rouge">display: inline-block</code> to allow <code class="language-plaintext highlighter-rouge">margin</code> to be applied.</li>
<li><code class="language-plaintext highlighter-rouge">&lt;input&gt;</code>s, <code class="language-plaintext highlighter-rouge">&lt;select&gt;</code>s, <code class="language-plaintext highlighter-rouge">&lt;textarea&gt;</code>s, and <code class="language-plaintext highlighter-rouge">&lt;button&gt;</code>s are mostly addressed by Normalize, but Reboot removes their <code class="language-plaintext highlighter-rouge">margin</code> and sets <code class="language-plaintext highlighter-rouge">line-height: inherit</code>, too.</li>
<li><code class="language-plaintext highlighter-rouge">&lt;textarea&gt;</code>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.</li>
<li><code class="language-plaintext highlighter-rouge">&lt;button&gt;</code>s and <code class="language-plaintext highlighter-rouge">&lt;input&gt;</code> button elements have <code class="language-plaintext highlighter-rouge">cursor: pointer</code> when <code class="language-plaintext highlighter-rouge">:not(:disabled)</code>.</li>
</ul>
<p>These changes, and more, are demonstrated below.</p>
@@ -808,18 +812,18 @@
<h3 id="pointers-on-buttons">Pointers on buttons</h3>
<p>Reboot includes an enhancement for <code class="highlighter-rouge">role="button"</code> to change the default cursor to <code class="highlighter-rouge">pointer</code>. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <code class="highlighter-rouge">&lt;button&gt;</code> elements, which get their own <code class="highlighter-rouge">cursor</code> change.</p>
<p>Reboot includes an enhancement for <code class="language-plaintext highlighter-rouge">role="button"</code> to change the default cursor to <code class="language-plaintext highlighter-rouge">pointer</code>. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <code class="language-plaintext highlighter-rouge">&lt;button&gt;</code> elements, which get their own <code class="language-plaintext highlighter-rouge">cursor</code> change.</p>
<div class="bd-example">
<span role="button">Non-button element button</span>
<span role="button" tabindex="0">Non-button element button</span>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">&gt;</span>Non-button element button<span class="nt">&lt;/span&gt;</span></code></pre></figure>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">tabindex=</span><span class="s">"0"</span><span class="nt">&gt;</span>Non-button element button<span class="nt">&lt;/span&gt;</span></code></pre></figure>
<h2 id="misc-elements">Misc elements</h2>
<h3 id="address">Address</h3>
<p>The <code class="highlighter-rouge">&lt;address&gt;</code> element is updated to reset the browser default <code class="highlighter-rouge">font-style</code> from <code class="highlighter-rouge">italic</code> to <code class="highlighter-rouge">normal</code>. <code class="highlighter-rouge">line-height</code> is also now inherited, and <code class="highlighter-rouge">margin-bottom: 1rem</code> has been added. <code class="highlighter-rouge">&lt;address&gt;</code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <code class="highlighter-rouge">&lt;br&gt;</code>.</p>
<p>The <code class="language-plaintext highlighter-rouge">&lt;address&gt;</code> element is updated to reset the browser default <code class="language-plaintext highlighter-rouge">font-style</code> from <code class="language-plaintext highlighter-rouge">italic</code> to <code class="language-plaintext highlighter-rouge">normal</code>. <code class="language-plaintext highlighter-rouge">line-height</code> is also now inherited, and <code class="language-plaintext highlighter-rouge">margin-bottom: 1rem</code> has been added. <code class="language-plaintext highlighter-rouge">&lt;address&gt;</code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <code class="language-plaintext highlighter-rouge">&lt;br&gt;</code>.</p>
<div class="bd-example">
<address>
@@ -837,7 +841,7 @@
<h3 id="blockquote">Blockquote</h3>
<p>The default <code class="highlighter-rouge">margin</code> on blockquotes is <code class="highlighter-rouge">1em 40px</code>, so we reset that to <code class="highlighter-rouge">0 0 1rem</code> for something more consistent with other elements.</p>
<p>The default <code class="language-plaintext highlighter-rouge">margin</code> on blockquotes is <code class="language-plaintext highlighter-rouge">1em 40px</code>, so we reset that to <code class="language-plaintext highlighter-rouge">0 0 1rem</code> for something more consistent with other elements.</p>
<div class="bd-example">
<blockquote class="blockquote">
@@ -848,7 +852,7 @@
<h3 id="inline-elements">Inline elements</h3>
<p>The <code class="highlighter-rouge">&lt;abbr&gt;</code> element receives basic styling to make it stand out amongst paragraph text.</p>
<p>The <code class="language-plaintext highlighter-rouge">&lt;abbr&gt;</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.
@@ -856,7 +860,7 @@
<h3 id="summary">Summary</h3>
<p>The default <code class="highlighter-rouge">cursor</code> on summary is <code class="highlighter-rouge">text</code>, so we reset that to <code class="highlighter-rouge">pointer</code> to convey that the element can be interacted with by clicking on it.</p>
<p>The default <code class="language-plaintext highlighter-rouge">cursor</code> on summary is <code class="language-plaintext highlighter-rouge">text</code>, so we reset that to <code class="language-plaintext highlighter-rouge">pointer</code> to convey that the element can be interacted with by clicking on it.</p>
<div class="bd-example">
<details>
@@ -870,25 +874,25 @@
</details>
</div>
<h2 id="html5-hidden-attribute">HTML5 <code class="highlighter-rouge">[hidden]</code> attribute</h2>
<h2 id="html5-hidden-attribute">HTML5 <code class="language-plaintext highlighter-rouge">[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 class="highlighter-rouge">[hidden]</code></a>, which is styled as <code class="highlighter-rouge">display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code class="highlighter-rouge">[hidden] { display: none !important; }</code> to help prevent its <code class="highlighter-rouge">display</code> from getting accidentally overridden. While <code class="highlighter-rouge">[hidden]</code> isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p>
<p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code class="language-plaintext highlighter-rouge">[hidden]</code></a>, which is styled as <code class="language-plaintext highlighter-rouge">display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code class="language-plaintext highlighter-rouge">[hidden] { display: none !important; }</code> to help prevent its <code class="language-plaintext highlighter-rouge">display</code> from getting accidentally overridden. While <code class="language-plaintext highlighter-rouge">[hidden]</code> isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">hidden</span><span class="nt">&gt;</span></code></pre></figure>
<div class="bd-callout bd-callout-warning">
<h5 id="jquery-incompatibility">jQuery incompatibility</h5>
<p><code class="highlighter-rouge">[hidden]</code> is not compatible with jQuery’s <code class="highlighter-rouge">$(...).hide()</code> and <code class="highlighter-rouge">$(...).show()</code> methods. Therefore, we don’t currently especially endorse <code class="highlighter-rouge">[hidden]</code> over other techniques for managing the <code class="highlighter-rouge">display</code> of elements.</p>
<p><code class="language-plaintext highlighter-rouge">[hidden]</code> is not compatible with jQuery’s <code class="language-plaintext highlighter-rouge">$(...).hide()</code> and <code class="language-plaintext highlighter-rouge">$(...).show()</code> methods. Therefore, we don’t currently especially endorse <code class="language-plaintext highlighter-rouge">[hidden]</code> over other techniques for managing the <code class="language-plaintext highlighter-rouge">display</code> of elements.</p>
</div>
<p>To merely toggle the visibility of an element, meaning its <code class="highlighter-rouge">display</code> is not modified and the element can still affect the flow of the document, use <a href="/docs/4.5/utilities/visibility/">the <code class="highlighter-rouge">.invisible</code> class</a> instead.</p>
<p>To merely toggle the visibility of an element, meaning its <code class="language-plaintext highlighter-rouge">display</code> is not modified and the element can still affect the flow of the document, use <a href="/docs/4.5/utilities/visibility/">the <code class="language-plaintext highlighter-rouge">.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.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
</body>
</html>

54
docs/4.5/content/tables/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Documentation and examples for 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="Jekyll v4.0.1">
<meta name="generator" content="Jekyll v4.1.1">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="4.5">
@@ -15,7 +15,7 @@
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/tables/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
@@ -62,9 +62,10 @@
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
<div class="skippy overflow-hidden">
<div class="container-xl">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
@@ -488,15 +489,18 @@
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Tables</h1>
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/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 class="highlighter-rouge">.table</code> to any <code class="highlighter-rouge">&lt;table&gt;</code>, then extend with custom styles or our various included modifier classes.</p>
<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 class="language-plaintext highlighter-rouge">.table</code> to any <code class="language-plaintext highlighter-rouge">&lt;table&gt;</code>, then extend with custom styles or our various included modifier classes.</p>
<p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.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>
<p>Using the most basic table markup, here’s how <code class="language-plaintext highlighter-rouge">.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">
@@ -561,7 +565,7 @@
<span class="nt">&lt;/tbody&gt;</span>
<span class="nt">&lt;/table&gt;</span></code></pre></figure>
<p>You can also invert the colors—with light text on dark backgrounds—with <code class="highlighter-rouge">.table-dark</code>.</p>
<p>You can also invert the colors—with light text on dark backgrounds—with <code class="language-plaintext highlighter-rouge">.table-dark</code>.</p>
<div class="bd-example">
<table class="table table-dark">
@@ -628,7 +632,7 @@
<h2 id="table-head-options">Table head options</h2>
<p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.thead-light</code> or <code class="highlighter-rouge">.thead-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
<p>Similar to tables and dark tables, use the modifier classes <code class="language-plaintext highlighter-rouge">.thead-light</code> or <code class="language-plaintext highlighter-rouge">.thead-dark</code> to make <code class="language-plaintext highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
<div class="bd-example">
<table class="table">
@@ -757,7 +761,7 @@
<h2 id="striped-rows">Striped rows</h2>
<p>Use <code class="highlighter-rouge">.table-striped</code> to add zebra-striping to any table row within the <code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
<p>Use <code class="language-plaintext highlighter-rouge">.table-striped</code> to add zebra-striping to any table row within the <code class="language-plaintext highlighter-rouge">&lt;tbody&gt;</code>.</p>
<div class="bd-example">
<table class="table table-striped">
@@ -887,7 +891,7 @@
<h2 id="bordered-table">Bordered table</h2>
<p>Add <code class="highlighter-rouge">.table-bordered</code> for borders on all sides of the table and cells.</p>
<p>Add <code class="language-plaintext highlighter-rouge">.table-bordered</code> for borders on all sides of the table and cells.</p>
<div class="bd-example">
<table class="table table-bordered">
@@ -1013,7 +1017,7 @@
<h2 id="borderless-table">Borderless table</h2>
<p>Add <code class="highlighter-rouge">.table-borderless</code> for a table without borders.</p>
<p>Add <code class="language-plaintext highlighter-rouge">.table-borderless</code> for a table without borders.</p>
<div class="bd-example">
<table class="table table-borderless">
@@ -1076,7 +1080,7 @@
<span class="nt">&lt;/tbody&gt;</span>
<span class="nt">&lt;/table&gt;</span></code></pre></figure>
<p><code class="highlighter-rouge">.table-borderless</code> can also be used on dark tables.</p>
<p><code class="language-plaintext highlighter-rouge">.table-borderless</code> can also be used on dark tables.</p>
<div class="bd-example">
<table class="table table-borderless table-dark">
@@ -1141,7 +1145,7 @@
<h2 id="hoverable-rows">Hoverable rows</h2>
<p>Add <code class="highlighter-rouge">.table-hover</code> to enable a hover state on table rows within a <code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
<p>Add <code class="language-plaintext highlighter-rouge">.table-hover</code> to enable a hover state on table rows within a <code class="language-plaintext highlighter-rouge">&lt;tbody&gt;</code>.</p>
<div class="bd-example">
<table class="table table-hover">
@@ -1267,7 +1271,7 @@
<h2 id="small-table">Small table</h2>
<p>Add <code class="highlighter-rouge">.table-sm</code> to make tables more compact by cutting cell padding in half.</p>
<p>Add <code class="language-plaintext highlighter-rouge">.table-sm</code> to make tables more compact by cutting cell padding in half.</p>
<div class="bd-example">
<table class="table table-sm">
@@ -1567,18 +1571,18 @@
<div class="bd-callout bd-callout-warning">
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="language-plaintext highlighter-rouge">.sr-only</code> class.</p>
</div>
<p>Create responsive tables by wrapping any <code class="highlighter-rouge">.table</code> with <code class="highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>, making the table scroll horizontally at each <code class="highlighter-rouge">max-width</code> breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.</p>
<p>Create responsive tables by wrapping any <code class="language-plaintext highlighter-rouge">.table</code> with <code class="language-plaintext highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>, making the table scroll horizontally at each <code class="language-plaintext highlighter-rouge">max-width</code> breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.</p>
<div class="bd-callout bd-callout-info">
<p>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 class="highlighter-rouge">min-</code> and <code class="highlighter-rouge">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.</p>
<p>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 class="language-plaintext highlighter-rouge">min-</code> and <code class="language-plaintext highlighter-rouge">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.</p>
</div>
<h2 id="captions">Captions</h2>
<p>A <code class="highlighter-rouge">&lt;caption&gt;</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>
<p>A <code class="language-plaintext highlighter-rouge">&lt;caption&gt;</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">
@@ -1647,17 +1651,17 @@
<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 class="highlighter-rouge">.table</code> with <code class="highlighter-rouge">.table-responsive</code>. Or, pick a maximum breakpoint with which to have a responsive table up to by using <code class="highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>.</p>
<p>Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a <code class="language-plaintext highlighter-rouge">.table</code> with <code class="language-plaintext highlighter-rouge">.table-responsive</code>. Or, pick a maximum breakpoint with which to have a responsive table up to by using <code class="language-plaintext highlighter-rouge">.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 class="highlighter-rouge">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.</p>
<p>Responsive tables make use of <code class="language-plaintext highlighter-rouge">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.</p>
</div>
<h3 id="always-responsive">Always responsive</h3>
<p>Across every breakpoint, use <code class="highlighter-rouge">.table-responsive</code> for horizontally scrolling tables.</p>
<p>Across every breakpoint, use <code class="language-plaintext highlighter-rouge">.table-responsive</code> for horizontally scrolling tables.</p>
<div class="bd-example">
<div class="table-responsive">
@@ -1726,7 +1730,7 @@
<h3 id="breakpoint-specific">Breakpoint specific</h3>
<p>Use <code class="highlighter-rouge">.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>Use <code class="language-plaintext highlighter-rouge">.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>
@@ -1980,6 +1984,6 @@
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
</body>
</html>

70
docs/4.5/content/typography/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Documentation and examples for 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="Jekyll v4.0.1">
<meta name="generator" content="Jekyll v4.1.1">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="4.5">
@@ -15,7 +15,7 @@
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/content/typography/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
@@ -62,9 +62,10 @@
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
<div class="skippy overflow-hidden">
<div class="container-xl">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
@@ -498,7 +499,10 @@
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Typography</h1>
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/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>
@@ -507,18 +511,18 @@
<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <a href="/docs/4.5/utilities/text/">textual utility classes</a>.</p>
<ul>
<li>Use a <a href="/docs/4.5/content/reboot/#native-font-stack">native font stack</a> that selects the best <code class="highlighter-rouge">font-family</code> for each OS and device.</li>
<li>For a more inclusive and accessible type scale, we assume the browser default root <code class="highlighter-rouge">font-size</code> (typically 16px) so visitors can customize their browser defaults as needed.</li>
<li>Use the <code class="highlighter-rouge">$font-family-base</code>, <code class="highlighter-rouge">$font-size-base</code>, and <code class="highlighter-rouge">$line-height-base</code> attributes as our typographic base applied to the <code class="highlighter-rouge">&lt;body&gt;</code>.</li>
<li>Set the global link color via <code class="highlighter-rouge">$link-color</code> and apply link underlines only on <code class="highlighter-rouge">:hover</code>.</li>
<li>Use <code class="highlighter-rouge">$body-bg</code> to set a <code class="highlighter-rouge">background-color</code> on the <code class="highlighter-rouge">&lt;body&gt;</code> (<code class="highlighter-rouge">#fff</code> by default).</li>
<li>Use a <a href="/docs/4.5/content/reboot/#native-font-stack">native font stack</a> that selects the best <code class="language-plaintext highlighter-rouge">font-family</code> for each OS and device.</li>
<li>For a more inclusive and accessible type scale, we assume the browser default root <code class="language-plaintext highlighter-rouge">font-size</code> (typically 16px) so visitors can customize their browser defaults as needed.</li>
<li>Use the <code class="language-plaintext highlighter-rouge">$font-family-base</code>, <code class="language-plaintext highlighter-rouge">$font-size-base</code>, and <code class="language-plaintext highlighter-rouge">$line-height-base</code> attributes as our typographic base applied to the <code class="language-plaintext highlighter-rouge">&lt;body&gt;</code>.</li>
<li>Set the global link color via <code class="language-plaintext highlighter-rouge">$link-color</code> and apply link underlines only on <code class="language-plaintext highlighter-rouge">:hover</code>.</li>
<li>Use <code class="language-plaintext highlighter-rouge">$body-bg</code> to set a <code class="language-plaintext highlighter-rouge">background-color</code> on the <code class="language-plaintext highlighter-rouge">&lt;body&gt;</code> (<code class="language-plaintext highlighter-rouge">#fff</code> by default).</li>
</ul>
<p>These styles can be found within <code class="highlighter-rouge">_reboot.scss</code>, and the global variables are defined in <code class="highlighter-rouge">_variables.scss</code>. Make sure to set <code class="highlighter-rouge">$font-size-base</code> in <code class="highlighter-rouge">rem</code>.</p>
<p>These styles can be found within <code class="language-plaintext highlighter-rouge">_reboot.scss</code>, and the global variables are defined in <code class="language-plaintext highlighter-rouge">_variables.scss</code>. Make sure to set <code class="language-plaintext highlighter-rouge">$font-size-base</code> in <code class="language-plaintext highlighter-rouge">rem</code>.</p>
<h2 id="headings">Headings</h2>
<p>All HTML headings, <code class="highlighter-rouge">&lt;h1&gt;</code> through <code class="highlighter-rouge">&lt;h6&gt;</code>, are available.</p>
<p>All HTML headings, <code class="language-plaintext highlighter-rouge">&lt;h1&gt;</code> through <code class="language-plaintext highlighter-rouge">&lt;h6&gt;</code>, are available.</p>
<table>
<thead>
@@ -530,42 +534,42 @@
<tbody>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p>
<p><code class="language-plaintext highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p>
</td>
<td><span class="h1">h1. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p>
<p><code class="language-plaintext highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p>
</td>
<td><span class="h2">h2. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p>
<p><code class="language-plaintext highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p>
</td>
<td><span class="h3">h3. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p>
<p><code class="language-plaintext highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p>
</td>
<td><span class="h4">h4. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p>
<p><code class="language-plaintext highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p>
</td>
<td><span class="h5">h5. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p>
<p><code class="language-plaintext highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p>
</td>
<td><span class="h6">h6. Bootstrap heading</span></td>
@@ -580,7 +584,7 @@
<span class="nt">&lt;h5&gt;</span>h5. Bootstrap heading<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;h6&gt;</span>h6. Bootstrap heading<span class="nt">&lt;/h6&gt;</span></code></pre></figure>
<p><code class="highlighter-rouge">.h1</code> through <code class="highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
<p><code class="language-plaintext highlighter-rouge">.h1</code> through <code class="language-plaintext highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
<div class="bd-example">
<p class="h1">h1. Bootstrap heading</p>
@@ -642,7 +646,7 @@
<h2 id="lead">Lead</h2>
<p>Make a paragraph stand out by adding <code class="highlighter-rouge">.lead</code>.</p>
<p>Make a paragraph stand out by adding <code class="language-plaintext highlighter-rouge">.lead</code>.</p>
<div class="bd-example">
<p class="lead">
@@ -676,9 +680,9 @@
<span class="nt">&lt;p&gt;&lt;strong&gt;</span>This line rendered as bold text.<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;em&gt;</span>This line rendered as italicized text.<span class="nt">&lt;/em&gt;&lt;/p&gt;</span></code></pre></figure>
<p><code class="highlighter-rouge">.mark</code> and <code class="highlighter-rouge">.small</code> classes are also available to apply the same styles as <code class="highlighter-rouge">&lt;mark&gt;</code> and <code class="highlighter-rouge">&lt;small&gt;</code> while avoiding any unwanted semantic implications that the tags would bring.</p>
<p><code class="language-plaintext highlighter-rouge">.mark</code> and <code class="language-plaintext highlighter-rouge">.small</code> classes are also available to apply the same styles as <code class="language-plaintext highlighter-rouge">&lt;mark&gt;</code> and <code class="language-plaintext highlighter-rouge">&lt;small&gt;</code> while avoiding any unwanted semantic implications that the tags would bring.</p>
<p>While not shown above, feel free to use <code class="highlighter-rouge">&lt;b&gt;</code> and <code class="highlighter-rouge">&lt;i&gt;</code> in HTML5. <code class="highlighter-rouge">&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code class="highlighter-rouge">&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
<p>While not shown above, feel free to use <code class="language-plaintext highlighter-rouge">&lt;b&gt;</code> and <code class="language-plaintext highlighter-rouge">&lt;i&gt;</code> in HTML5. <code class="language-plaintext highlighter-rouge">&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code class="language-plaintext highlighter-rouge">&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
<h2 id="text-utilities">Text utilities</h2>
@@ -686,9 +690,9 @@
<h2 id="abbreviations">Abbreviations</h2>
<p>Stylized implementation of HTML’s <code class="highlighter-rouge">&lt;abbr&gt;</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>Stylized implementation of HTML’s <code class="language-plaintext highlighter-rouge">&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.</p>
<p>Add <code class="highlighter-rouge">.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
<p>Add <code class="language-plaintext highlighter-rouge">.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
<div class="bd-example">
<p><abbr title="attribute">attr</abbr></p>
@@ -699,7 +703,7 @@
<h2 id="blockquotes">Blockquotes</h2>
<p>For quoting blocks of content from another source within your document. Wrap <code class="highlighter-rouge">&lt;blockquote class="blockquote"&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.</p>
<p>For quoting blocks of content from another source within your document. Wrap <code class="language-plaintext highlighter-rouge">&lt;blockquote class="blockquote"&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.</p>
<div class="bd-example">
<blockquote class="blockquote">
@@ -712,7 +716,7 @@
<h3 id="naming-a-source">Naming a source</h3>
<p>Add a <code class="highlighter-rouge">&lt;footer class="blockquote-footer"&gt;</code> for identifying the source. Wrap the name of the source work in <code class="highlighter-rouge">&lt;cite&gt;</code>.</p>
<p>Add a <code class="language-plaintext highlighter-rouge">&lt;footer class="blockquote-footer"&gt;</code> for identifying the source. Wrap the name of the source work in <code class="language-plaintext highlighter-rouge">&lt;cite&gt;</code>.</p>
<div class="bd-example">
<blockquote class="blockquote">
@@ -755,7 +759,7 @@
<h3 id="unstyled">Unstyled</h3>
<p>Remove the default <code class="highlighter-rouge">list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
<p>Remove the default <code class="language-plaintext highlighter-rouge">list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
<div class="bd-example">
<ul class="list-unstyled">
@@ -796,7 +800,7 @@
<h3 id="inline">Inline</h3>
<p>Remove a list’s bullets and apply some light <code class="highlighter-rouge">margin</code> with a combination of two classes, <code class="highlighter-rouge">.list-inline</code> and <code class="highlighter-rouge">.list-inline-item</code>.</p>
<p>Remove a list’s bullets and apply some light <code class="language-plaintext highlighter-rouge">margin</code> with a combination of two classes, <code class="language-plaintext highlighter-rouge">.list-inline</code> and <code class="language-plaintext highlighter-rouge">.list-inline-item</code>.</p>
<div class="bd-example">
<ul class="list-inline">
@@ -813,7 +817,7 @@
<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 class="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code class="language-plaintext highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
<div class="bd-example">
<dl class="row">
@@ -868,15 +872,15 @@
<h2 id="responsive-font-sizes">Responsive font sizes</h2>
<p>Bootstrap v4.3 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 class="highlighter-rouge">$enable-responsive-font-sizes</code> Sass variable to <code class="highlighter-rouge">true</code> and recompiling Bootstrap.</p>
<p>Bootstrap v4.3 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 class="language-plaintext highlighter-rouge">$enable-responsive-font-sizes</code> Sass variable to <code class="language-plaintext highlighter-rouge">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 class="highlighter-rouge">font-size</code> properties. Responsive font sizes will be compiled into <code class="highlighter-rouge">calc()</code> functions with a mix of <code class="highlighter-rouge">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>
<p>To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal <code class="language-plaintext highlighter-rouge">font-size</code> properties. Responsive font sizes will be compiled into <code class="language-plaintext highlighter-rouge">calc()</code> functions with a mix of <code class="language-plaintext highlighter-rouge">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.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
</body>
</html>