mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-16 02:24:19 +02:00
Add v5.1.0 docs (#34675)
This commit is contained in:
XhmikosR
GitHub
522
docs/5.1/content/figures/index.html
Normal file
522
docs/5.1/content/figures/index.html
Normal file
@@ -0,0 +1,522 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.87.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.1">
|
||||
|
||||
<title>Figures · Bootstrap v5.1</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/content/figures/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.1/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#7952b3">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Figures">
|
||||
<meta name="twitter:description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.1/content/figures/">
|
||||
<meta property="og:title" content="Figures">
|
||||
<meta property="og:description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy 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>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||
<a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><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"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<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"/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.1/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="/docs/5.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-md-none text-white-50">
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-md-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-md-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-md-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-md-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.1/getting-started/download/">Download</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.1">
|
||||
</form>
|
||||
|
||||
<div class="dropdown ms-3">
|
||||
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-none d-lg-inline">Bootstrap</span> v5.1
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.1/">Latest (5.0.x)</a></li>
|
||||
<li><hr class="dropdown-divider"></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>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
|
||||
<title>Expand</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||
</svg>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" fill="currentColor" viewBox="0 0 16 16">
|
||||
<title>Collapse</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="container-xxl my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||
Getting started
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="getting-started-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/contribute/" class="d-inline-flex align-items-center rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||
Customize
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="customize-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.1/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.1/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||
<li><a href="/docs/5.1/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||
<li><a href="/docs/5.1/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||
<li><a href="/docs/5.1/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.1/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||
Layout
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="layout-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.1/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.1/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.1/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.1/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.1/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.1/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.1/layout/css-grid/" class="d-inline-flex align-items-center rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="true" aria-current="true">
|
||||
Content
|
||||
</button>
|
||||
|
||||
<div class="collapse show" id="content-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.1/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.1/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||
<li><a href="/docs/5.1/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.1/content/figures/" class="d-inline-flex align-items-center rounded active" aria-current="page">Figures</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||
Forms
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="forms-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.1/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.1/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||
<li><a href="/docs/5.1/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.1/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||
<li><a href="/docs/5.1/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.1/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.1/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.1/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="false">
|
||||
Components
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="components-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.1/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.1/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.1/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.1/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.1/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.1/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||
<li><a href="/docs/5.1/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.1/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.1/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.1/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.1/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||
<li><a href="/docs/5.1/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.1/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.1/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.1/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.1/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.1/components/placeholders/" class="d-inline-flex align-items-center rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.1/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.1/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.1/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.1/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.1/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.1/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||
Helpers
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="helpers-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.1/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.1/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.1/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||
<li><a href="/docs/5.1/helpers/stacks/" class="d-inline-flex align-items-center rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.1/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.1/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.1/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.1/helpers/vertical-rule/" class="d-inline-flex align-items-center rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||
Utilities
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="utilities-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||
<li><a href="/docs/5.1/utilities/background/" class="d-inline-flex align-items-center rounded">Background</a></li>
|
||||
<li><a href="/docs/5.1/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.1/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.1/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||
<li><a href="/docs/5.1/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.1/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||
<li><a href="/docs/5.1/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.1/utilities/opacity/" class="d-inline-flex align-items-center rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.1/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.1/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||
<li><a href="/docs/5.1/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.1/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.1/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.1/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||
<li><a href="/docs/5.1/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.1/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||
Extend
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="extend-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.1/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||
About
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="about-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.1/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||
<li><a href="/docs/5.1/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.1/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||
<li><a href="/docs/5.1/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="my-3 mx-4 border-top"></li>
|
||||
<li>
|
||||
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro ps-lg-4">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.1/content/figures.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Figures</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for displaying related images and text with the figure component in Bootstrap.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
<p>Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code><figure></code>.</p>
|
||||
<p>Use the included <code>.figure</code>, <code>.figure-img</code> and <code>.figure-caption</code> classes to provide some baseline styles for the HTML5 <code><figure></code> and <code><figcaption></code> elements. Images in figures have no explicit size, so be sure to add the <code>.img-fluid</code> class to your <code><img></code> to make it responsive.</p>
|
||||
<div class="bd-example">
|
||||
<figure class="figure">
|
||||
<svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text></svg>
|
||||
|
||||
<figcaption class="figure-caption">A caption for the above image.</figcaption>
|
||||
</figure>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">figure</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-img img-fluid rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">figcaption</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-caption"</span><span class="p">></span>A caption for the above image.<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">figure</span><span class="p">></span></code></pre></div>
|
||||
<p>Aligning the figure’s caption is easy with our <a href="/docs/5.1/utilities/text/#text-alignment">text utilities</a>.</p>
|
||||
<div class="bd-example">
|
||||
<figure class="figure">
|
||||
<svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text></svg>
|
||||
|
||||
<figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
|
||||
</figure>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">figure</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-img img-fluid rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">figcaption</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-caption text-end"</span><span class="p">></span>A caption for the above image.<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">figure</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$figure-caption-font-size</span><span class="o">:</span> <span class="nv">$small-font-size</span><span class="p">;</span>
|
||||
<span class="nv">$figure-caption-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><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"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.1/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.1.0.</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.1/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</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>
|
||||
</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.1/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/getting-started/parcel/">Parcel</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">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</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">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
<script src="/docs/5.1/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
547
docs/5.1/content/images/index.html
Normal file
547
docs/5.1/content/images/index.html
Normal file
@@ -0,0 +1,547 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.87.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.1">
|
||||
|
||||
<title>Images · Bootstrap v5.1</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/content/images/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.1/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#7952b3">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Images">
|
||||
<meta name="twitter:description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.1/content/images/">
|
||||
<meta property="og:title" content="Images">
|
||||
<meta property="og:description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy 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>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||
<a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><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"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<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"/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.1/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="/docs/5.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-md-none text-white-50">
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-md-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-md-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-md-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-md-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.1/getting-started/download/">Download</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.1">
|
||||
</form>
|
||||
|
||||
<div class="dropdown ms-3">
|
||||
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-none d-lg-inline">Bootstrap</span> v5.1
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.1/">Latest (5.0.x)</a></li>
|
||||
<li><hr class="dropdown-divider"></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>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
|
||||
<title>Expand</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||
</svg>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" fill="currentColor" viewBox="0 0 16 16">
|
||||
<title>Collapse</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="container-xxl my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||
Getting started
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="getting-started-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/contribute/" class="d-inline-flex align-items-center rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||
Customize
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="customize-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.1/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.1/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||
<li><a href="/docs/5.1/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||
<li><a href="/docs/5.1/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||
<li><a href="/docs/5.1/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.1/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||
Layout
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="layout-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.1/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.1/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.1/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.1/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.1/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.1/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.1/layout/css-grid/" class="d-inline-flex align-items-center rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="true" aria-current="true">
|
||||
Content
|
||||
</button>
|
||||
|
||||
<div class="collapse show" id="content-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.1/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.1/content/images/" class="d-inline-flex align-items-center rounded active" aria-current="page">Images</a></li>
|
||||
<li><a href="/docs/5.1/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.1/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||
Forms
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="forms-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.1/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.1/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||
<li><a href="/docs/5.1/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.1/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||
<li><a href="/docs/5.1/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.1/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.1/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.1/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="false">
|
||||
Components
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="components-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.1/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.1/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.1/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.1/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.1/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.1/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||
<li><a href="/docs/5.1/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.1/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.1/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.1/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.1/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||
<li><a href="/docs/5.1/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.1/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.1/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.1/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.1/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.1/components/placeholders/" class="d-inline-flex align-items-center rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.1/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.1/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.1/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.1/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.1/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.1/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||
Helpers
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="helpers-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.1/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.1/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.1/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||
<li><a href="/docs/5.1/helpers/stacks/" class="d-inline-flex align-items-center rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.1/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.1/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.1/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.1/helpers/vertical-rule/" class="d-inline-flex align-items-center rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||
Utilities
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="utilities-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||
<li><a href="/docs/5.1/utilities/background/" class="d-inline-flex align-items-center rounded">Background</a></li>
|
||||
<li><a href="/docs/5.1/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.1/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.1/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||
<li><a href="/docs/5.1/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.1/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||
<li><a href="/docs/5.1/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.1/utilities/opacity/" class="d-inline-flex align-items-center rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.1/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.1/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||
<li><a href="/docs/5.1/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.1/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.1/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.1/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||
<li><a href="/docs/5.1/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.1/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||
Extend
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="extend-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.1/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||
About
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="about-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.1/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||
<li><a href="/docs/5.1/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.1/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||
<li><a href="/docs/5.1/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="my-3 mx-4 border-top"></li>
|
||||
<li>
|
||||
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro ps-lg-4">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.1/content/images.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Images</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#responsive-images">Responsive images</a></li>
|
||||
<li><a href="#image-thumbnails">Image thumbnails</a></li>
|
||||
<li><a href="#aligning-images">Aligning images</a></li>
|
||||
<li><a href="#picture">Picture</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
<h2 id="responsive-images">Responsive images</h2>
|
||||
<p>Images in Bootstrap are made responsive with <code>.img-fluid</code>. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales with the parent element.</p>
|
||||
<div class="bd-example">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg img-fluid" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive image</text></svg>
|
||||
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-fluid"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="image-thumbnails">Image thumbnails</h2>
|
||||
<p>In addition to our <a href="/docs/5.1/utilities/borders/">border-radius utilities</a>, you can use <code>.img-thumbnail</code> to give an image a rounded 1px border appearance.</p>
|
||||
<div class="bd-example">
|
||||
<svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
|
||||
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-thumbnail"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="aligning-images">Aligning images</h2>
|
||||
<p>Align images with the <a href="/docs/5.1/utilities/float/">helper float classes</a> or <a href="/docs/5.1/utilities/text/#text-alignment">text alignment classes</a>. <code>block</code>-level images can be centered using <a href="/docs/5.1/utilities/spacing/#horizontal-centering">the <code>.mx-auto</code> margin utility class</a>.</p>
|
||||
<div class="bd-example">
|
||||
<svg class="bd-placeholder-img rounded float-start" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
|
||||
|
||||
<svg class="bd-placeholder-img rounded float-end" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
|
||||
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded float-start"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded float-end"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div>
|
||||
<div class="bd-example">
|
||||
<svg class="bd-placeholder-img rounded mx-auto d-block" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
|
||||
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mx-auto d-block"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div>
|
||||
<div class="bd-example">
|
||||
<div class="text-center">
|
||||
<svg class="bd-placeholder-img rounded" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
|
||||
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-center"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="picture">Picture</h2>
|
||||
<p>If you are using the <code><picture></code> element to specify multiple <code><source></code> elements for a specific <code><img></code>, make sure to add the <code>.img-*</code> classes to the <code><img></code> and not to the <code><picture></code> tag.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">picture</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">source</span> <span class="na">srcset</span><span class="o">=</span><span class="s">"..."</span> <span class="na">type</span><span class="o">=</span><span class="s">"image/svg+xml"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">picture</span><span class="p">></span>
|
||||
</code></pre></div><h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<p>Variables are available for image thumbnails.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$thumbnail-padding</span><span class="o">:</span> <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$thumbnail-bg</span><span class="o">:</span> <span class="nv">$body-bg</span><span class="p">;</span>
|
||||
<span class="nv">$thumbnail-border-width</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$thumbnail-border-color</span><span class="o">:</span> <span class="nv">$gray-300</span><span class="p">;</span>
|
||||
<span class="nv">$thumbnail-border-radius</span><span class="o">:</span> <span class="nv">$border-radius</span><span class="p">;</span>
|
||||
<span class="nv">$thumbnail-box-shadow</span><span class="o">:</span> <span class="nv">$box-shadow-sm</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><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"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.1/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.1.0.</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.1/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</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>
|
||||
</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.1/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/getting-started/parcel/">Parcel</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">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</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">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
<script src="/docs/5.1/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
12
docs/5.1/content/index.html
Normal file
12
docs/5.1/content/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>https://getbootstrap.com/docs/5.1/content/reboot/</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/content/reboot/">
|
||||
<meta name="robots" content="noindex">
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/5.1/content/reboot/">
|
||||
</head>
|
||||
</html>
|
||||
|
||||
932
docs/5.1/content/reboot/index.html
Normal file
932
docs/5.1/content/reboot/index.html
Normal file
@@ -0,0 +1,932 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<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="Hugo 0.87.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.1">
|
||||
|
||||
<title>Reboot · Bootstrap v5.1</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/content/reboot/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.1/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#7952b3">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Reboot">
|
||||
<meta name="twitter:description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.1/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.1/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy 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>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||
<a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><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"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<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"/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.1/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="/docs/5.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-md-none text-white-50">
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-md-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-md-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-md-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-md-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.1/getting-started/download/">Download</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.1">
|
||||
</form>
|
||||
|
||||
<div class="dropdown ms-3">
|
||||
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-none d-lg-inline">Bootstrap</span> v5.1
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.1/">Latest (5.0.x)</a></li>
|
||||
<li><hr class="dropdown-divider"></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>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
|
||||
<title>Expand</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||
</svg>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" fill="currentColor" viewBox="0 0 16 16">
|
||||
<title>Collapse</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="container-xxl my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||
Getting started
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="getting-started-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/contribute/" class="d-inline-flex align-items-center rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||
Customize
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="customize-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.1/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.1/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||
<li><a href="/docs/5.1/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||
<li><a href="/docs/5.1/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||
<li><a href="/docs/5.1/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.1/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||
Layout
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="layout-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.1/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.1/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.1/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.1/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.1/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.1/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.1/layout/css-grid/" class="d-inline-flex align-items-center rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="true" aria-current="true">
|
||||
Content
|
||||
</button>
|
||||
|
||||
<div class="collapse show" id="content-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/content/reboot/" class="d-inline-flex align-items-center rounded active" aria-current="page">Reboot</a></li>
|
||||
<li><a href="/docs/5.1/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||||
<li><a href="/docs/5.1/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||
<li><a href="/docs/5.1/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.1/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||
Forms
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="forms-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.1/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.1/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||
<li><a href="/docs/5.1/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.1/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||
<li><a href="/docs/5.1/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.1/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.1/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.1/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="false">
|
||||
Components
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="components-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.1/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.1/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.1/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.1/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.1/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.1/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||
<li><a href="/docs/5.1/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.1/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.1/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.1/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.1/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||
<li><a href="/docs/5.1/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.1/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.1/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.1/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.1/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.1/components/placeholders/" class="d-inline-flex align-items-center rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.1/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.1/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.1/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.1/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.1/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.1/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||
Helpers
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="helpers-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.1/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.1/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.1/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||
<li><a href="/docs/5.1/helpers/stacks/" class="d-inline-flex align-items-center rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.1/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.1/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.1/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.1/helpers/vertical-rule/" class="d-inline-flex align-items-center rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||
Utilities
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="utilities-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||
<li><a href="/docs/5.1/utilities/background/" class="d-inline-flex align-items-center rounded">Background</a></li>
|
||||
<li><a href="/docs/5.1/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.1/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.1/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||
<li><a href="/docs/5.1/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.1/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||
<li><a href="/docs/5.1/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.1/utilities/opacity/" class="d-inline-flex align-items-center rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.1/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.1/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||
<li><a href="/docs/5.1/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.1/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.1/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.1/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||
<li><a href="/docs/5.1/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.1/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||
Extend
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="extend-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.1/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||
About
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="about-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.1/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||
<li><a href="/docs/5.1/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.1/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||
<li><a href="/docs/5.1/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="my-3 mx-4 border-top"></li>
|
||||
<li>
|
||||
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro ps-lg-4">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.1/content/reboot.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Reboot</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#approach">Approach</a></li>
|
||||
<li><a href="#page-defaults">Page defaults</a></li>
|
||||
<li><a href="#native-font-stack">Native font stack</a></li>
|
||||
<li><a href="#css-variables">CSS variables</a></li>
|
||||
<li><a href="#headings-and-paragraphs">Headings and paragraphs</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>
|
||||
<ul>
|
||||
<li><a href="#pointers-on-buttons">Pointers on buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#misc-elements">Misc elements</a>
|
||||
<ul>
|
||||
<li><a href="#address">Address</a></li>
|
||||
<li><a href="#blockquote">Blockquote</a></li>
|
||||
<li><a href="#inline-elements">Inline elements</a></li>
|
||||
<li><a href="#summary">Summary</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#html5-hidden-attribute">HTML5 <code>[hidden]</code> attribute</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
<h2 id="approach">Approach</h2>
|
||||
<p>Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <code><table></code> styles for a simpler baseline and later provide <code>.table</code>, <code>.table-bordered</code>, and more.</p>
|
||||
<p>Here are our guidelines and reasons for choosing what to override in Reboot:</p>
|
||||
<ul>
|
||||
<li>Update some browser default values to use <code>rem</code>s instead of <code>em</code>s for scalable component spacing.</li>
|
||||
<li>Avoid <code>margin-top</code>. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of <code>margin</code> is a simpler mental model.</li>
|
||||
<li>For easier scaling across device sizes, block elements should use <code>rem</code>s for <code>margin</code>s.</li>
|
||||
<li>Keep declarations of <code>font</code>-related properties to a minimum, using <code>inherit</code> whenever possible.</li>
|
||||
</ul>
|
||||
<h2 id="page-defaults">Page defaults</h2>
|
||||
<p>The <code><html></code> and <code><body></code> elements are updated to provide better page-wide defaults. More specifically:</p>
|
||||
<ul>
|
||||
<li>The <code>box-sizing</code> is globally set on every element—including <code>*::before</code> and <code>*::after</code>, to <code>border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.
|
||||
<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</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="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$font-family-sans-serif</span><span class="o">:</span>
|
||||
<span class="c1">// Cross-platform generic font family (default user interface font)</span>
|
||||
<span class="ni">system-ui</span><span class="o">,</span>
|
||||
<span class="c1">// Safari for macOS and iOS (San Francisco)</span>
|
||||
<span class="o">-</span><span class="n">apple-system</span><span class="o">,</span>
|
||||
<span class="c1">// Windows</span>
|
||||
<span class="s2">"Segoe UI"</span><span class="o">,</span>
|
||||
<span class="c1">// Android</span>
|
||||
<span class="n">Roboto</span><span class="o">,</span>
|
||||
<span class="c1">// Basic web fallback</span>
|
||||
<span class="s2">"Helvetica Neue"</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span>
|
||||
<span class="c1">// Linux</span>
|
||||
<span class="s2">"Noto Sans"</span><span class="o">,</span>
|
||||
<span class="s2">"Liberation Sans"</span><span class="o">,</span>
|
||||
<span class="c1">// Sans serif fallback</span>
|
||||
<span class="ni">sans-serif</span><span class="o">,</span>
|
||||
<span class="c1">// Emoji fonts</span>
|
||||
<span class="s2">"Apple Color Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Symbol"</span><span class="o">,</span> <span class="s2">"Noto Color Emoji"</span> <span class="k">!default</span><span class="p">;</span>
|
||||
</code></pre></div><p>Note that because the font stack includes emoji fonts, many common symbol/dingbat unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform’s native emoji font, and they won’t be affected by any CSS <code>color</code> styles.</p>
|
||||
<p>This <code>font-family</code> is applied to the <code><body></code> and automatically inherited globally throughout Bootstrap. To switch the global <code>font-family</code>, update <code>$font-family-base</code> and recompile Bootstrap.</p>
|
||||
<h2 id="css-variables">CSS variables</h2>
|
||||
<p>As Bootstrap 5 continues to mature, more and more styles will be built with <a href="/docs/5.1/customize/css-variables/">CSS variables</a> as a means 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="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"> <span class="k">@if</span> <span class="nv">$font-size-root</span> <span class="o">!=</span> <span class="n">null</span> <span class="p">{</span>
|
||||
<span class="na">--#{$variable-prefix}root-font-size</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$font-size-root</span><span class="si">}</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="na">--#{$variable-prefix}body-font-family</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$font-family-base</span><span class="si">}</span><span class="p">;</span>
|
||||
<span class="na">--#{$variable-prefix}body-font-size</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$font-size-base</span><span class="si">}</span><span class="p">;</span>
|
||||
<span class="na">--#{$variable-prefix}body-font-weight</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$font-weight-base</span><span class="si">}</span><span class="p">;</span>
|
||||
<span class="na">--#{$variable-prefix}body-line-height</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$line-height-base</span><span class="si">}</span><span class="p">;</span>
|
||||
<span class="na">--#{$variable-prefix}body-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$body-color</span><span class="si">}</span><span class="p">;</span>
|
||||
<span class="k">@if</span> <span class="nv">$body-text-align</span> <span class="o">!=</span> <span class="n">null</span> <span class="p">{</span>
|
||||
<span class="na">--#{$variable-prefix}body-text-align</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$body-text-align</span><span class="si">}</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="na">--#{$variable-prefix}body-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$body-bg</span><span class="si">}</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>In practice, those variables are then applied in Reboot like so:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nt">body</span> <span class="p">{</span>
|
||||
<span class="na">margin</span><span class="o">:</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// 1
|
||||
</span><span class="c1"></span> <span class="na">font-family</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$variable-prefix</span><span class="si">}</span><span class="n">body-font-family</span><span class="p">);</span>
|
||||
<span class="k">@include</span><span class="nd"> font-size</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$variable-prefix</span><span class="si">}</span><span class="n">body-font-size</span><span class="p">));</span>
|
||||
<span class="na">font-weight</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$variable-prefix</span><span class="si">}</span><span class="n">body-font-weight</span><span class="p">);</span>
|
||||
<span class="na">line-height</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$variable-prefix</span><span class="si">}</span><span class="n">body-line-height</span><span class="p">);</span>
|
||||
<span class="na">color</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$variable-prefix</span><span class="si">}</span><span class="n">body-color</span><span class="p">);</span>
|
||||
<span class="na">text-align</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$variable-prefix</span><span class="si">}</span><span class="n">body-text-align</span><span class="p">);</span>
|
||||
<span class="na">background-color</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$variable-prefix</span><span class="si">}</span><span class="n">body-bg</span><span class="p">);</span> <span class="c1">// 2
|
||||
</span><span class="c1"></span> <span class="na">-webkit-text-size-adjust</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> <span class="c1">// 3
|
||||
</span><span class="c1"></span> <span class="na">-webkit-tap-highlight-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$black</span><span class="o">,</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// 4
|
||||
</span><span class="c1"></span><span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Which allows you to make real-time customizations however you like:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">body</span> <span class="na">style</span><span class="o">=</span><span class="s">"--bs-body-color: #333;"</span><span class="p">></span>
|
||||
<span class="c"><!-- ... --></span>
|
||||
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
||||
</code></pre></div><h2 id="headings-and-paragraphs">Headings and paragraphs</h2>
|
||||
<p>All heading elements—e.g., <code><h1></code>—and <code><p></code> are reset to have their <code>margin-top</code> removed. Headings have <code>margin-bottom: .5rem</code> added and paragraphs <code>margin-bottom: 1rem</code> for easy spacing.</p>
|
||||
<table 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>
|
||||
<h2 id="lists">Lists</h2>
|
||||
<p>All lists—<code><ul></code>, <code><ol></code>, and <code><dl></code>—have their <code>margin-top</code> removed and a <code>margin-bottom: 1rem</code>. Nested lists have no <code>margin-bottom</code>. 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</h2>
|
||||
<p>Wrap inline snippets of code with <code><code></code>. Be sure to escape HTML angle brackets.</p>
|
||||
<div class="bd-example">
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">For example, <span class="p"><</span><span class="nt">code</span><span class="p">></span><span class="ni">&lt;</span>section<span class="ni">&gt;</span><span class="p"></</span><span class="nt">code</span><span class="p">></span> should be wrapped as inline.</code></pre></div>
|
||||
<h2 id="code-blocks">Code blocks</h2>
|
||||
<p>Use <code><pre></code>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The <code><pre></code> element is reset to remove its <code>margin-top</code> and use <code>rem</code> units for its <code>margin-bottom</code>.</p>
|
||||
<div class="bd-example">
|
||||
<pre><code><p>Sample text here...</p>
|
||||
<p>And another line of sample text here...</p>
|
||||
</code></pre>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">pre</span><span class="p">><</span><span class="nt">code</span><span class="p">></span><span class="ni">&lt;</span>p<span class="ni">&gt;</span>Sample text here...<span class="ni">&lt;</span>/p<span class="ni">&gt;</span>
|
||||
<span class="ni">&lt;</span>p<span class="ni">&gt;</span>And another line of sample text here...<span class="ni">&lt;</span>/p<span class="ni">&gt;</span>
|
||||
<span class="p"></</span><span class="nt">code</span><span class="p">></</span><span class="nt">pre</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="variables">Variables</h2>
|
||||
<p>For indicating variables use the <code><var></code> tag.</p>
|
||||
<div class="bd-example">
|
||||
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">var</span><span class="p">></span>y<span class="p"></</span><span class="nt">var</span><span class="p">></span> = <span class="p"><</span><span class="nt">var</span><span class="p">></span>m<span class="p"></</span><span class="nt">var</span><span class="p">><</span><span class="nt">var</span><span class="p">></span>x<span class="p"></</span><span class="nt">var</span><span class="p">></span> + <span class="p"><</span><span class="nt">var</span><span class="p">></span>b<span class="p"></</span><span class="nt">var</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="user-input">User input</h2>
|
||||
<p>Use the <code><kbd></code> to indicate input that is typically entered via keyboard.</p>
|
||||
<div class="bd-example">
|
||||
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
|
||||
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">To switch directories, type <span class="p"><</span><span class="nt">kbd</span><span class="p">></span>cd<span class="p"></</span><span class="nt">kbd</span><span class="p">></span> followed by the name of the directory.<span class="p"><</span><span class="nt">br</span><span class="p">></span>
|
||||
To edit settings, press <span class="p"><</span><span class="nt">kbd</span><span class="p">><</span><span class="nt">kbd</span><span class="p">></span>ctrl<span class="p"></</span><span class="nt">kbd</span><span class="p">></span> + <span class="p"><</span><span class="nt">kbd</span><span class="p">></span>,<span class="p"></</span><span class="nt">kbd</span><span class="p">></</span><span class="nt">kbd</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="sample-output">Sample output</h2>
|
||||
<p>For indicating sample output from a program use the <code><samp></code> tag.</p>
|
||||
<div class="bd-example">
|
||||
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">samp</span><span class="p">></span>This text is meant to be treated as sample output from a computer program.<span class="p"></</span><span class="nt">samp</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="tables">Tables</h2>
|
||||
<p>Tables are slightly adjusted to style <code><caption></code>s, collapse borders, and ensure consistent <code>text-align</code> throughout. Additional changes for borders, padding, and more come with <a href="/docs/5.1/content/tables/">the <code>.table</code> class</a>.</p>
|
||||
<div class="bd-example">
|
||||
<table>
|
||||
<caption>
|
||||
This is an example table, and this is its caption to describe the contents.
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
<th>Table heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h2 id="forms">Forms</h2>
|
||||
<p>Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:</p>
|
||||
<ul>
|
||||
<li><code><fieldset></code>s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.</li>
|
||||
<li><code><legend></code>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.</li>
|
||||
<li><code><label></code>s are set to <code>display: inline-block</code> to allow <code>margin</code> to be applied.</li>
|
||||
<li><code><input></code>s, <code><select></code>s, <code><textarea></code>s, and <code><button></code>s are mostly addressed by Normalize, but Reboot removes their <code>margin</code> and sets <code>line-height: inherit</code>, too.</li>
|
||||
<li><code><textarea></code>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.</li>
|
||||
<li><code><button></code>s and <code><input></code> button elements have <code>cursor: pointer</code> when <code>:not(:disabled)</code>.</li>
|
||||
</ul>
|
||||
<p>These changes, and more, are demonstrated below.</p>
|
||||
<form class="bd-example">
|
||||
<fieldset>
|
||||
<legend>Example legend</legend>
|
||||
<p>
|
||||
<label for="input">Example input</label>
|
||||
<input type="text" id="input" placeholder="Example input">
|
||||
</p>
|
||||
<p>
|
||||
<label for="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="">
|
||||
Check this checkbox
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Option one is this and that
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label for="textarea">Example textarea</label>
|
||||
<textarea id="textarea" rows="3"></textarea>
|
||||
</p>
|
||||
<p>
|
||||
<label for="date">Example date</label>
|
||||
<input type="date" id="date">
|
||||
</p>
|
||||
<p>
|
||||
<label for="time">Example time</label>
|
||||
<input type="time" id="time">
|
||||
</p>
|
||||
<p>
|
||||
<label for="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>
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="date--color-input-support">Date & color input support</h5>
|
||||
<p>Keep in mind date inputs are <a href="https://caniuse.com/input-datetime">not fully supported</a> by all browsers, namely Safari.
|
||||
</div>
|
||||
|
||||
<h3 id="pointers-on-buttons">Pointers on buttons</h3>
|
||||
<p>Reboot includes an enhancement for <code>role="button"</code> to change the default cursor to <code>pointer</code>. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <code><button></code> elements, which get their own <code>cursor</code> change.</p>
|
||||
<div class="bd-example">
|
||||
<span role="button" tabindex="0">Non-button element button</span>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">span</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span>Non-button element button<span class="p"></</span><span class="nt">span</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="misc-elements">Misc elements</h2>
|
||||
<h3 id="address">Address</h3>
|
||||
<p>The <code><address></code> element is updated to reset the browser default <code>font-style</code> from <code>italic</code> to <code>normal</code>. <code>line-height</code> is also now inherited, and <code>margin-bottom: 1rem</code> has been added. <code><address></code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <code><br></code>.</p>
|
||||
<div class="bd-example">
|
||||
<address>
|
||||
<strong>Twitter, Inc.</strong><br>
|
||||
1355 Market St, Suite 900<br>
|
||||
San Francisco, CA 94103<br>
|
||||
<abbr title="Phone">P:</abbr> (123) 456-7890
|
||||
</address>
|
||||
<address>
|
||||
<strong>Full Name</strong><br>
|
||||
<a href="mailto:first.last@example.com">first.last@example.com</a>
|
||||
</address>
|
||||
</div>
|
||||
<h3 id="blockquote">Blockquote</h3>
|
||||
<p>The default <code>margin</code> on blockquotes is <code>1em 40px</code>, so we reset that to <code>0 0 1rem</code> for something more consistent with other elements.</p>
|
||||
<div class="bd-example">
|
||||
<blockquote class="blockquote">
|
||||
<p>A well-known quote, contained in a blockquote element.</p>
|
||||
</blockquote>
|
||||
<p>Someone famous in <cite title="Source Title">Source Title</cite></p>
|
||||
</div>
|
||||
<h3 id="inline-elements">Inline elements</h3>
|
||||
<p>The <code><abbr></code> element receives basic styling to make it stand out amongst paragraph text.</p>
|
||||
<div class="bd-example">
|
||||
Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
|
||||
</div>
|
||||
<h3 id="summary">Summary</h3>
|
||||
<p>The default <code>cursor</code> on summary is <code>text</code>, so we reset that to <code>pointer</code> to convey that the element can be interacted with by clicking on it.</p>
|
||||
<div class="bd-example">
|
||||
<details>
|
||||
<summary>Some details</summary>
|
||||
<p>More info about the details.</p>
|
||||
</details>
|
||||
<details open>
|
||||
<summary>Even more details</summary>
|
||||
<p>Here are even more details about the details.</p>
|
||||
</details>
|
||||
</div>
|
||||
<h2 id="html5-hidden-attribute">HTML5 <code>[hidden]</code> attribute</h2>
|
||||
<p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code>[hidden]</code></a>, which is styled as <code>display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code>[hidden] { display: none !important; }</code> to help prevent its <code>display</code> from getting accidentally overridden.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">hidden</span><span class="p">></span>
|
||||
</code></pre></div><div class="bd-callout bd-callout-warning">
|
||||
<h5 id="jquery-incompatibility">jQuery incompatibility</h5>
|
||||
<p><code>[hidden]</code> is not compatible with jQuery’s <code>$(...).hide()</code> and <code>$(...).show()</code> methods. Therefore, we don’t currently especially endorse <code>[hidden]</code> over other techniques for managing the <code>display</code> of elements.
|
||||
</div>
|
||||
|
||||
<p>To merely toggle the visibility of an element, meaning its <code>display</code> is not modified and the element can still affect the flow of the document, use <a href="/docs/5.1/utilities/visibility/">the <code>.invisible</code> class</a> instead.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><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"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.1/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.1.0.</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.1/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</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>
|
||||
</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.1/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/getting-started/parcel/">Parcel</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">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</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">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
<script src="/docs/5.1/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
2126
docs/5.1/content/tables/index.html
Normal file
2126
docs/5.1/content/tables/index.html
Normal file
File diff suppressed because it is too large
Load Diff
901
docs/5.1/content/typography/index.html
Normal file
901
docs/5.1/content/typography/index.html
Normal file
@@ -0,0 +1,901 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.87.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.1">
|
||||
|
||||
<title>Typography · Bootstrap v5.1</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/content/typography/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.1/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#7952b3">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Typography">
|
||||
<meta name="twitter:description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-social.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/5.1/content/typography/">
|
||||
<meta property="og:title" content="Typography">
|
||||
<meta property="og:description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1000">
|
||||
<meta property="og:image:height" content="500">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy 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>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||||
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||
<a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><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"/></svg>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||||
<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"/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="bdNavbar">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.1/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="/docs/5.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-md-none text-white-50">
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
<small class="d-md-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-md-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||||
<small class="d-md-none ms-2">Slack</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-md-auto">
|
||||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
<small class="d-md-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.1/getting-started/download/">Download</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.1">
|
||||
</form>
|
||||
|
||||
<div class="dropdown ms-3">
|
||||
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-none d-lg-inline">Bootstrap</span> v5.1
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.1/">Latest (5.0.x)</a></li>
|
||||
<li><hr class="dropdown-divider"></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>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
|
||||
<title>Expand</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||||
</svg>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" fill="currentColor" viewBox="0 0 16 16">
|
||||
<title>Collapse</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="container-xxl my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||||
Getting started
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="getting-started-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
<li><a href="/docs/5.1/getting-started/contribute/" class="d-inline-flex align-items-center rounded">Contribute</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||||
Customize
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="customize-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.1/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||||
<li><a href="/docs/5.1/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||||
<li><a href="/docs/5.1/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||||
<li><a href="/docs/5.1/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||||
<li><a href="/docs/5.1/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||||
<li><a href="/docs/5.1/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||||
Layout
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="layout-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||||
<li><a href="/docs/5.1/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||||
<li><a href="/docs/5.1/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||||
<li><a href="/docs/5.1/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||||
<li><a href="/docs/5.1/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||||
<li><a href="/docs/5.1/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||||
<li><a href="/docs/5.1/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||||
<li><a href="/docs/5.1/layout/css-grid/" class="d-inline-flex align-items-center rounded">CSS Grid</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="true" aria-current="true">
|
||||
Content
|
||||
</button>
|
||||
|
||||
<div class="collapse show" id="content-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||||
<li><a href="/docs/5.1/content/typography/" class="d-inline-flex align-items-center rounded active" aria-current="page">Typography</a></li>
|
||||
<li><a href="/docs/5.1/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||||
<li><a href="/docs/5.1/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||||
<li><a href="/docs/5.1/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||||
Forms
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="forms-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.1/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||||
<li><a href="/docs/5.1/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||||
<li><a href="/docs/5.1/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||||
<li><a href="/docs/5.1/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||||
<li><a href="/docs/5.1/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||||
<li><a href="/docs/5.1/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||||
<li><a href="/docs/5.1/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||||
<li><a href="/docs/5.1/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="false">
|
||||
Components
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="components-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||||
<li><a href="/docs/5.1/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||||
<li><a href="/docs/5.1/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||||
<li><a href="/docs/5.1/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||||
<li><a href="/docs/5.1/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||||
<li><a href="/docs/5.1/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||||
<li><a href="/docs/5.1/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||||
<li><a href="/docs/5.1/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||||
<li><a href="/docs/5.1/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||||
<li><a href="/docs/5.1/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||||
<li><a href="/docs/5.1/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||||
<li><a href="/docs/5.1/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||||
<li><a href="/docs/5.1/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.1/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.1/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.1/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.1/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.1/components/placeholders/" class="d-inline-flex align-items-center rounded">Placeholders</a></li>
|
||||
<li><a href="/docs/5.1/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.1/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
<li><a href="/docs/5.1/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
||||
<li><a href="/docs/5.1/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||||
<li><a href="/docs/5.1/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||||
<li><a href="/docs/5.1/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||||
Helpers
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="helpers-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||||
<li><a href="/docs/5.1/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||||
<li><a href="/docs/5.1/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||||
<li><a href="/docs/5.1/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||
<li><a href="/docs/5.1/helpers/stacks/" class="d-inline-flex align-items-center rounded">Stacks</a></li>
|
||||
<li><a href="/docs/5.1/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||||
<li><a href="/docs/5.1/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||||
<li><a href="/docs/5.1/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||||
<li><a href="/docs/5.1/helpers/vertical-rule/" class="d-inline-flex align-items-center rounded">Vertical rule</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||||
Utilities
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="utilities-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||||
<li><a href="/docs/5.1/utilities/background/" class="d-inline-flex align-items-center rounded">Background</a></li>
|
||||
<li><a href="/docs/5.1/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||||
<li><a href="/docs/5.1/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||||
<li><a href="/docs/5.1/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||||
<li><a href="/docs/5.1/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||||
<li><a href="/docs/5.1/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||||
<li><a href="/docs/5.1/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||||
<li><a href="/docs/5.1/utilities/opacity/" class="d-inline-flex align-items-center rounded">Opacity</a></li>
|
||||
<li><a href="/docs/5.1/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||||
<li><a href="/docs/5.1/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||||
<li><a href="/docs/5.1/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||||
<li><a href="/docs/5.1/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||||
<li><a href="/docs/5.1/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||||
<li><a href="/docs/5.1/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||||
<li><a href="/docs/5.1/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||||
<li><a href="/docs/5.1/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||||
Extend
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="extend-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||||
<li><a href="/docs/5.1/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||||
About
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="about-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="/docs/5.1/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||||
<li><a href="/docs/5.1/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||||
<li><a href="/docs/5.1/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||||
<li><a href="/docs/5.1/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||||
<li><a href="/docs/5.1/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="my-3 mx-4 border-top"></li>
|
||||
<li>
|
||||
<a href="/docs/5.1/migration/" class="d-inline-flex align-items-center rounded">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro ps-lg-4">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.1/content/typography.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Typography</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#global-settings">Global settings</a></li>
|
||||
<li><a href="#headings">Headings</a>
|
||||
<ul>
|
||||
<li><a href="#customizing-headings">Customizing headings</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#display-headings">Display headings</a></li>
|
||||
<li><a href="#lead">Lead</a></li>
|
||||
<li><a href="#inline-text-elements">Inline text elements</a></li>
|
||||
<li><a href="#text-utilities">Text utilities</a></li>
|
||||
<li><a href="#abbreviations">Abbreviations</a></li>
|
||||
<li><a href="#blockquotes">Blockquotes</a>
|
||||
<ul>
|
||||
<li><a href="#naming-a-source">Naming a source</a></li>
|
||||
<li><a href="#alignment">Alignment</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#lists">Lists</a>
|
||||
<ul>
|
||||
<li><a href="#unstyled">Unstyled</a></li>
|
||||
<li><a href="#inline">Inline</a></li>
|
||||
<li><a href="#description-list-alignment">Description list alignment</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#responsive-font-sizes">Responsive font sizes</a></li>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#mixins">Mixins</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
<h2 id="global-settings">Global settings</h2>
|
||||
<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <a href="/docs/5.1/utilities/text/">textual utility classes</a>.</p>
|
||||
<ul>
|
||||
<li>Use a <a href="/docs/5.1/content/reboot/#native-font-stack">native font stack</a> that selects the best <code>font-family</code> for each OS and device.</li>
|
||||
<li>For a more inclusive and accessible type scale, we use the browser’s default root <code>font-size</code> (typically 16px) so visitors can customize their browser defaults as needed.</li>
|
||||
<li>Use the <code>$font-family-base</code>, <code>$font-size-base</code>, and <code>$line-height-base</code> attributes as our typographic base applied to the <code><body></code>.</li>
|
||||
<li>Set the global link color via <code>$link-color</code>.</li>
|
||||
<li>Use <code>$body-bg</code> to set a <code>background-color</code> on the <code><body></code> (<code>#fff</code> by default).</li>
|
||||
</ul>
|
||||
<p>These styles can be found within <code>_reboot.scss</code>, and the global variables are defined in <code>_variables.scss</code>. Make sure to set <code>$font-size-base</code> in <code>rem</code>.</p>
|
||||
<h2 id="headings">Headings</h2>
|
||||
<p>All HTML headings, <code><h1></code> through <code><h6></code>, are available.</p>
|
||||
<table 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 class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>h1. Bootstrap heading<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>h2. Bootstrap heading<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h3</span><span class="p">></span>h3. Bootstrap heading<span class="p"></</span><span class="nt">h3</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h4</span><span class="p">></span>h4. Bootstrap heading<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span><span class="p">></span>h5. Bootstrap heading<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h6</span><span class="p">></span>h6. Bootstrap heading<span class="p"></</span><span class="nt">h6</span><span class="p">></span>
|
||||
</code></pre></div><p><code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
|
||||
<div class="bd-example">
|
||||
<p class="h1">h1. Bootstrap heading</p>
|
||||
<p class="h2">h2. Bootstrap heading</p>
|
||||
<p class="h3">h3. Bootstrap heading</p>
|
||||
<p class="h4">h4. Bootstrap heading</p>
|
||||
<p class="h5">h5. Bootstrap heading</p>
|
||||
<p class="h6">h6. Bootstrap heading</p>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h1"</span><span class="p">></span>h1. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h2"</span><span class="p">></span>h2. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h3"</span><span class="p">></span>h3. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h4"</span><span class="p">></span>h4. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h5"</span><span class="p">></span>h5. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h6"</span><span class="p">></span>h6. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="customizing-headings">Customizing headings</h3>
|
||||
<p>Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.</p>
|
||||
<div class="bd-example">
|
||||
<h3>
|
||||
Fancy display heading
|
||||
<small class="text-muted">With faded secondary text</small>
|
||||
</h3>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">h3</span><span class="p">></span>
|
||||
Fancy display heading
|
||||
<span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>With faded secondary text<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">h3</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="display-headings">Display headings</h2>
|
||||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
|
||||
<div class="bd-example">
|
||||
<div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
|
||||
<div class="display-2 pb-3 mb-3 border-bottom">Display 2</div>
|
||||
<div class="display-3 pb-3 mb-3 border-bottom">Display 3</div>
|
||||
<div class="display-4 pb-3 mb-3 border-bottom">Display 4</div>
|
||||
<div class="display-5 pb-3 mb-3 border-bottom">Display 5</div>
|
||||
<div class="display-6">Display 6</div>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-1"</span><span class="p">></span>Display 1<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-2"</span><span class="p">></span>Display 2<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-3"</span><span class="p">></span>Display 3<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-4"</span><span class="p">></span>Display 4<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-5"</span><span class="p">></span>Display 5<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-6"</span><span class="p">></span>Display 6<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
</code></pre></div><p>Display headings are configured via the <code>$display-font-sizes</code> Sass map and two variables, <code>$display-font-weight</code> and <code>$display-line-height</code>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$display-font-sizes</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="na">1</span><span class="o">:</span> <span class="mi">5</span><span class="kt">rem</span><span class="o">,</span>
|
||||
<span class="na">2</span><span class="o">:</span> <span class="mi">4</span><span class="mf">.5</span><span class="kt">rem</span><span class="o">,</span>
|
||||
<span class="na">3</span><span class="o">:</span> <span class="mi">4</span><span class="kt">rem</span><span class="o">,</span>
|
||||
<span class="na">4</span><span class="o">:</span> <span class="mi">3</span><span class="mf">.5</span><span class="kt">rem</span><span class="o">,</span>
|
||||
<span class="na">5</span><span class="o">:</span> <span class="mi">3</span><span class="kt">rem</span><span class="o">,</span>
|
||||
<span class="na">6</span><span class="o">:</span> <span class="mi">2</span><span class="mf">.5</span><span class="kt">rem</span>
|
||||
<span class="p">);</span>
|
||||
|
||||
<span class="nv">$display-font-weight</span><span class="o">:</span> <span class="mi">300</span><span class="p">;</span>
|
||||
<span class="nv">$display-line-height</span><span class="o">:</span> <span class="nv">$headings-line-height</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h2 id="lead">Lead</h2>
|
||||
<p>Make a paragraph stand out by adding <code>.lead</code>.</p>
|
||||
<div class="bd-example">
|
||||
<p class="lead">
|
||||
This is a lead paragraph. It stands out from regular paragraphs.
|
||||
</p>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"lead"</span><span class="p">></span>
|
||||
This is a lead paragraph. It stands out from regular paragraphs.
|
||||
<span class="p"></</span><span class="nt">p</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="inline-text-elements">Inline text elements</h2>
|
||||
<p>Styling for common inline HTML5 elements.</p>
|
||||
<div class="bd-example">
|
||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||||
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
||||
<p><u>This line of text will render as underlined.</u></p>
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p><em>This line rendered as italicized text.</em></p>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span><span class="p">></span>You can use the mark tag to <span class="p"><</span><span class="nt">mark</span><span class="p">></span>highlight<span class="p"></</span><span class="nt">mark</span><span class="p">></span> text.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">del</span><span class="p">></span>This line of text is meant to be treated as deleted text.<span class="p"></</span><span class="nt">del</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">s</span><span class="p">></span>This line of text is meant to be treated as no longer accurate.<span class="p"></</span><span class="nt">s</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">ins</span><span class="p">></span>This line of text is meant to be treated as an addition to the document.<span class="p"></</span><span class="nt">ins</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">u</span><span class="p">></span>This line of text will render as underlined.<span class="p"></</span><span class="nt">u</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">small</span><span class="p">></span>This line of text is meant to be treated as fine print.<span class="p"></</span><span class="nt">small</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">strong</span><span class="p">></span>This line rendered as bold text.<span class="p"></</span><span class="nt">strong</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">em</span><span class="p">></span>This line rendered as italicized text.<span class="p"></</span><span class="nt">em</span><span class="p">></</span><span class="nt">p</span><span class="p">></span></code></pre></div>
|
||||
<p>Beware that those tags should be used for semantic purpose:</p>
|
||||
<ul>
|
||||
<li><code><mark></code> represents text which is marked or highlighted for reference or notation purposes.</li>
|
||||
<li><code><small></code> represents side-comments and small print, like copyright and legal text.</li>
|
||||
<li><code><s></code> represents element that are no longer relevant or no longer accurate.</li>
|
||||
<li><code><u></code> represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.</li>
|
||||
</ul>
|
||||
<p>If you want to style your text, you should use the following classes instead:</p>
|
||||
<ul>
|
||||
<li><code>.mark</code> will apply the same styles as <code><mark></code>.</li>
|
||||
<li><code>.small</code> will apply the same styles as <code><small></code>.</li>
|
||||
<li><code>.text-decoration-underline</code> will apply the same styles as <code><u></code>.</li>
|
||||
<li><code>.text-decoration-line-through</code> will apply the same styles as <code><s></code>.</li>
|
||||
</ul>
|
||||
<p>While not shown above, feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance, while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
<h2 id="text-utilities">Text utilities</h2>
|
||||
<p>Change text alignment, transform, style, weight, line-height, decoration and color with our <a href="/docs/5.1/utilities/text/">text utilities</a> and <a href="/docs/5.1/utilities/colors/">color utilities</a>.</p>
|
||||
<h2 id="abbreviations">Abbreviations</h2>
|
||||
<p>Stylized implementation of HTML’s <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.</p>
|
||||
<p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
|
||||
<div class="bd-example">
|
||||
<p><abbr title="attribute">attr</abbr></p>
|
||||
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">abbr</span> <span class="na">title</span><span class="o">=</span><span class="s">"attribute"</span><span class="p">></span>attr<span class="p"></</span><span class="nt">abbr</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">abbr</span> <span class="na">title</span><span class="o">=</span><span class="s">"HyperText Markup Language"</span> <span class="na">class</span><span class="o">=</span><span class="s">"initialism"</span><span class="p">></span>HTML<span class="p"></</span><span class="nt">abbr</span><span class="p">></</span><span class="nt">p</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="blockquotes">Blockquotes</h2>
|
||||
<p>For quoting blocks of content from another source within your document. Wrap <code><blockquote class="blockquote"></code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.</p>
|
||||
<div class="bd-example">
|
||||
<blockquote class="blockquote">
|
||||
<p>A well-known quote, contained in a blockquote element.</p>
|
||||
</blockquote>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="naming-a-source">Naming a source</h3>
|
||||
<p>The HTML spec requires that blockquote attribution be placed outside the <code><blockquote></code>. When providing attribution, wrap your <code><blockquote></code> in a <code><figure></code> and use a <code><figcaption></code> or a block level element (e.g., <code><p></code>) with the <code>.blockquote-footer</code> class. Be sure to wrap the name of the source work in <code><cite></code> as well.</p>
|
||||
<div class="bd-example">
|
||||
<figure>
|
||||
<blockquote class="blockquote">
|
||||
<p>A well-known quote, contained in a blockquote element.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">figure</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">figcaption</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>
|
||||
Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">figure</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="alignment">Alignment</h3>
|
||||
<p>Use text utilities as needed to change the alignment of your blockquote.</p>
|
||||
<div class="bd-example">
|
||||
<figure class="text-center">
|
||||
<blockquote class="blockquote">
|
||||
<p>A well-known quote, contained in a blockquote element.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">figure</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-center"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">figcaption</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>
|
||||
Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">figure</span><span class="p">></span></code></pre></div>
|
||||
<div class="bd-example">
|
||||
<figure class="text-end">
|
||||
<blockquote class="blockquote">
|
||||
<p>A well-known quote, contained in a blockquote element.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">figure</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-end"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">figcaption</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>
|
||||
Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">figure</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="lists">Lists</h2>
|
||||
<h3 id="unstyled">Unstyled</h3>
|
||||
<p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
|
||||
<div class="bd-example">
|
||||
<ul class="list-unstyled">
|
||||
<li>This is a list.</li>
|
||||
<li>It appears completely unstyled.</li>
|
||||
<li>Structurally, it's still a list.</li>
|
||||
<li>However, this style only applies to immediate child elements.</li>
|
||||
<li>Nested lists:
|
||||
<ul>
|
||||
<li>are unaffected by this style</li>
|
||||
<li>will still show a bullet</li>
|
||||
<li>and have appropriate left margin</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This may still come in handy in some situations.</li>
|
||||
</ul>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-unstyled"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>This is a list.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>It appears completely unstyled.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>Structurally, it's still a list.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>However, this style only applies to immediate child elements.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>Nested lists:
|
||||
<span class="p"><</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>are unaffected by this style<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>will still show a bullet<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>and have appropriate left margin<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>This may still come in handy in some situations.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="inline">Inline</h3>
|
||||
<p>Remove a list’s bullets and apply some light <code>margin</code> with a combination of two classes, <code>.list-inline</code> and <code>.list-inline-item</code>.</p>
|
||||
<div class="bd-example">
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item">This is a list item.</li>
|
||||
<li class="list-inline-item">And another one.</li>
|
||||
<li class="list-inline-item">But they're displayed inline.</li>
|
||||
</ul>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline-item"</span><span class="p">></span>This is a list item.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline-item"</span><span class="p">></span>And another one.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline-item"</span><span class="p">></span>But they're displayed inline.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||
<h3 id="description-list-alignment">Description list alignment</h3>
|
||||
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code>.text-truncate</code> class to truncate the text with an ellipsis.</p>
|
||||
<div class="bd-example">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">Description lists</dt>
|
||||
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
|
||||
<dt class="col-sm-3">Term</dt>
|
||||
<dd class="col-sm-9">
|
||||
<p>Definition for the term.</p>
|
||||
<p>And some more placeholder definition text.</p>
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Another term</dt>
|
||||
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
|
||||
|
||||
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
|
||||
|
||||
<dt class="col-sm-3">Nesting</dt>
|
||||
<dd class="col-sm-9">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-4">Nested definition list</dt>
|
||||
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">dl</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Description lists<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>A description list is perfect for defining terms.<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Term<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>Definition for the term.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>And some more placeholder definition text.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Another term<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>This definition is short, so no extra paragraphs or anything.<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3 text-truncate"</span><span class="p">></span>Truncated term is truncated<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>This can be useful when space is tight. Adds an ellipsis at the end.<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Nesting<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dl</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-4"</span><span class="p">></span>Nested definition list<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-8"</span><span class="p">></span>I heard you like definition lists. Let me put a definition list inside your definition list.<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">dl</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">dl</span><span class="p">></span></code></pre></div>
|
||||
<h2 id="responsive-font-sizes">Responsive font sizes</h2>
|
||||
<p>In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the <a href="/docs/5.1/getting-started/rfs/">RFS page</a> to find out how this works.</p>
|
||||
<h2 id="sass">Sass</h2>
|
||||
<h3 id="variables">Variables</h3>
|
||||
<p>Headings have some dedicated variables for sizing and spacing.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$headings-margin-bottom</span><span class="o">:</span> <span class="nv">$spacer</span> <span class="o">*</span> <span class="mf">.5</span><span class="p">;</span>
|
||||
<span class="nv">$headings-font-family</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$headings-font-style</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
<span class="nv">$headings-font-weight</span><span class="o">:</span> <span class="mi">500</span><span class="p">;</span>
|
||||
<span class="nv">$headings-line-height</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.2</span><span class="p">;</span>
|
||||
<span class="nv">$headings-color</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>Miscellaneous typography elements covered here and in <a href="/docs/5.1/content/reboot/">Reboot</a> also have dedicated variables.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$lead-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="mi">1</span><span class="mf">.25</span><span class="p">;</span>
|
||||
<span class="nv">$lead-font-weight</span><span class="o">:</span> <span class="mi">300</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$small-font-size</span><span class="o">:</span> <span class="mf">.875</span><span class="kt">em</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$sub-sup-font-size</span><span class="o">:</span> <span class="mf">.75</span><span class="kt">em</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$text-muted</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$initialism-font-size</span><span class="o">:</span> <span class="nv">$small-font-size</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$blockquote-margin-y</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$blockquote-font-size</span><span class="o">:</span> <span class="nv">$font-size-base</span> <span class="o">*</span> <span class="mi">1</span><span class="mf">.25</span><span class="p">;</span>
|
||||
<span class="nv">$blockquote-footer-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
|
||||
<span class="nv">$blockquote-footer-font-size</span><span class="o">:</span> <span class="nv">$small-font-size</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$hr-margin-y</span><span class="o">:</span> <span class="nv">$spacer</span><span class="p">;</span>
|
||||
<span class="nv">$hr-color</span><span class="o">:</span> <span class="ni">inherit</span><span class="p">;</span>
|
||||
<span class="nv">$hr-height</span><span class="o">:</span> <span class="nv">$border-width</span><span class="p">;</span>
|
||||
<span class="nv">$hr-opacity</span><span class="o">:</span> <span class="mf">.25</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$legend-margin-bottom</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$legend-font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
<span class="nv">$legend-font-weight</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$mark-padding</span><span class="o">:</span> <span class="mf">.2</span><span class="kt">em</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$dt-font-weight</span><span class="o">:</span> <span class="nv">$font-weight-bold</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$nested-kbd-font-weight</span><span class="o">:</span> <span class="nv">$font-weight-bold</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$list-inline-padding</span><span class="o">:</span> <span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
|
||||
|
||||
<span class="nv">$mark-bg</span><span class="o">:</span> <span class="mh">#fcf8e3</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3 id="mixins">Mixins</h3>
|
||||
<p>There are no dedicated mixins for typography, but Bootstrap does use <a href="/docs/5.1/getting-started/rfs/">Responsive Font Sizing (RFS)</a>.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer py-5 mt-5 bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><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"/></svg>
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.1/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.1.0.</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.1/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/examples/">Examples</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>
|
||||
</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.1/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/5.1/getting-started/parcel/">Parcel</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">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</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">Issues</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
||||
<script src="/docs/5.1/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user