<!DOCTYPE html><htmllang="en"data-bs-theme="auto"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="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."><metaname="author"content="Mark Otto, Jacob Thornton, and Bootstrap contributors"><metaname="generator"content="Astro v5.4.2"><metaname="docsearch:language"content="en"><metaname="docsearch:version"content="5.3"><linkrel="canonical"href="https://getbootstrap.com/docs/5.3/content/reboot/"><linkrel="preconnect"href="https://AK7KMZKZHQ-dsn.algolia.net"crossorigin><title>Reboot · Bootstrap v5.3</title><scriptsrc="/docs/5.3/assets/js/color-modes.js"></script><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"><linkhref="/docs/5.3/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"><linkrel="apple-touch-icon"href="/docs/5.3/assets/img/favicons/apple-touch-icon.png"sizes="180x180"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon-32x32.png"sizes="32x32"type="image/png"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon-16x16.png"sizes="16x16"type="image/png"><linkrel="manifest"href="/docs/5.3/assets/img/favicons/manifest.json"><linkrel="mask-icon"href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg"color="#712cf9"><linkrel="icon"href="/docs/5.3/assets/img/favicons/favicon.ico"><metaname="theme-color"content="#712cf9"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:site"content="getbootstrap"><metaname="twitter:creator"content="getbootstrap"><metaname="twitter:title"content="Reboot"><metaname="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."><metaname="twitter:image"content="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-social.png"><metaproperty="og:url"content="https://getbootstrap.com/docs/5.3/content/reboot/"><metaproperty="og:title"content="Reboot"><metaproperty="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."><metaproperty="og:type"content="article"><metaproperty="og:image"content="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-social.png"><metaproperty="og:image:type"content="image/png"><metaproperty="og:image:width"content="2000"><metaproperty="og:image:height"content="1000"><scriptdefersrc="https://cdn.usefathom.com/script.js"data-site="ITUSEYJG"></script><linkrel="stylesheet"href="/_astro/_slug_.BBRoHHoO.css"></head><bodytabindex="0"data-bs-spy="scroll"data-bs-target="#TableOfContents"><divclass="skippy visually-hidden-focusable overflow-hidden"><divclass="container-xl"><aclass="d-inline-flex p-2 m-1"href="#content">Skip to main content</a><aclass="d-none d-md-inline-flex p-2 m-1"href="#bd-docs-nav">
</a></div><h1class="bd-title mb-0"id="content">Reboot</h1></div><pclass="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><scriptasyncsrc="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom"id="_carbonads_js"></script></div><divclass="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary"><buttonclass="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none"type="button"data-bs-toggle="collapse"data-bs-target="#tocContents"aria-expanded="false"aria-controls="tocContents">
On this page
<svgclass="bi d-md-none ms-2"aria-hidden="true"><usexlink:href="#chevron-expand"></use></svg></button><strongclass="d-none d-md-block h6 my-2 ms-3">On this page</strong><hrclass="d-none d-md-block my-2 ms-3"><divclass="collapse bd-toc-collapse"id="tocContents"><navid="TableOfContents"><ul><li><ahref="#approach">Approach</a></li><li><ahref="#css-variables">CSS variables</a></li><li><ahref="#page-defaults">Page defaults</a></li><li><ahref="#native-font-stack">Native font stack</a></li><li><ahref="#headings">Headings</a></li><li><ahref="#paragraphs">Paragraphs</a></li><li><ahref="#links">Links</a></li><li><ahref="#horizontal-rules">Horizontal rules</a></li><li><ahref="#lists">Lists</a></li><li><ahref="#inline-code">Inline code</a></li><li><ahref="#code-blocks">Code blocks</a></li><li><ahref="#variables">Variables</a></li><li><ahref="#user-input">User input</a></li><li><ahref="#sample-output">Sample output</a></li><li><ahref="#tables">Tables</a></li><li><ahref="#forms">Forms</a></li><ul><li><ahref="#pointers-on-buttons">Pointers on buttons</a></li></ul><li><ahref="#misc-elements">Misc elements</a></li><ul><li><ahref="#address">Address</a></li><li><ahref="#blockquote">Blockquote</a></li><li><ahref="#inline-elements">Inline elements</a></li><li><ahref="#summary">Summary</a></li></ul><li><ahref="#html5-hidden-attribute">HTML5 [hidden] attribute</a></li></ul></nav></div></div><divclass="bd-content ps-lg-2"><h2id="approach">Approach<aclass="anchor-link"href="#approach"></a></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>
<p>With v5.1.1, we standardized our required <code>@import</code>s across all our CSS bundles (including <code>bootstrap.css</code>, <code>bootstrap-reboot.css</code>, and <code>bootstrap-grid.css</code>) to include <code>_root.scss</code>. This adds <code>:root</code> level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more <ahref="/docs/5.3/customize/css-variables">CSS variables</a> added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. <strong>This is still in-progress and will take time to fully implement.</strong></p>
<p>For example, consider these <code>:root</code> CSS variables for common <code><body></code> styles:</p>
<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.
<ul>
<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. This browser default can be overridden by modifying the <code>$font-size-root</code> variable.</li>
</ul>
</li>
<li>The <code><body></code> also sets a global <code>font-family</code>, <code>font-weight</code>, <code>line-height</code>, and <code>color</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>
<h2id="native-font-stack">Native font stack<aclass="anchor-link"href="#native-font-stack"></a></h2>
<p>Bootstrap utilizes a "native font stack" or "system font stack" for optimum text rendering on every device and OS. These system fonts have been designed specifically with today's devices in mind, with improved rendering on screens, variable font support, and more. Read more about <ahref="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stacks in this <em>Smashing Magazine</em> article</a>.</p>
<spanclass="token comment">// Basic web fallback</span>
Arial<spanclass="token punctuation">,</span>
<spanclass="token comment">// Sans serif fallback</span>
sans-serif<spanclass="token punctuation">,</span>
<spanclass="token comment">// Emoji fonts</span>
<spanclass="token string">"Apple Color Emoji"</span><spanclass="token punctuation">,</span><spanclass="token string">"Segoe UI Emoji"</span><spanclass="token punctuation">,</span><spanclass="token string">"Segoe UI Symbol"</span><spanclass="token punctuation">,</span><spanclass="token string">"Noto Color Emoji"</span><spanclass="token statement keyword">!default</span><spanclass="token punctuation">;</span>
</code></pre></div></div>
<p>Note that because the font stack includes emoji fonts, many common symbol/dingbat Unicode characters will be rendered as multicolored 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>
<p>All heading elements—<code><h1></code>—<code><h6></code> have their <code>margin-top</code> removed, <code>margin-bottom: .5rem</code> set, and <code>line-height</code> tightened. While headings inherit their <code>color</code> by default, you can also override it via optional CSS variable, <code>--bs-heading-color</code>.</p>
<divclass="bd-example-snippet bd-code-snippet"><divclass="bd-example m-0 border-0"><p>This is an example paragraph.</p></div><divclass="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"><smallclass="font-monospace text-body-secondary text-uppercase">html</small><divclass="d-flex ms-auto"><buttontype="button"class="btn-edit text-nowrap"title="Try it on StackBlitz"><svgclass="bi"aria-hidden="true"><usexlink:href="#lightning-charge-fill"></use></svg></button><buttontype="button"class="btn-clipboard mt-0 me-0"title="Copy to clipboard"><svgclass="bi"aria-hidden="true"><usexlink:href="#clipboard"></use></svg></button></div></div><divclass="highlight"><preclass="language-html"><codeclass="language-html"><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>p</span><spanclass="token punctuation">></span></span>This is an example paragraph.<spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"></</span>p</span><spanclass="token punctuation">></span></span></code></pre></div></div>
<p>Links have a default <code>color</code> and underline applied. While links change on <code>:hover</code>, they don't change based on whether someone <code>:visited</code> the link. They also receive no special <code>:focus</code> styles.</p>
<divclass="bd-example-snippet bd-code-snippet"><divclass="bd-example m-0 border-0"><ahref="#">This is an example link</a></div><divclass="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"><smallclass="font-monospace text-body-secondary text-uppercase">html</small><divclass="d-flex ms-auto"><buttontype="button"class="btn-edit text-nowrap"title="Try it on StackBlitz"><svgclass="bi"aria-hidden="true"><usexlink:href="#lightning-charge-fill"></use></svg></button><buttontype="button"class="btn-clipboard mt-0 me-0"title="Copy to clipboard"><svgclass="bi"aria-hidden="true"><usexlink:href="#clipboard"></use></svg></button></div></div><divclass="highlight"><preclass="language-html"><codeclass="language-html"><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>a</span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>#<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>This is an example link<spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"></</span>a</span><spanclass="token punctuation">></span></span></code></pre></div></div>
<p>As of v5.3.x, link <code>color</code> is set using <code>rgba()</code> and new <code>-rgb</code> CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the <code>--bs-link-opacity</code> CSS variable:</p>
<p>Placeholder links—those without an <code>href</code>—are targeted with a more specific selector and have their <code>color</code> and <code>text-decoration</code> reset to their default values.</p>
<p>The <code><hr></code> element has been simplified. Similar to browser defaults, <code><hr></code>s are styled via <code>border-top</code>, have a default <code>opacity: .25</code>, and automatically inherit their <code>border-color</code> via <code>color</code>, including when <code>color</code> is set via the parent. They can be modified with text, border, and opacity utilities.</p>
<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>. We've also reset the <code>padding-left</code> on <code><ul></code> and <code><ol></code> elements.</p>
<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>
<divclass="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>
<divclass="bd-example-snippet bd-code-snippet"><divclass="bd-example m-0 border-0"> For example, <code><section></code> should be wrapped as inline. </div><divclass="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"><smallclass="font-monospace text-body-secondary text-uppercase">html</small><divclass="d-flex ms-auto"><buttontype="button"class="btn-edit text-nowrap"title="Try it on StackBlitz"><svgclass="bi"aria-hidden="true"><usexlink:href="#lightning-charge-fill"></use></svg></button><buttontype="button"class="btn-clipboard mt-0 me-0"title="Copy to clipboard"><svgclass="bi"aria-hidden="true"><usexlink:href="#clipboard"></use></svg></button></div></div><divclass="highlight"><preclass="language-html"><codeclass="language-html">For example, <spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>code</span><spanclass="token punctuation">></span></span><spanclass="token entity named-entity"title="<">&lt;</span>section<spanclass="token entity named-entity"title=">">&gt;</span><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"></</span>code</span><spanclass="token punctuation">></span></span> should be wrapped as inline.</code></pre></div></div>
<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. 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>
</code></pre></div><divclass="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"><smallclass="font-monospace text-body-secondary text-uppercase">html</small><divclass="d-flex ms-auto"><buttontype="button"class="btn-edit text-nowrap"title="Try it on StackBlitz"><svgclass="bi"aria-hidden="true"><usexlink:href="#lightning-charge-fill"></use></svg></button><buttontype="button"class="btn-clipboard mt-0 me-0"title="Copy to clipboard"><svgclass="bi"aria-hidden="true"><usexlink:href="#clipboard"></use></svg></button></div></div><divclass="highlight"><preclass="language-html"><codeclass="language-html"><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>pre</span><spanclass="token punctuation">></span></span><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>code</span><spanclass="token punctuation">></span></span><spanclass="token entity named-entity"title="<">&lt;</span>p<spanclass="token entity named-entity"title=">">&gt;</span>Sample text here...<spanclass="token entity named-entity"title="<">&lt;</span>/p<spanclass="token entity named-entity"title=">">&gt;</span>
<spanclass="token entity named-entity"title="<">&lt;</span>p<spanclass="token entity named-entity"title=">">&gt;</span>And another line of sample text here...<spanclass="token entity named-entity"title="<">&lt;</span>/p<spanclass="token entity named-entity"title=">">&gt;</span>
<divclass="bd-example-snippet bd-code-snippet"><divclass="bd-example m-0 border-0"> 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><divclass="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"><smallclass="font-monospace text-body-secondary text-uppercase">html</small><divclass="d-flex ms-auto"><buttontype="button"class="btn-edit text-nowrap"title="Try it on StackBlitz"><svgclass="bi"aria-hidden="true"><usexlink:href="#lightning-charge-fill"></use></svg></button><buttontype="button"class="btn-clipboard mt-0 me-0"title="Copy to clipboard"><svgclass="bi"aria-hidden="true"><usexlink:href="#clipboard"></use></svg></button></div></div><divclass="highlight"><preclass="language-html"><codeclass="language-html">To switch directories, type <spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>kbd</span><spanclass="token punctuation">></span></span>cd<spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"></</span>kbd</span><spanclass="token punctuation">></span></span> followed by the name of the directory.<spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>br</span><spanclass="token punctuation">/></span></span>
<divclass="bd-example-snippet bd-code-snippet"><divclass="bd-example m-0 border-0"><samp>This text is meant to be treated as sample output from a computer program.</samp></div><divclass="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"><smallclass="font-monospace text-body-secondary text-uppercase">html</small><divclass="d-flex ms-auto"><buttontype="button"class="btn-edit text-nowrap"title="Try it on StackBlitz"><svgclass="bi"aria-hidden="true"><usexlink:href="#lightning-charge-fill"></use></svg></button><buttontype="button"class="btn-clipboard mt-0 me-0"title="Copy to clipboard"><svgclass="bi"aria-hidden="true"><usexlink:href="#clipboard"></use></svg></button></div></div><divclass="highlight"><preclass="language-html"><codeclass="language-html"><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>samp</span><spanclass="token punctuation">></span></span>This text is meant to be treated as sample output from a computer program.<spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"></</span>samp</span><spanclass="token punctuation">></span></span></code></pre></div></div>
<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 <ahref="/docs/5.3/content/tables">the <code>.table</code> class</a>.</p>
<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><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>
<divclass="bd-callout bd-callout-warning"><p>Some date inputs types are <ahref="https://caniuse.com/input-datetime">not fully supported</a> by the latest versions of Safari and Firefox.</p></div>
<formclass="bd-example"><fieldset><legend>Example legend</legend><p><labelfor="input">Example input</label><inputtype="text"id="input"placeholder="Example input"/></p><p><labelfor="email">Example email</label><inputtype="email"id="email"placeholder="test@example.com"/></p><p><labelfor="tel">Example telephone</label><inputtype="tel"id="tel"/></p><p><labelfor="url">Example url</label><inputtype="url"id="url"/></p><p><labelfor="number">Example number</label><inputtype="number"id="number"/></p><p><labelfor="search">Example search</label><inputtype="search"id="search"/></p><p><labelfor="range">Example range</label><inputtype="range"id="range"min="0"max="10"/></p><p><labelfor="file">Example file input</label><inputtype="file"id="file"/></p><p><labelfor="select">Example select</label><selectid="select"><optionvalue>Choose...</option><optgrouplabel="Option group 1"><optionvalue>Option 1</option><optionvalue>Option 2</option><optionvalue>Option 3</option></optgroup><optgrouplabel="Option group 2"><optionvalue>Option 4</option><optionvalue>Option 5</option><optionvalue>Option 6</option></optgroup></select></p><p><label><inputtype="checkbox"value/><p>Check this checkbox</p></label></p><p><label><inputtype="radio"name="optionsRadios"id="optionsRadios1"value="option1"checked/><p>Option one is this and that</p></label><label><inputtype="radio"name="optionsRadios"id="optionsRadios2"value="option2"/><p>Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.</p></label><label><inputtype="radio"name="optionsRadios"id="optionsRadios3"value="option3"disabled/><p>Option three is disabled</p></label></p><p><labelfor="textarea">Example textarea</label><textareaid="textarea"rows="3"></textarea></p><p><labelfor="date">Example date</label><inputtype="date"id="date"/></p><p><labelfor="time">Example time</label><inputtype="time"id="time"/></p><p><labelfor="password">Example password</label><inputtype="password"id="password"/></p><p><labelfor="datetime-local">Example datetime-local</label><inputtype="datetime-local"id="datetime-local"/></p><p><labelfor="week">Example week</label><inputtype="week"id="week"/></p><p><labelfor="month">Example month</label><inputtype="month"id="month"/></p><p><labelfor="color">Example color</label><inputtype="color"id="color"/></p><p><labelfor="output">Example output</label><outputname="result"id="output">100</output></p><p><buttontype="submit">Button submit</button><inputtype="submit"value="Input submit button"/><inputtype="reset"value="Input reset button"/><inputtype="button"value="Input button"/></p><p><buttontype="submit"disabled>Button submit</button><inputtype="submit"value="Input submit button"disabled/><inputtype="reset"value="Input reset button"disabled/><inputtype="button"value="Input button"disabled/></p></fieldset></form>
<h3id="pointers-on-buttons">Pointers on buttons<aclass="anchor-link"href="#pointers-on-buttons"></a></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>
<divclass="bd-example-snippet bd-code-snippet"><divclass="bd-example m-0 border-0"><spanrole="button"tabindex="0">Non-button element button</span></div><divclass="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"><smallclass="font-monospace text-body-secondary text-uppercase">html</small><divclass="d-flex ms-auto"><buttontype="button"class="btn-edit text-nowrap"title="Try it on StackBlitz"><svgclass="bi"aria-hidden="true"><usexlink:href="#lightning-charge-fill"></use></svg></button><buttontype="button"class="btn-clipboard mt-0 me-0"title="Copy to clipboard"><svgclass="bi"aria-hidden="true"><usexlink:href="#clipboard"></use></svg></button></div></div><divclass="highlight"><preclass="language-html"><codeclass="language-html"><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>span</span><spanclass="token attr-name">role</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>button<spanclass="token punctuation">"</span></span><spanclass="token attr-name">tabindex</span><spanclass="token attr-value"><spanclass="token punctuation attr-equals">=</span><spanclass="token punctuation">"</span>0<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>Non-button element button<spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"></</span>span</span><spanclass="token punctuation">></span></span></code></pre></div></div>
<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>
<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>
<divclass="bd-example"><blockquoteclass="blockquote"><p>A well-known quote, contained in a blockquote element.</p></blockquote><p>Someone famous in <citetitle="Source Title">Source Title</cite></p></div>
<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>
<divclass="bd-example"><details><summary>Some details</summary><p>More info about the details.</p></details><detailsopen><summary>Even more details</summary><p>Here are even more details about the details.</p></details></div>
<p>HTML5 adds <ahref="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 <ahref="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.</p>
<divclass="bd-callout bd-callout-info"><p>Since <code>[hidden]</code> is not compatible with jQuery's <code>$(...).hide()</code> and <code>$(...).show()</code> methods, we don't specifically endorse <code>[hidden]</code> over other techniques for managing the <code>display</code> of elements.</p></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 <ahref="/docs/5.3/utilities/visibility">the <code>.invisible</code> class</a> instead.</p></div></main></div><scriptsrc="/docs/5.3/dist/js/bootstrap.bundle.min.js"integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"></script><scripttype="module"src="/_astro/Scripts.astro_astro_type_script_index_0_lang.lFiTneBv.js"></script><scripttype="module"src="/_astro/Scripts.astro_astro_type_script_index_1_lang.CAqD2hc_.js"></script><scripttype="module">constp=()=>{constt=document.querySelector(".bd-sidebar"),a=document.querySelector(".bd-links-nav .active");if(!t||!a)return;constc=t.clientHeight,i=a.offsetTop,r=a.clientHeight,n=i,s=n-c+r;(t.scrollTop>n||t.scrollTop<s)&&(t.scrollTop=n-c/2+r/2)},v=()=>{document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(e=>{newbootstrap.Tooltip(e)}),document.querySelectorAll('[data-bs-toggle="popover"]').forEach(e=>{newbootstrap.Popover(e)});constt=document.getElementById("toastPlacement");t&&document.getElementById("selectToastPlacement").addEventListener("change",function(){t.dataset.originalClass||(t.dataset.originalClass=t.className),t.className=`${t.dataset.originalClass}${this.value}`}),document.querySelectorAll(".bd-example .toast").forEach(e=>{newbootstrap.Toast(e,{autohide:!1}).show()});consta=document.getElementById("liveToastBtn"),c=document.getElementById("liveToast");if(a){conste=bootstrap.Toast.getOrCreateInstance(c);a.addEventListener("click",()=>{e.show()})}consti=document.getElementById("liveAlertPlaceholder"),r=(e,o)=>{constl=document.createElement("div");l.innerHTML=[`<div class="alert alert-${o} alert-dismissible" role="alert">`,` <div>${e}</div>`,' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',"</div>"].join(""),i.append(l)},n=document.getElementById("liveAlertBtn");n&&n.addEventListener("click",()=>{r("Nice, you triggered this alert message!","success")}),document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])').forEach(e=>{bootstrap.Carousel.getOrCreateInstance(e)}),document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]').forEach(e=>{e.id.includes("Indeterminate")&&(e.indeterminate=!0)}),document.querySelectorAll('.bd-content [href="#"]').forEach(e=>{e.addEventListener("click",o=>{o.preventDefault()})});consts=document.getElementById("exampleModal");s&&s.addEventListener("show.bs.modal",e=>{constl=e.relatedTarget.getAttribute("data-bs-whatever"),m=s.querySelector(".modal-title"),u=s.querySelector(".modal-body input");m.textContent=`New message to ${l}`,u.value=l});constd=document.querySelectorAll(".bd-example-offcanvas .offcanvas");d&&d.forEach(e=>{e.addEventListener("show.bs.offcanvas",o=>{o.preventDefault()},!1)})};p();v();</script><footerclass="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary"><divclass="container py-4 py-md-5 px-4 px-md-3 text-body-secondary"><divclass="row"><divclass="col-lg-3 mb-3"><aclass="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none"href="/"aria-label="Bootstrap"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 118 94"role="img"class="d-block me-2"height="32"width="40"><title>Bootstrap</title><pathfill-rule="evenodd"clip-rule="evenodd"d="M24.5090c-6.7330-11.7155.893-11.49212.284.2146.14-.06414.092-2.06620.577C8.94339.3655.54743.485044.014v5.972c5.547.5298.9434.64910.95111.1532.0026.4852.2814.4372.06620.577C12.79488.10617.7769424.5194H93.5c6.733011.714-5.89311.491-12.284-.214-6.14.064-14.0922.066-20.5772.009-6.5045.396-10.62410.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.2145.894100.233093.50H24.508zM8057.863C8066.66373.4367262.54372H44a22001-2-2V24a220012-2h18.437c9.083015.0444.9215.04412.47405.302-4.0110.049-9.11910.88v.277C75.31746.3948051.218057.863zM60.52128.34H49.948
Designed and built with all the love in the world by the <ahref="/docs/5.3/about/team">Bootstrap team</a> with the help of <ahref="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.
</li><liclass="mb-2">
Code licensed <ahref="https://github.com/twbs/bootstrap/blob/main/LICENSE"target="_blank"rel="license noopener">MIT</a>, docs <ahref="https://creativecommons.org/licenses/by/3.0/"target="_blank"rel="license noopener">CC BY 3.0</a>.
