mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-12 12:29:22 +01:00
332 lines
111 KiB
HTML
332 lines
111 KiB
HTML
<!DOCTYPE html><html lang="en" data-bs-theme="auto"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><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="Astro v5.4.2"><meta name="docsearch:language" content="en"><meta name="docsearch:version" content="5.3"><link rel="canonical" href="https://getbootstrap.com/docs/5.3/content/reboot/"><link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin><title>Reboot · Bootstrap v5.3</title><script src="/docs/5.3/assets/js/color-modes.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"><link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"><link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180"><link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"><link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"><link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json"><link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9"><link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico"><meta name="theme-color" content="#712cf9"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="getbootstrap"><meta name="twitter:creator" content="getbootstrap"><meta name="twitter:title" content="Reboot"><meta name="twitter:description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon."><meta name="twitter:image" content="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-social.png"><meta property="og:url" content="https://getbootstrap.com/docs/5.3/content/reboot/"><meta property="og:title" content="Reboot"><meta property="og:description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon."><meta property="og:type" content="article"><meta property="og:image" content="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-social.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="2000"><meta property="og:image:height" content="1000"><script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script><link rel="stylesheet" href="/_astro/_slug_.BBRoHHoO.css"></head> <body tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents"> <div class="skippy visually-hidden-focusable overflow-hidden"> <div class="container-xl"> <a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a> <a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">
|
|
Skip to docs navigation
|
|
</a> </div> </div> <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> <symbol id="arrow-right" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path> </symbol> <symbol id="arrow-right-short" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"></path> </symbol> <symbol id="book-half" viewBox="0 0 16 16"> <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"></path> </symbol> <symbol id="box-seam" viewBox="0 0 16 16"> <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"></path> </symbol> <symbol id="braces" viewBox="0 0 16 16"> <path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"></path> </symbol> <symbol id="braces-asterisk" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"></path> </symbol> <symbol id="check2" viewBox="0 0 16 16"> <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path> </symbol> <symbol id="chevron-expand" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"></path> </symbol> <symbol id="circle-half" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path> </symbol> <symbol id="clipboard" viewBox="0 0 16 16"> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path> <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path> </symbol> <symbol id="code" viewBox="0 0 16 16"> <path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"></path> </symbol> <symbol id="file-earmark-richtext" viewBox="0 0 16 16"> <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"></path> <path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"></path> </symbol> <symbol id="globe2" viewBox="0 0 16 16"> <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"></path> </symbol> <symbol id="grid-fill" viewBox="0 0 16 16"> <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"></path> </symbol> <symbol id="lightning-charge-fill" viewBox="0 0 16 16"> <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"></path> </symbol> <symbol id="list" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"></path> </symbol> <symbol id="magic" viewBox="0 0 16 16"> <path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"></path> </symbol> <symbol id="menu-button-wide-fill" viewBox="0 0 16 16"> <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"></path> </symbol> <symbol id="moon-stars-fill" viewBox="0 0 16 16"> <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"></path> <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"></path> </symbol> <symbol id="palette2" viewBox="0 0 16 16"> <path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"></path> <path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"></path> </symbol> <symbol id="plugin" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"></path> </symbol> <symbol id="plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path> </symbol> <symbol id="sun-fill" viewBox="0 0 16 16"> <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path> </symbol> <symbol id="three-dots" viewBox="0 0 16 16"> <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path> </symbol> <symbol id="tools" viewBox="0 0 16 16"> <path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"></path> </symbol> <symbol id="ui-radios" viewBox="0 0 16 16"> <path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path> </symbol> </svg> <header class="navbar navbar-expand-lg bd-navbar sticky-top"> <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation"> <div class="bd-navbar-toggle"> <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" class="bi" height="24" width="24" aria-hidden="true"> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"></path> </svg> <span class="d-none fs-6 pe-1">Browse</span> </button> </div> <a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118 94" role="img" class="d-block my-1" height="32" width="40"> <title>Bootstrap</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.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.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path> </svg> </a> <div class="d-flex"> <div class="bd-search" id="docsearch" data-bd-docs-version="5.3"></div> <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation"> <svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg> </button> </div> <div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel"> <div class="offcanvas-header px-4 pb-0"> <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button> </div> <div class="offcanvas-body p-4 pt-0 p-lg-0"> <hr class="d-lg-none text-white-50"> <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav"> <li class="nav-item col-6 col-lg-auto"> <a aria-current="true" class="nav-link py-2 px-0 px-lg-2 active" href="/docs/5.3/getting-started/introduction/">
|
|
Docs
|
|
</a> </li> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.3/examples/"> Examples </a> </li> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" target="_blank" rel="noopener"> Icons </a> </li> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" target="_blank" rel="noopener"> Themes </a> </li> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" target="_blank" rel="noopener"> Blog </a> </li> </ul> <hr class="d-lg-none text-white-50"> <ul class="navbar-nav flex-row flex-wrap ms-md-auto"> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2 nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 499.36" role="img" class="navbar-nav-svg" height="16" width="16"> <title>GitHub</title> <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path> </svg> <small class="d-lg-none ms-2">GitHub</small> </a> </li> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2 nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 416.32" role="img" class="navbar-nav-svg" height="16" width="16"> <title>Twitter</title> <path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"></path> </svg> <small class="d-lg-none ms-2">Twitter</small> </a> </li> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2 nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" viewBox="0 0 40 41" role="img" class="navbar-nav-svg" height="16" width="16"> <title>Open Collective</title> <path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"></path> <path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"></path> </svg> <small class="d-lg-none ms-2">Open Collective</small> </a> </li> <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto"> <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div> <hr class="d-lg-none my-2 text-white-50"> </li> <li class="nav-item dropdown"> <button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static"> <span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.3 <span class="visually-hidden">(switch to other versions)</span> </button> <ul class="dropdown-menu dropdown-menu-end"> <li><h6 class="dropdown-header">v5 releases</h6></li> <li> <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="/docs/5.3/content/reboot/">
|
|
Latest (5.3.x)
|
|
<svg class="bi" aria-hidden="true"><use xlink:href="#check2"></use></svg> </a> </li> <li> <a class="dropdown-item" href="https://getbootstrap.com/docs/5.2/content/reboot/">
|
|
v5.2.3
|
|
</a> </li> <li> <a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/content/reboot/">
|
|
v5.1.3
|
|
</a> </li> <li> <a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/content/reboot/">
|
|
v5.0.2
|
|
</a> </li> <li><hr class="dropdown-divider"></li> <li><h6 class="dropdown-header">Previous releases</h6></li> <li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li> <li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li> <li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="/docs/versions/">All versions</a></li> </ul> </li> <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto"> <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div> <hr class="d-lg-none my-2 text-white-50"> </li> <li class="nav-item dropdown"> <button class="btn btn-link nav-link px-0 px-lg-2 py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)"> <svg class="bi my-1 theme-icon-active" aria-hidden="true"><use href="#circle-half"></use></svg> <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span> </button> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text"> <li> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#sun-fill"></use></svg>
|
|
Light
|
|
<svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg> </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
|
|
Dark
|
|
<svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg> </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#circle-half"></use></svg>
|
|
Auto
|
|
<svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg> </button> </li> </ul> </li> </ul> </div> </div> </nav> </header> <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout"> <aside class="bd-sidebar"> <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel"> <div class="offcanvas-header border-bottom"> <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button> </div> <div class="offcanvas-body"> <nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation"> <ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2"> <li class="bd-links-group py-2"> <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold"> <svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"> <use xlink:href="#book-half"></use> </svg> Getting started </strong> <ul class="list-unstyled fw-normal pb-2 small"> <li> <a href="/docs/5.3/getting-started/introduction" class="bd-links-link d-inline-block rounded"> Introduction </a> </li><li> <a href="/docs/5.3/getting-started/download" class="bd-links-link d-inline-block rounded"> Download </a> </li><li> <a href="/docs/5.3/getting-started/contents" class="bd-links-link d-inline-block rounded"> Contents </a> </li><li> <a href="/docs/5.3/getting-started/browsers-devices" class="bd-links-link d-inline-block rounded"> Browsers & devices </a> </li><li> <a href="/docs/5.3/getting-started/javascript" class="bd-links-link d-inline-block rounded"> JavaScript </a> </li><li> <a href="/docs/5.3/getting-started/webpack" class="bd-links-link d-inline-block rounded"> Webpack </a> </li><li> <a href="/docs/5.3/getting-started/parcel" class="bd-links-link d-inline-block rounded"> Parcel </a> </li><li> <a href="/docs/5.3/getting-started/vite" class="bd-links-link d-inline-block rounded"> Vite </a> </li><li> <a href="/docs/5.3/getting-started/accessibility" class="bd-links-link d-inline-block rounded"> Accessibility </a> </li><li> <a href="/docs/5.3/getting-started/rfs" class="bd-links-link d-inline-block rounded"> RFS </a> </li><li> <a href="/docs/5.3/getting-started/rtl" class="bd-links-link d-inline-block rounded"> RTL </a> </li><li> <a href="/docs/5.3/getting-started/contribute" class="bd-links-link d-inline-block rounded"> Contribute </a> </li> </ul> </li><li class="bd-links-group py-2"> <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold"> <svg class="bi me-2" style="color: var(--bs-pink);" aria-hidden="true"> <use xlink:href="#palette2"></use> </svg> Customize </strong> <ul class="list-unstyled fw-normal pb-2 small"> <li> <a href="/docs/5.3/customize/overview" class="bd-links-link d-inline-block rounded"> Overview </a> </li><li> <a href="/docs/5.3/customize/sass" class="bd-links-link d-inline-block rounded"> Sass </a> </li><li> <a href="/docs/5.3/customize/options" class="bd-links-link d-inline-block rounded"> Options </a> </li><li> <a href="/docs/5.3/customize/color" class="bd-links-link d-inline-block rounded"> Color </a> </li><li> <a href="/docs/5.3/customize/color-modes" class="bd-links-link d-inline-block rounded"> Color modes </a> </li><li> <a href="/docs/5.3/customize/components" class="bd-links-link d-inline-block rounded"> Components </a> </li><li> <a href="/docs/5.3/customize/css-variables" class="bd-links-link d-inline-block rounded"> CSS variables </a> </li><li> <a href="/docs/5.3/customize/optimize" class="bd-links-link d-inline-block rounded"> Optimize </a> </li> </ul> </li><li class="bd-links-group py-2"> <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold"> <svg class="bi me-2" style="color: var(--bs-teal);" aria-hidden="true"> <use xlink:href="#grid-fill"></use> </svg> Layout </strong> <ul class="list-unstyled fw-normal pb-2 small"> <li> <a href="/docs/5.3/layout/breakpoints" class="bd-links-link d-inline-block rounded"> Breakpoints </a> </li><li> <a href="/docs/5.3/layout/containers" class="bd-links-link d-inline-block rounded"> Containers </a> </li><li> <a href="/docs/5.3/layout/grid" class="bd-links-link d-inline-block rounded"> Grid </a> </li><li> <a href="/docs/5.3/layout/columns" class="bd-links-link d-inline-block rounded"> Columns </a> </li><li> <a href="/docs/5.3/layout/gutters" class="bd-links-link d-inline-block rounded"> Gutters </a> </li><li> <a href="/docs/5.3/layout/utilities" class="bd-links-link d-inline-block rounded"> Utilities </a> </li><li> <a href="/docs/5.3/layout/z-index" class="bd-links-link d-inline-block rounded"> Z-index </a> </li><li> <a href="/docs/5.3/layout/css-grid" class="bd-links-link d-inline-block rounded"> CSS Grid </a> </li> </ul> </li><li class="bd-links-group py-2"> <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold"> <svg class="bi me-2" style="color: var(--bs-gray);" aria-hidden="true"> <use xlink:href="#file-earmark-richtext"></use> </svg> Content </strong> <ul class="list-unstyled fw-normal pb-2 small"> <li> <a href="/docs/5.3/content/reboot" class="bd-links-link d-inline-block rounded active" aria-current="page"> Reboot </a> </li><li> <a href="/docs/5.3/content/typography" class="bd-links-link d-inline-block rounded"> Typography </a> </li><li> <a href="/docs/5.3/content/images" class="bd-links-link d-inline-block rounded"> Images </a> </li><li> <a href="/docs/5.3/content/tables" class="bd-links-link d-inline-block rounded"> Tables </a> </li><li> <a href="/docs/5.3/content/figures" class="bd-links-link d-inline-block rounded"> Figures </a> </li> </ul> </li><li class="bd-links-group py-2"> <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold"> <svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"> <use xlink:href="#ui-radios"></use> </svg> Forms </strong> <ul class="list-unstyled fw-normal pb-2 small"> <li> <a href="/docs/5.3/forms/overview" class="bd-links-link d-inline-block rounded"> Overview </a> </li><li> <a href="/docs/5.3/forms/form-control" class="bd-links-link d-inline-block rounded"> Form control </a> </li><li> <a href="/docs/5.3/forms/select" class="bd-links-link d-inline-block rounded"> Select </a> </li><li> <a href="/docs/5.3/forms/checks-radios" class="bd-links-link d-inline-block rounded"> Checks & radios </a> </li><li> <a href="/docs/5.3/forms/range" class="bd-links-link d-inline-block rounded"> Range </a> </li><li> <a href="/docs/5.3/forms/input-group" class="bd-links-link d-inline-block rounded"> Input group </a> </li><li> <a href="/docs/5.3/forms/floating-labels" class="bd-links-link d-inline-block rounded"> Floating labels </a> </li><li> <a href="/docs/5.3/forms/layout" class="bd-links-link d-inline-block rounded"> Layout </a> </li><li> <a href="/docs/5.3/forms/validation" class="bd-links-link d-inline-block rounded"> Validation </a> </li> </ul> </li><li class="bd-links-group py-2"> <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold"> <svg class="bi me-2" style="color: var(--bs-cyan);" aria-hidden="true"> <use xlink:href="#menu-button-wide-fill"></use> </svg> Components </strong> <ul class="list-unstyled fw-normal pb-2 small"> <li> <a href="/docs/5.3/components/accordion" class="bd-links-link d-inline-block rounded"> Accordion </a> </li><li> <a href="/docs/5.3/components/alerts" class="bd-links-link d-inline-block rounded"> Alerts </a> </li><li> <a href="/docs/5.3/components/badge" class="bd-links-link d-inline-block rounded"> Badge </a> </li><li> <a href="/docs/5.3/components/breadcrumb" class="bd-links-link d-inline-block rounded"> Breadcrumb </a> </li><li> <a href="/docs/5.3/components/buttons" class="bd-links-link d-inline-block rounded"> Buttons </a> </li><li> <a href="/docs/5.3/components/button-group" class="bd-links-link d-inline-block rounded"> Button group </a> </li><li> <a href="/docs/5.3/components/card" class="bd-links-link d-inline-block rounded"> Card </a> </li><li> <a href="/docs/5.3/components/carousel" class="bd-links-link d-inline-block rounded"> Carousel </a> </li><li> <a href="/docs/5.3/components/close-button" class="bd-links-link d-inline-block rounded"> Close button </a> </li><li> <a href="/docs/5.3/components/collapse" class="bd-links-link d-inline-block rounded"> Collapse </a> </li><li> <a href="/docs/5.3/components/dropdowns" class="bd-links-link d-inline-block rounded"> Dropdowns </a> </li><li> <a href="/docs/5.3/components/list-group" class="bd-links-link d-inline-block rounded"> List group </a> </li><li> <a href="/docs/5.3/components/modal" class="bd-links-link d-inline-block rounded"> Modal </a> </li><li> <a href="/docs/5.3/components/navbar" class="bd-links-link d-inline-block rounded"> Navbar </a> </li><li> <a href="/docs/5.3/components/navs-tabs" class="bd-links-link d-inline-block rounded"> Navs & tabs </a> </li><li> <a href="/docs/5.3/components/offcanvas" class="bd-links-link d-inline-block rounded"> Offcanvas </a> </li><li> <a href="/docs/5.3/components/pagination" class="bd-links-link d-inline-block rounded"> Pagination </a> </li><li> <a href="/docs/5.3/components/placeholders" class="bd-links-link d-inline-block rounded"> Placeholders </a> </li><li> <a href="/docs/5.3/components/popovers" class="bd-links-link d-inline-block rounded"> Popovers </a> </li><li> <a href="/docs/5.3/components/progress" class="bd-links-link d-inline-block rounded"> Progress </a> </li><li> <a href="/docs/5.3/components/scrollspy" class="bd-links-link d-inline-block rounded"> Scrollspy </a> </li><li> <a href="/docs/5.3/components/spinners" class="bd-links-link d-inline-block rounded"> Spinners </a> </li><li> <a href="/docs/5.3/components/toasts" class="bd-links-link d-inline-block rounded"> Toasts </a> </li><li> <a href="/docs/5.3/components/tooltips" class="bd-links-link d-inline-block rounded"> Tooltips </a> </li> </ul> </li><li class="bd-links-group py-2"> <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold"> <svg class="bi me-2" style="color: var(--bs-orange);" aria-hidden="true"> <use xlink:href="#magic"></use> </svg> Helpers </strong> <ul class="list-unstyled fw-normal pb-2 small"> <li> <a href="/docs/5.3/helpers/clearfix" class="bd-links-link d-inline-block rounded"> Clearfix </a> </li><li> <a href="/docs/5.3/helpers/color-background" class="bd-links-link d-inline-block rounded"> Color & background </a> </li><li> <a href="/docs/5.3/helpers/colored-links" class="bd-links-link d-inline-block rounded"> Colored links </a> </li><li> <a href="/docs/5.3/helpers/focus-ring" class="bd-links-link d-inline-block rounded"> Focus ring </a> </li><li> <a href="/docs/5.3/helpers/icon-link" class="bd-links-link d-inline-block rounded"> Icon link </a> </li><li> <a href="/docs/5.3/helpers/position" class="bd-links-link d-inline-block rounded"> Position </a> </li><li> <a href="/docs/5.3/helpers/ratio" class="bd-links-link d-inline-block rounded"> Ratio </a> </li><li> <a href="/docs/5.3/helpers/stacks" class="bd-links-link d-inline-block rounded"> Stacks </a> </li><li> <a href="/docs/5.3/helpers/stretched-link" class="bd-links-link d-inline-block rounded"> Stretched link </a> </li><li> <a href="/docs/5.3/helpers/text-truncation" class="bd-links-link d-inline-block rounded"> Text truncation </a> </li><li> <a href="/docs/5.3/helpers/vertical-rule" class="bd-links-link d-inline-block rounded"> Vertical rule </a> </li><li> <a href="/docs/5.3/helpers/visually-hidden" class="bd-links-link d-inline-block rounded"> Visually hidden </a> </li> </ul> </li><li class="bd-links-group py-2"> <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold"> <svg class="bi me-2" style="color: var(--bs-red);" aria-hidden="true"> <use xlink:href="#braces-asterisk"></use> </svg> Utilities </strong> <ul class="list-unstyled fw-normal pb-2 small"> <li> <a href="/docs/5.3/utilities/api" class="bd-links-link d-inline-block rounded"> API </a> </li><li> <a href="/docs/5.3/utilities/background" class="bd-links-link d-inline-block rounded"> Background </a> </li><li> <a href="/docs/5.3/utilities/borders" class="bd-links-link d-inline-block rounded"> Borders </a> </li><li> <a href="/docs/5.3/utilities/colors" class="bd-links-link d-inline-block rounded"> Colors </a> </li><li> <a href="/docs/5.3/utilities/display" class="bd-links-link d-inline-block rounded"> Display </a> </li><li> <a href="/docs/5.3/utilities/flex" class="bd-links-link d-inline-block rounded"> Flex </a> </li><li> <a href="/docs/5.3/utilities/float" class="bd-links-link d-inline-block rounded"> Float </a> </li><li> <a href="/docs/5.3/utilities/interactions" class="bd-links-link d-inline-block rounded"> Interactions </a> </li><li> <a href="/docs/5.3/utilities/link" class="bd-links-link d-inline-block rounded"> Link </a> </li><li> <a href="/docs/5.3/utilities/object-fit" class="bd-links-link d-inline-block rounded"> Object fit </a> </li><li> <a href="/docs/5.3/utilities/opacity" class="bd-links-link d-inline-block rounded"> Opacity </a> </li><li> <a href="/docs/5.3/utilities/overflow" class="bd-links-link d-inline-block rounded"> Overflow </a> </li><li> <a href="/docs/5.3/utilities/position" class="bd-links-link d-inline-block rounded"> Position </a> </li><li> <a href="/docs/5.3/utilities/shadows" class="bd-links-link d-inline-block rounded"> Shadows </a> </li><li> <a href="/docs/5.3/utilities/sizing" class="bd-links-link d-inline-block rounded"> Sizing </a> </li><li> <a href="/docs/5.3/utilities/spacing" class="bd-links-link d-inline-block rounded"> Spacing </a> </li><li> <a href="/docs/5.3/utilities/text" class="bd-links-link d-inline-block rounded"> Text </a> </li><li> <a href="/docs/5.3/utilities/vertical-align" class="bd-links-link d-inline-block rounded"> Vertical align </a> </li><li> <a href="/docs/5.3/utilities/visibility" class="bd-links-link d-inline-block rounded"> Visibility </a> </li><li> <a href="/docs/5.3/utilities/z-index" class="bd-links-link d-inline-block rounded"> Z-index </a> </li> </ul> </li><li class="bd-links-group py-2"> <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold"> <svg class="bi me-2" style="color: var(--bs-blue);" aria-hidden="true"> <use xlink:href="#tools"></use> </svg> Extend </strong> <ul class="list-unstyled fw-normal pb-2 small"> <li> <a href="/docs/5.3/extend/approach" class="bd-links-link d-inline-block rounded"> Approach </a> </li><li> <a href="/docs/5.3/extend/icons" class="bd-links-link d-inline-block rounded"> Icons </a> </li> </ul> </li><li class="bd-links-group py-2"> <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold"> <svg class="bi me-2" style="color: var(--bs-indigo);" aria-hidden="true"> <use xlink:href="#globe2"></use> </svg> About </strong> <ul class="list-unstyled fw-normal pb-2 small"> <li> <a href="/docs/5.3/about/overview" class="bd-links-link d-inline-block rounded"> Overview </a> </li><li> <a href="/docs/5.3/about/team" class="bd-links-link d-inline-block rounded"> Team </a> </li><li> <a href="/docs/5.3/about/brand" class="bd-links-link d-inline-block rounded"> Brand </a> </li><li> <a href="/docs/5.3/about/license" class="bd-links-link d-inline-block rounded"> License </a> </li><li> <a href="/docs/5.3/about/translations" class="bd-links-link d-inline-block rounded"> Translations </a> </li> </ul> </li> <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li> <li class="bd-links-span-all"> <a href="/docs/5.3/migration/" class="bd-links-link d-inline-block rounded small"> Migration </a> </li> </ul> </nav> </div> </div> </aside> <main class="bd-main order-1"> <div class="bd-intro pt-2 ps-lg-2"> <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> <div class="mb-3 mb-md-0 d-flex text-nowrap"> <a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.3/site/src/content/content/reboot.mdx" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
|
View on GitHub
|
|
</a> </div> <h1 class="bd-title mb-0" 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> </div> <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary"> <button class="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
|
|
<svg class="bi d-md-none ms-2" aria-hidden="true"> <use xlink:href="#chevron-expand"></use> </svg> </button> <strong class="d-none d-md-block h6 my-2 ms-3">On this page</strong> <hr class="d-none d-md-block my-2 ms-3"> <div class="collapse bd-toc-collapse" id="tocContents"> <nav id="TableOfContents"> <ul> <li> <a href="#approach">Approach</a> </li> <li> <a href="#css-variables">CSS variables</a> </li> <li> <a href="#page-defaults">Page defaults</a> </li> <li> <a href="#native-font-stack">Native font stack</a> </li> <li> <a href="#headings">Headings</a> </li> <li> <a href="#paragraphs">Paragraphs</a> </li> <li> <a href="#links">Links</a> </li> <li> <a href="#horizontal-rules">Horizontal rules</a> </li> <li> <a href="#lists">Lists</a> </li> <li> <a href="#inline-code">Inline code</a> </li> <li> <a href="#code-blocks">Code blocks</a> </li> <li> <a href="#variables">Variables</a> </li> <li> <a href="#user-input">User input</a> </li> <li> <a href="#sample-output">Sample output</a> </li> <li> <a href="#tables">Tables</a> </li> <li> <a href="#forms">Forms</a> </li> <ul> <li> <a href="#pointers-on-buttons">Pointers on buttons</a> </li> </ul> <li> <a href="#misc-elements">Misc elements</a> </li> <ul> <li> <a href="#address">Address</a> </li> <li> <a href="#blockquote">Blockquote</a> </li> <li> <a href="#inline-elements">Inline elements</a> </li> <li> <a href="#summary">Summary</a> </li> </ul> <li> <a href="#html5-hidden-attribute">HTML5 [hidden] attribute</a> </li> </ul> </nav> </div> </div> <div class="bd-content ps-lg-2"> <h2 id="approach">Approach<a class="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>
|
|
</ul>
|
|
<h2 id="css-variables">CSS variables<a class="anchor-link" href="#css-variables"> </a></h2>
|
|
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2">Added in v5.2.0</small>
|
|
<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 <a href="/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>
|
|
<div class="bd-code-snippet bd-example-snippet bd-file-ref"> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom"> <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.3/scss/_root.scss"> scss/_root.scss </a> <div class="d-flex ms-auto"> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg> </button> </div> </div> <div class="highlight"> <pre class="language-scss"><code class="language-scss"> <span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$font-size-root</span> != null </span><span class="token punctuation">{</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>root-font-size</span><span class="token punctuation">:</span> <span class="token variable">#{$font-size-root}</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>body-font-family</span><span class="token punctuation">:</span> #<span class="token punctuation">{</span><span class="token function">inspect</span><span class="token punctuation">(</span><span class="token variable">$font-family-base</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">@include</span> <span class="token function">rfs</span><span class="token punctuation">(</span><span class="token variable">$font-size-base</span><span class="token punctuation">,</span> --<span class="token variable">#{$prefix}</span>body-font-size<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>body-font-weight</span><span class="token punctuation">:</span> <span class="token variable">#{$font-weight-base}</span><span class="token punctuation">;</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>body-line-height</span><span class="token punctuation">:</span> <span class="token variable">#{$line-height-base}</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$body-text-align</span> != null </span><span class="token punctuation">{</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>body-text-align</span><span class="token punctuation">:</span> <span class="token variable">#{$body-text-align}</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>body-color</span><span class="token punctuation">:</span> <span class="token variable">#{$body-color}</span><span class="token punctuation">;</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>body-color-rgb</span><span class="token punctuation">:</span> #<span class="token punctuation">{</span><span class="token function">to-rgb</span><span class="token punctuation">(</span><span class="token variable">$body-color</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>body-bg</span><span class="token punctuation">:</span> <span class="token variable">#{$body-bg}</span><span class="token punctuation">;</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>body-bg-rgb</span><span class="token punctuation">:</span> #<span class="token punctuation">{</span><span class="token function">to-rgb</span><span class="token punctuation">(</span><span class="token variable">$body-bg</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>emphasis-color</span><span class="token punctuation">:</span> <span class="token variable">#{$body-emphasis-color}</span><span class="token punctuation">;</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>emphasis-color-rgb</span><span class="token punctuation">:</span> #<span class="token punctuation">{</span><span class="token function">to-rgb</span><span class="token punctuation">(</span><span class="token variable">$body-emphasis-color</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>secondary-color</span><span class="token punctuation">:</span> <span class="token variable">#{$body-secondary-color}</span><span class="token punctuation">;</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>secondary-color-rgb</span><span class="token punctuation">:</span> #<span class="token punctuation">{</span><span class="token function">to-rgb</span><span class="token punctuation">(</span><span class="token variable">$body-secondary-color</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>secondary-bg</span><span class="token punctuation">:</span> <span class="token variable">#{$body-secondary-bg}</span><span class="token punctuation">;</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>secondary-bg-rgb</span><span class="token punctuation">:</span> #<span class="token punctuation">{</span><span class="token function">to-rgb</span><span class="token punctuation">(</span><span class="token variable">$body-secondary-bg</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>tertiary-color</span><span class="token punctuation">:</span> <span class="token variable">#{$body-tertiary-color}</span><span class="token punctuation">;</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>tertiary-color-rgb</span><span class="token punctuation">:</span> #<span class="token punctuation">{</span><span class="token function">to-rgb</span><span class="token punctuation">(</span><span class="token variable">$body-tertiary-color</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>tertiary-bg</span><span class="token punctuation">:</span> <span class="token variable">#{$body-tertiary-bg}</span><span class="token punctuation">;</span>
|
|
<span class="token property">--<span class="token variable">#{$prefix}</span>tertiary-bg-rgb</span><span class="token punctuation">:</span> #<span class="token punctuation">{</span><span class="token function">to-rgb</span><span class="token punctuation">(</span><span class="token variable">$body-tertiary-bg</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
</code></pre> </div> </div>
|
|
<p>In practice, those variables are then applied in Reboot like so:</p>
|
|
<div class="bd-code-snippet bd-example-snippet bd-file-ref"> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom"> <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.3/scss/_reboot.scss"> scss/_reboot.scss </a> <div class="d-flex ms-auto"> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg> </button> </div> </div> <div class="highlight"> <pre class="language-scss"><code class="language-scss"><span class="token selector">body </span><span class="token punctuation">{</span>
|
|
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token comment">// 1</span>
|
|
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--<span class="token variable">#{$prefix}</span>body-font-family<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">@include</span> <span class="token function">font-size</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--<span class="token variable">#{$prefix}</span>body-font-size<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--<span class="token variable">#{$prefix}</span>body-font-weight<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--<span class="token variable">#{$prefix}</span>body-line-height<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--<span class="token variable">#{$prefix}</span>body-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token property">text-align</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--<span class="token variable">#{$prefix}</span>body-text-align<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--<span class="token variable">#{$prefix}</span>body-bg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2</span>
|
|
<span class="token property">-webkit-text-size-adjust</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token comment">// 3</span>
|
|
<span class="token property">-webkit-tap-highlight-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token variable">$black</span><span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 4</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre> </div> </div>
|
|
<p>Which allows you to make real-time customizations however you like:</p>
|
|
<script type="module" src="/_astro/Code.astro_astro_type_script_index_0_lang.BEd1At9B.js"></script> <div class="bd-code-snippet"> <div class="bd-clipboard"> <button type="button" class="btn-clipboard"> <svg class="bi" role="img" aria-label="Copy"> <use xlink:href="#clipboard"></use> </svg> </button> </div> <div class="highlight"> <pre class="language-html"><code is:raw class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--bs-body-color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
|
<span class="token comment"><!-- ... --></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
|
</code></pre> </div> </div>
|
|
<h2 id="page-defaults">Page defaults<a class="anchor-link" href="#page-defaults"> </a></h2>
|
|
<p>The <code><html></code> and <code><body></code> elements are updated to provide better page-wide defaults. More specifically:</p>
|
|
<ul>
|
|
<li>The <code>box-sizing</code> is globally set on every element—including <code>*::before</code> and <code>*::after</code>, to <code>border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.
|
|
<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>
|
|
<h2 id="native-font-stack">Native font stack<a class="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 <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stacks in this <em>Smashing Magazine</em> article</a>.</p>
|
|
<div class="bd-code-snippet"> <div class="bd-clipboard"> <button type="button" class="btn-clipboard"> <svg class="bi" role="img" aria-label="Copy"> <use xlink:href="#clipboard"></use> </svg> </button> </div> <div class="highlight"> <pre class="language-scss"><code is:raw class="language-scss"><span class="token property"><span class="token variable">$font-family-sans-serif</span></span><span class="token punctuation">:</span>
|
|
<span class="token comment">// Cross-platform generic font family (default user interface font)</span>
|
|
system-ui<span class="token punctuation">,</span>
|
|
<span class="token comment">// Safari for macOS and iOS (San Francisco)</span>
|
|
-apple-system<span class="token punctuation">,</span>
|
|
<span class="token comment">// Windows</span>
|
|
<span class="token string">"Segoe UI"</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Android</span>
|
|
Roboto<span class="token punctuation">,</span>
|
|
<span class="token comment">// older macOS and iOS</span>
|
|
<span class="token string">"Helvetica Neue"</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Linux</span>
|
|
<span class="token string">"Noto Sans"</span><span class="token punctuation">,</span>
|
|
<span class="token string">"Liberation Sans"</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Basic web fallback</span>
|
|
Arial<span class="token punctuation">,</span>
|
|
<span class="token comment">// Sans serif fallback</span>
|
|
sans-serif<span class="token punctuation">,</span>
|
|
<span class="token comment">// Emoji fonts</span>
|
|
<span class="token string">"Apple Color Emoji"</span><span class="token punctuation">,</span> <span class="token string">"Segoe UI Emoji"</span><span class="token punctuation">,</span> <span class="token string">"Segoe UI Symbol"</span><span class="token punctuation">,</span> <span class="token string">"Noto Color Emoji"</span> <span class="token statement keyword">!default</span><span class="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>
|
|
<h2 id="headings">Headings<a class="anchor-link" href="#headings"> </a></h2>
|
|
<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>
|
|
<div class="table-responsive">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table class="table"><thead><tr><th>Heading</th><th>Example</th></tr></thead><tbody><tr><td><code><h1></h1></code></td><td><span class="h1">h1. Bootstrap heading</span></td></tr><tr><td><code><h2></h2></code></td><td><span class="h2">h2. Bootstrap heading</span></td></tr><tr><td><code><h3></h3></code></td><td><span class="h3">h3. Bootstrap heading</span></td></tr><tr><td><code><h4></h4></code></td><td><span class="h4">h4. Bootstrap heading</span></td></tr><tr><td><code><h5></h5></code></td><td><span class="h5">h5. Bootstrap heading</span></td></tr><tr><td><code><h6></h6></code></td><td><span class="h6">h6. Bootstrap heading</span></td></tr></tbody></table> </div>
|
|
<h2 id="paragraphs">Paragraphs<a class="anchor-link" href="#paragraphs"> </a></h2>
|
|
<p>All <code><p></code> elements have their <code>margin-top</code> removed and <code>margin-bottom: 1rem</code> set for easy spacing.</p>
|
|
<div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <p>This is an example paragraph.</p> </div> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <small class="font-monospace text-body-secondary text-uppercase">html</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"> <use xlink:href="#lightning-charge-fill"></use> </svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"> <use xlink:href="#clipboard"></use> </svg> </button> </div> </div><div class="highlight"> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is an example paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre> </div> </div>
|
|
<h2 id="links">Links<a class="anchor-link" href="#links"> </a></h2>
|
|
<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>
|
|
<div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <a href="#">This is an example link</a> </div> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <small class="font-monospace text-body-secondary text-uppercase">html</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"> <use xlink:href="#lightning-charge-fill"></use> </svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"> <use xlink:href="#clipboard"></use> </svg> </button> </div> </div><div class="highlight"> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is an example link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="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>
|
|
<div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <a href="#" style="--bs-link-opacity: .5">This is an example link</a> </div> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <small class="font-monospace text-body-secondary text-uppercase">html</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"> <use xlink:href="#lightning-charge-fill"></use> </svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"> <use xlink:href="#clipboard"></use> </svg> </button> </div> </div><div class="highlight"> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--bs-link-opacity</span><span class="token punctuation">:</span> .5</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>This is an example link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> </div> </div>
|
|
<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>
|
|
<div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <a>This is a placeholder link</a> </div> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <small class="font-monospace text-body-secondary text-uppercase">html</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"> <use xlink:href="#lightning-charge-fill"></use> </svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"> <use xlink:href="#clipboard"></use> </svg> </button> </div> </div><div class="highlight"> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span>This is a placeholder link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> </div> </div>
|
|
<h2 id="horizontal-rules">Horizontal rules<a class="anchor-link" href="#horizontal-rules"> </a></h2>
|
|
<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>
|
|
<div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <hr>
|
|
|
|
<div class="text-success">
|
|
<hr>
|
|
</div>
|
|
|
|
<hr class="border border-danger border-2 opacity-50">
|
|
<hr class="border border-primary border-3 opacity-75"> </div> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <small class="font-monospace text-body-secondary text-uppercase">html</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"> <use xlink:href="#lightning-charge-fill"></use> </svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"> <use xlink:href="#clipboard"></use> </svg> </button> </div> </div><div class="highlight"> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span>
|
|
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>border border-danger border-2 opacity-50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>border border-primary border-3 opacity-75<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre> </div> </div>
|
|
<h2 id="lists">Lists<a class="anchor-link" href="#lists"> </a></h2>
|
|
<p>All lists—<code><ul></code>, <code><ol></code>, and <code><dl></code>—have their <code>margin-top</code> removed and a <code>margin-bottom: 1rem</code>. Nested lists have no <code>margin-bottom</code>. We've also reset the <code>padding-left</code> on <code><ul></code> and <code><ol></code> elements.</p>
|
|
<div class="bd-example"><ul>
|
|
<li>All lists have their top margin removed</li>
|
|
<li>And their bottom margin normalized</li>
|
|
<li>Nested lists have no bottom margin
|
|
<ul>
|
|
<li>This way they have a more even appearance</li>
|
|
<li>Particularly when followed by more list items</li>
|
|
</ul>
|
|
</li>
|
|
<li>The left padding has also been reset</li>
|
|
</ul><ol>
|
|
<li>Here's an ordered list</li>
|
|
<li>With a few list items</li>
|
|
<li>It has the same overall look</li>
|
|
<li>As the previous unordered list</li>
|
|
</ol></div>
|
|
<p>For simpler styling, clear hierarchy, and better spacing, description lists have updated <code>margin</code>s. <code><dd></code>s reset <code>margin-left</code> to <code>0</code> and add <code>margin-bottom: .5rem</code>. <code><dt></code>s are <strong>bolded</strong>.</p>
|
|
<div class="bd-example"><dl><dt>Description lists</dt><dd>A description list is perfect for defining terms.</dd><dt>Term</dt><dd>Definition for the term.</dd><dd>A second definition for the same term.</dd><dt>Another term</dt><dd>Definition for this other term.</dd></dl></div>
|
|
<h2 id="inline-code">Inline code<a class="anchor-link" href="#inline-code"> </a></h2>
|
|
<p>Wrap inline snippets of code with <code><code></code>. Be sure to escape HTML angle brackets.</p>
|
|
<div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> For example, <code><section></code> should be wrapped as inline. </div> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <small class="font-monospace text-body-secondary text-uppercase">html</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"> <use xlink:href="#lightning-charge-fill"></use> </svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"> <use xlink:href="#clipboard"></use> </svg> </button> </div> </div><div class="highlight"> <pre class="language-html"><code class="language-html">For example, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>section<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> should be wrapped as inline.</code></pre> </div> </div>
|
|
<h2 id="code-blocks">Code blocks<a class="anchor-link" href="#code-blocks"> </a></h2>
|
|
<p>Use <code><pre></code>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The <code><pre></code> element is reset to remove its <code>margin-top</code> and use <code>rem</code> units for its <code>margin-bottom</code>.</p>
|
|
<div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <pre><code><p>Sample text here...</p>
|
|
<p>And another line of sample text here...</p>
|
|
</code></pre> </div> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <small class="font-monospace text-body-secondary text-uppercase">html</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"> <use xlink:href="#lightning-charge-fill"></use> </svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"> <use xlink:href="#clipboard"></use> </svg> </button> </div> </div><div class="highlight"> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>p<span class="token entity named-entity" title=">">&gt;</span>Sample text here...<span class="token entity named-entity" title="<">&lt;</span>/p<span class="token entity named-entity" title=">">&gt;</span>
|
|
<span class="token entity named-entity" title="<">&lt;</span>p<span class="token entity named-entity" title=">">&gt;</span>And another line of sample text here...<span class="token entity named-entity" title="<">&lt;</span>/p<span class="token entity named-entity" title=">">&gt;</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span></code></pre> </div> </div>
|
|
<h2 id="variables">Variables<a class="anchor-link" href="#variables"> </a></h2>
|
|
<p>For indicating variables use the <code><var></code> tag.</p>
|
|
<div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <var>y</var> = <var>m</var><var>x</var> + <var>b</var> </div> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <small class="font-monospace text-body-secondary text-uppercase">html</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"> <use xlink:href="#lightning-charge-fill"></use> </svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"> <use xlink:href="#clipboard"></use> </svg> </button> </div> </div><div class="highlight"> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>y<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span> = <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>m<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>x<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span></code></pre> </div> </div>
|
|
<h2 id="user-input">User input<a class="anchor-link" href="#user-input"> </a></h2>
|
|
<p>Use the <code><kbd></code> to indicate input that is typically entered via keyboard.</p>
|
|
<div class="bd-example-snippet bd-code-snippet"> <div class="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> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <small class="font-monospace text-body-secondary text-uppercase">html</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"> <use xlink:href="#lightning-charge-fill"></use> </svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"> <use xlink:href="#clipboard"></use> </svg> </button> </div> </div><div class="highlight"> <pre class="language-html"><code class="language-html">To switch directories, type <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>cd<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> followed by the name of the directory.<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span>
|
|
To edit settings, press <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>Ctrl<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>,<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span></code></pre> </div> </div>
|
|
<h2 id="sample-output">Sample output<a class="anchor-link" href="#sample-output"> </a></h2>
|
|
<p>For indicating sample output from a program use the <code><samp></code> tag.</p>
|
|
<div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <samp>This text is meant to be treated as sample output from a computer program.</samp> </div> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <small class="font-monospace text-body-secondary text-uppercase">html</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"> <use xlink:href="#lightning-charge-fill"></use> </svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"> <use xlink:href="#clipboard"></use> </svg> </button> </div> </div><div class="highlight"> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span>This text is meant to be treated as sample output from a computer program.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span></code></pre> </div> </div>
|
|
<h2 id="tables">Tables<a class="anchor-link" href="#tables"> </a></h2>
|
|
<p>Tables are slightly adjusted to style <code><caption></code>s, collapse borders, and ensure consistent <code>text-align</code> throughout. Additional changes for borders, padding, and more come with <a href="/docs/5.3/content/tables">the <code>.table</code> class</a>.</p>
|
|
<div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <table>
|
|
<caption>
|
|
This is an example table, and this is its caption to describe the contents.
|
|
</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Table heading</th>
|
|
<th>Table heading</th>
|
|
<th>Table heading</th>
|
|
<th>Table heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Table cell</td>
|
|
<td>Table cell</td>
|
|
<td>Table cell</td>
|
|
<td>Table cell</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table cell</td>
|
|
<td>Table cell</td>
|
|
<td>Table cell</td>
|
|
<td>Table cell</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table cell</td>
|
|
<td>Table cell</td>
|
|
<td>Table cell</td>
|
|
<td>Table cell</td>
|
|
</tr>
|
|
</tbody>
|
|
</table> </div> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <small class="font-monospace text-body-secondary text-uppercase">html</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"> <use xlink:href="#lightning-charge-fill"></use> </svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"> <use xlink:href="#clipboard"></use> </svg> </button> </div> </div><div class="highlight"> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>caption</span><span class="token punctuation">></span></span>
|
|
This is an example table, and this is its caption to describe the contents.
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>caption</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Table heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Table heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Table heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Table heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table cell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table cell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table cell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table cell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table cell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table cell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table cell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table cell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table cell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table cell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table cell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Table cell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre> </div> </div>
|
|
<h2 id="forms">Forms<a class="anchor-link" href="#forms"> </a></h2>
|
|
<p>Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:</p>
|
|
<ul>
|
|
<li><code><fieldset></code>s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.</li>
|
|
<li><code><legend></code>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.</li>
|
|
<li><code><label></code>s are set to <code>display: inline-block</code> to allow <code>margin</code> to be applied.</li>
|
|
<li><code><input></code>s, <code><select></code>s, <code><textarea></code>s, and <code><button></code>s are mostly addressed by Normalize, but Reboot removes their <code>margin</code> and sets <code>line-height: inherit</code>, too.</li>
|
|
<li><code><textarea></code>s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.</li>
|
|
<li><code><button></code>s and <code><input></code> button elements have <code>cursor: pointer</code> when <code>:not(:disabled)</code>.</li>
|
|
</ul>
|
|
<p>These changes, and more, are demonstrated below.</p>
|
|
<div class="bd-callout bd-callout-warning"> <p>Some date inputs types are <a href="https://caniuse.com/input-datetime">not fully supported</a> by the latest versions of Safari and Firefox.</p> </div>
|
|
<form class="bd-example"><fieldset><legend>Example legend</legend><p><label for="input">Example input</label><input type="text" id="input" placeholder="Example input"/></p><p><label for="email">Example email</label><input type="email" id="email" placeholder="test@example.com"/></p><p><label for="tel">Example telephone</label><input type="tel" id="tel"/></p><p><label for="url">Example url</label><input type="url" id="url"/></p><p><label for="number">Example number</label><input type="number" id="number"/></p><p><label for="search">Example search</label><input type="search" id="search"/></p><p><label for="range">Example range</label><input type="range" id="range" min="0" max="10"/></p><p><label for="file">Example file input</label><input type="file" id="file"/></p><p><label for="select">Example select</label><select id="select"><option value>Choose...</option><optgroup label="Option group 1"><option value>Option 1</option><option value>Option 2</option><option value>Option 3</option></optgroup><optgroup label="Option group 2"><option value>Option 4</option><option value>Option 5</option><option value>Option 6</option></optgroup></select></p><p><label><input type="checkbox" value/><p>Check this checkbox</p></label></p><p><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked/><p>Option one is this and that</p></label><label><input type="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><input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled/><p>Option three is disabled</p></label></p><p><label for="textarea">Example textarea</label><textarea id="textarea" rows="3"></textarea></p><p><label for="date">Example date</label><input type="date" id="date"/></p><p><label for="time">Example time</label><input type="time" id="time"/></p><p><label for="password">Example password</label><input type="password" id="password"/></p><p><label for="datetime-local">Example datetime-local</label><input type="datetime-local" id="datetime-local"/></p><p><label for="week">Example week</label><input type="week" id="week"/></p><p><label for="month">Example month</label><input type="month" id="month"/></p><p><label for="color">Example color</label><input type="color" id="color"/></p><p><label for="output">Example output</label><output name="result" id="output">100</output></p><p><button type="submit">Button submit</button><input type="submit" value="Input submit button"/><input type="reset" value="Input reset button"/><input type="button" value="Input button"/></p><p><button type="submit" disabled>Button submit</button><input type="submit" value="Input submit button" disabled/><input type="reset" value="Input reset button" disabled/><input type="button" value="Input button" disabled/></p></fieldset></form>
|
|
<h3 id="pointers-on-buttons">Pointers on buttons<a class="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>
|
|
<div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <span role="button" tabindex="0">Non-button element button</span> </div> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <small class="font-monospace text-body-secondary text-uppercase">html</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"> <use xlink:href="#lightning-charge-fill"></use> </svg> </button> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"> <use xlink:href="#clipboard"></use> </svg> </button> </div> </div><div class="highlight"> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Non-button element button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></code></pre> </div> </div>
|
|
<h2 id="misc-elements">Misc elements<a class="anchor-link" href="#misc-elements"> </a></h2>
|
|
<h3 id="address">Address<a class="anchor-link" href="#address"> </a></h3>
|
|
<p>The <code><address></code> element is updated to reset the browser default <code>font-style</code> from <code>italic</code> to <code>normal</code>. <code>line-height</code> is also now inherited, and <code>margin-bottom: 1rem</code> has been added. <code><address></code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <code><br/></code>.</p>
|
|
<div class="bd-example"><address><p><strong>ACME Corporation</strong><br/>
|
|
1123 Fictional St,<br/>
|
|
San Francisco, CA 94103<br/>
|
|
<abbr title="Phone">P:</abbr> (123) 456-7890</p></address><address><strong>Full Name</strong><br/><a href="mailto:first.last@example.com"><a href="mailto:first.last@example.com">first.last@example.com</a></a></address></div>
|
|
<h3 id="blockquote">Blockquote<a class="anchor-link" href="#blockquote"> </a></h3>
|
|
<p>The default <code>margin</code> on blockquotes is <code>1em 40px</code>, so we reset that to <code>0 0 1rem</code> for something more consistent with other elements.</p>
|
|
<div class="bd-example"><blockquote class="blockquote"><p>A well-known quote, contained in a blockquote element.</p></blockquote><p>Someone famous in <cite title="Source Title">Source Title</cite></p></div>
|
|
<h3 id="inline-elements">Inline elements<a class="anchor-link" href="#inline-elements"> </a></h3>
|
|
<p>The <code><abbr></code> element receives basic styling to make it stand out amongst paragraph text.</p>
|
|
<div class="bd-example"><p>The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.</p></div>
|
|
<h3 id="summary">Summary<a class="anchor-link" href="#summary"> </a></h3>
|
|
<p>The default <code>cursor</code> on summary is <code>text</code>, so we reset that to <code>pointer</code> to convey that the element can be interacted with by clicking on it.</p>
|
|
<div class="bd-example"><details><summary>Some details</summary><p>More info about the details.</p></details><details open><summary>Even more details</summary><p>Here are even more details about the details.</p></details></div>
|
|
<h2 id="html5-hidden-attribute">HTML5 <code>[hidden]</code> attribute<a class="anchor-link" href="#html5-hidden-attribute"> </a></h2>
|
|
<p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code>[hidden]</code></a>, which is styled as <code>display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code>[hidden] { display: none !important; }</code> to help prevent its <code>display</code> from getting accidentally overridden.</p>
|
|
<div class="bd-code-snippet"> <div class="bd-clipboard"> <button type="button" class="btn-clipboard"> <svg class="bi" role="img" aria-label="Copy"> <use xlink:href="#clipboard"></use> </svg> </button> </div> <div class="highlight"> <pre class="language-html"><code is:raw class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">hidden</span><span class="token punctuation">/></span></span>
|
|
</code></pre> </div> </div>
|
|
<div class="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 <a href="/docs/5.3/utilities/visibility">the <code>.invisible</code> class</a> instead.</p> </div> </main> </div> <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"></script> <script type="module" src="/_astro/Scripts.astro_astro_type_script_index_0_lang.lFiTneBv.js"></script> <script type="module" src="/_astro/Scripts.astro_astro_type_script_index_1_lang.CAqD2hc_.js"></script> <script type="module">const p=()=>{const t=document.querySelector(".bd-sidebar"),a=document.querySelector(".bd-links-nav .active");if(!t||!a)return;const c=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=>{new bootstrap.Tooltip(e)}),document.querySelectorAll('[data-bs-toggle="popover"]').forEach(e=>{new bootstrap.Popover(e)});const t=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=>{new bootstrap.Toast(e,{autohide:!1}).show()});const a=document.getElementById("liveToastBtn"),c=document.getElementById("liveToast");if(a){const e=bootstrap.Toast.getOrCreateInstance(c);a.addEventListener("click",()=>{e.show()})}const i=document.getElementById("liveAlertPlaceholder"),r=(e,o)=>{const l=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()})});const s=document.getElementById("exampleModal");s&&s.addEventListener("show.bs.modal",e=>{const l=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});const d=document.querySelectorAll(".bd-example-offcanvas .offcanvas");d&&d.forEach(e=>{e.addEventListener("show.bs.offcanvas",o=>{o.preventDefault()},!1)})};p();v();</script> <footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary"> <div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary"> <div class="row"> <div class="col-lg-3 mb-3"> <a class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none" href="/" aria-label="Bootstrap"> <svg xmlns="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> <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.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.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path> </svg> <span class="fs-5">Bootstrap</span> </a> <ul class="list-unstyled small"> <li class="mb-2">
|
|
Designed and built with all the love in the world by the <a href="/docs/5.3/about/team">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.
|
|
</li> <li class="mb-2">
|
|
Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.
|
|
</li> <li class="mb-2">Currently v5.3.3.</li> </ul> </div> <div class="col-6 col-lg-2 offset-lg-1 mb-3"> <h5>Links</h5> <ul class="list-unstyled"> <li class="mb-2"><a href="/">Home</a></li> <li class="mb-2"><a href="/docs/5.3/">Docs</a></li> <li class="mb-2"><a href="/docs/5.3/examples">Examples</a></li> <li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li> <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li> <li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li> <li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap" target="_blank" rel="noopener">Swag Store</a></li> </ul> </div> <div class="col-6 col-lg-2 mb-3"> <h5>Guides</h5> <ul class="list-unstyled"> <li class="mb-2"><a href="/docs/5.3/getting-started">Getting started</a></li> <li class="mb-2"><a href="/docs/5.3/examples/starter-template">Starter template</a></li> <li class="mb-2"><a href="/docs/5.3/getting-started/webpack">Webpack</a></li> <li class="mb-2"><a href="/docs/5.3/getting-started/parcel">Parcel</a></li> <li class="mb-2"><a href="/docs/5.3/getting-started/vite">Vite</a></li> </ul> </div> <div class="col-6 col-lg-2 mb-3"> <h5>Projects</h5> <ul class="list-unstyled"> <li class="mb-2"> <a href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener">Bootstrap 5</a> </li> <li class="mb-2"> <a href="https://github.com/twbs/bootstrap/tree/v4-dev" target="_blank" rel="noopener">Bootstrap 4</a> </li> <li class="mb-2"><a href="https://github.com/twbs/icons" target="_blank" rel="noopener">Icons</a></li> <li class="mb-2"><a href="https://github.com/twbs/rfs" target="_blank" rel="noopener">RFS</a></li> <li class="mb-2"> <a href="https://github.com/twbs/examples" target="_blank" rel="noopener">Examples repo</a> </li> </ul> </div> <div class="col-6 col-lg-2 mb-3"> <h5>Community</h5> <ul class="list-unstyled"> <li class="mb-2"> <a href="https://github.com/twbs/bootstrap/issues" target="_blank" rel="noopener">Issues</a> </li> <li class="mb-2"> <a href="https://github.com/twbs/bootstrap/discussions" target="_blank" rel="noopener">Discussions</a> </li> <li class="mb-2"> <a href="https://github.com/sponsors/twbs" target="_blank" rel="noopener">Corporate sponsors</a> </li> <li class="mb-2"><a href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">Open Collective</a></li> <li class="mb-2"> <a href="https://stackoverflow.com/questions/tagged/bootstrap-5" target="_blank" rel="noopener">Stack Overflow</a> </li> </ul> </div> </div> </div> </footer> </body> </html> |