mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-22 19:54:22 +01:00
Add v4.5.0 docs. (#30791)
This commit is contained in:
XhmikosR
GitHub
parent
acd9c434f0
commit
85bad3b5ad
@ -2,10 +2,10 @@
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.4/about/overview/">
|
||||
<script>location="https://getbootstrap.com/docs/4.4/about/overview/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.4/about/overview/">
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/overview/">
|
||||
<script>location="https://getbootstrap.com/docs/4.5/about/overview/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.5/about/overview/">
|
||||
<meta name="robots" content="noindex">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.4/about/overview/">Click here if you are not redirected.</a>
|
||||
<a href="https://getbootstrap.com/docs/4.5/about/overview/">Click here if you are not redirected.</a>
|
||||
</html>
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.4/browser-bugs/">
|
||||
<script>location="https://getbootstrap.com/docs/4.4/browser-bugs/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.4/browser-bugs/">
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/browser-bugs/">
|
||||
<script>location="https://getbootstrap.com/docs/4.5/browser-bugs/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.5/browser-bugs/">
|
||||
<meta name="robots" content="noindex">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.4/browser-bugs/">Click here if you are not redirected.</a>
|
||||
<a href="https://getbootstrap.com/docs/4.5/browser-bugs/">Click here if you are not redirected.</a>
|
||||
</html>
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.4/components/alerts/">
|
||||
<script>location="https://getbootstrap.com/docs/4.4/components/alerts/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.4/components/alerts/">
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/alerts/">
|
||||
<script>location="https://getbootstrap.com/docs/4.5/components/alerts/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.5/components/alerts/">
|
||||
<meta name="robots" content="noindex">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.4/components/alerts/">Click here if you are not redirected.</a>
|
||||
<a href="https://getbootstrap.com/docs/4.5/components/alerts/">Click here if you are not redirected.</a>
|
||||
</html>
|
||||
|
||||
567
docs/4.5/about/brand/index.html
Normal file
567
docs/4.5/about/brand/index.html
Normal file
@ -0,0 +1,567 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Brand guidelines · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/brand/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Brand guidelines">
|
||||
<meta name="twitter:description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/about/brand/">
|
||||
<meta property="og:title" content="Brand guidelines">
|
||||
<meta property="og:description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#mark-and-logo">Mark and logo</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#download-mark">Download mark</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#name">Name</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#colors">Colors</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Brand guidelines</h1>
|
||||
<p class="bd-lead">Documentation and examples for Bootstrap’s logo and brand usage guidelines.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Have a need for Bootstrap’s brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp’s <a href="https://mailchimp.com/about/brand-assets/">Brand Assets</a>.</p>
|
||||
|
||||
<h2 id="mark-and-logo">Mark and logo</h2>
|
||||
|
||||
<p>Use either the Bootstrap mark (a capital <strong>B</strong>) or the standard logo (just <strong>Bootstrap</strong>). It should always appear in San Francisco Display Semibold. <strong>Do not use the Twitter bird</strong> in association with Bootstrap.</p>
|
||||
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<img class="svg" src="/docs/4.5/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy" />
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
<img class="svg" src="/docs/4.5/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<span class="h1">Bootstrap</span>
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
<span class="h1">Bootstrap</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="download-mark">Download mark</h2>
|
||||
|
||||
<p>Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.</p>
|
||||
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<img class="svg" src="/docs/4.5/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy" />
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
<img class="svg" src="/docs/4.5/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy" />
|
||||
</div>
|
||||
<div class="bd-brand-item inverse">
|
||||
<img class="svg" src="/docs/4.5/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="name">Name</h2>
|
||||
|
||||
<p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations except for one, a capital <strong>B</strong>.</p>
|
||||
|
||||
<div class="bd-brand-logos">
|
||||
<div class="bd-brand-item">
|
||||
<span class="h3">Bootstrap</span>
|
||||
<strong class="text-success">Right</strong>
|
||||
</div>
|
||||
<div class="bd-brand-item">
|
||||
<span class="h3 text-muted">BootStrap</span>
|
||||
<strong class="text-warning">Wrong</strong>
|
||||
</div>
|
||||
<div class="bd-brand-item">
|
||||
<span class="h3 text-muted">Twitter Bootstrap</span>
|
||||
<strong class="text-warning">Wrong</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="colors">Colors</h2>
|
||||
|
||||
<p>Our docs and branding use a handful of primary colors to differentiate what <em>is</em> Bootstrap from what <em>is in</em> Bootstrap. In other words, if it’s purple, it’s representative of Bootstrap.</p>
|
||||
|
||||
<div class="bd-brand">
|
||||
<div class="color-swatches">
|
||||
<div class="color-swatch bd-purple"></div>
|
||||
<div class="color-swatch bd-purple-light"></div>
|
||||
<div class="color-swatch bd-purple-lighter"></div>
|
||||
<div class="color-swatch bd-gray"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
11
docs/4.5/about/index.html
Normal file
11
docs/4.5/about/index.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/overview/">
|
||||
<script>location="https://getbootstrap.com/docs/4.5/about/overview/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.5/about/overview/">
|
||||
<meta name="robots" content="noindex">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.5/about/overview/">Click here if you are not redirected.</a>
|
||||
</html>
|
||||
523
docs/4.5/about/license/index.html
Normal file
523
docs/4.5/about/license/index.html
Normal file
@ -0,0 +1,523 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>License FAQs · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/license/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="License FAQs">
|
||||
<meta name="twitter:description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/about/license/">
|
||||
<meta property="og:title" content="License FAQs">
|
||||
<meta property="og:description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">License FAQs</h1>
|
||||
<p class="bd-lead">Commonly asked questions about Bootstrap’s open source license.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Bootstrap is released under the MIT license and is copyright 2020 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
|
||||
|
||||
<h4 id="it-requires-you-to">It requires you to:</h4>
|
||||
|
||||
<ul>
|
||||
<li>Keep the license and copyright notice included in Bootstrap’s CSS and JavaScript files when you use them in your works</li>
|
||||
</ul>
|
||||
|
||||
<h4 id="it-permits-you-to">It permits you to:</h4>
|
||||
|
||||
<ul>
|
||||
<li>Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes</li>
|
||||
<li>Use Bootstrap in packages or distributions that you create</li>
|
||||
<li>Modify the source code</li>
|
||||
<li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li>
|
||||
</ul>
|
||||
|
||||
<h4 id="it-forbids-you-to">It forbids you to:</h4>
|
||||
|
||||
<ul>
|
||||
<li>Hold the authors and license owners liable for damages as Bootstrap is provided without warranty</li>
|
||||
<li>Hold the creators or copyright holders of Bootstrap liable</li>
|
||||
<li>Redistribute any piece of Bootstrap without proper attribution</li>
|
||||
<li>Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution</li>
|
||||
<li>Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question</li>
|
||||
</ul>
|
||||
|
||||
<h4 id="it-does-not-require-you-to">It does not require you to:</h4>
|
||||
|
||||
<ul>
|
||||
<li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li>
|
||||
<li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
|
||||
</ul>
|
||||
|
||||
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/v4.5.0/LICENSE">in the project repository</a> for more information.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
505
docs/4.5/about/overview/index.html
Normal file
505
docs/4.5/about/overview/index.html
Normal file
@ -0,0 +1,505 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>About · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/overview/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="About">
|
||||
<meta name="twitter:description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/about/overview/">
|
||||
<meta property="og:title" content="About">
|
||||
<meta property="og:description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">About</h1>
|
||||
<p class="bd-lead">Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="team">Team</h2>
|
||||
|
||||
<p>Bootstrap is maintained by a <a href="https://github.com/orgs/twbs/people">small team of developers</a> on GitHub. We’re actively looking to grow this team and would love to hear from you if you’re excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.</p>
|
||||
|
||||
<h2 id="history">History</h2>
|
||||
|
||||
<p>Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p>
|
||||
|
||||
<p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/engineering/en_us/a/2010/hack-week.html">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
|
||||
|
||||
<p>Originally <a href="https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter.html">released</a> on <time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>, we’ve since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
|
||||
|
||||
<p>With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS’s flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.</p>
|
||||
|
||||
<h2 id="get-involved">Get involved</h2>
|
||||
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v4.5.0/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
565
docs/4.5/about/team/index.html
Normal file
565
docs/4.5/about/team/index.html
Normal file
@ -0,0 +1,565 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="An overview of the founding team and core contributors to Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Team · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/team/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Team">
|
||||
<meta name="twitter:description" content="An overview of the founding team and core contributors to Bootstrap.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/about/team/">
|
||||
<meta property="og:title" content="Team">
|
||||
<meta property="og:description" content="An overview of the founding team and core contributors to Bootstrap.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Team</h1>
|
||||
<p class="bd-lead">An overview of the founding team and core contributors to Bootstrap.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
|
||||
|
||||
<div class="list-group mb-3">
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/mdo">
|
||||
<img src="https://github.com/mdo.png" alt="@mdo" width="32" height="32" class="rounded mr-2" loading="lazy" />
|
||||
<span>
|
||||
<strong>Mark Otto</strong> @mdo
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
|
||||
<img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded mr-2" loading="lazy" />
|
||||
<span>
|
||||
<strong>Jacob Thornton</strong> @fat
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/cvrebert">
|
||||
<img src="https://github.com/cvrebert.png" alt="@cvrebert" width="32" height="32" class="rounded mr-2" loading="lazy" />
|
||||
<span>
|
||||
<strong>Chris Rebert</strong> @cvrebert
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
|
||||
<img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded mr-2" loading="lazy" />
|
||||
<span>
|
||||
<strong>XhmikosR</strong> @xhmikosr
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
|
||||
<img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded mr-2" loading="lazy" />
|
||||
<span>
|
||||
<strong>Patrick H. Lauke</strong> @patrickhlauke
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
|
||||
<img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded mr-2" loading="lazy" />
|
||||
<span>
|
||||
<strong>Gleb Mazovetskiy</strong> @glebm
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
|
||||
<img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded mr-2" loading="lazy" />
|
||||
<span>
|
||||
<strong>Johann-S</strong> @johann-s
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/andresgalante">
|
||||
<img src="https://github.com/andresgalante.png" alt="@andresgalante" width="32" height="32" class="rounded mr-2" loading="lazy" />
|
||||
<span>
|
||||
<strong>Andres Galante</strong> @andresgalante
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
|
||||
<img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded mr-2" loading="lazy" />
|
||||
<span>
|
||||
<strong>Martijn Cuppens</strong> @martijncuppens
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/ysds">
|
||||
<img src="https://github.com/ysds.png" alt="@ysds" width="32" height="32" class="rounded mr-2" loading="lazy" />
|
||||
<span>
|
||||
<strong>Shohei Yoshida</strong> @ysds
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v4.5.0/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
507
docs/4.5/about/translations/index.html
Normal file
507
docs/4.5/about/translations/index.html
Normal file
@ -0,0 +1,507 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Links to community-translated Bootstrap documentation sites.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Translations · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/about/translations/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Translations">
|
||||
<meta name="twitter:description" content="Links to community-translated Bootstrap documentation sites.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/about/translations/">
|
||||
<meta property="og:title" content="Translations">
|
||||
<meta property="og:description" content="Links to community-translated Bootstrap documentation sites.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Translations</h1>
|
||||
<p class="bd-lead">Links to community-translated Bootstrap documentation sites.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Community members have translated Bootstrap’s documentation into various languages. None are officially supported and they may not always be up to date.</p>
|
||||
|
||||
<ul>
|
||||
|
||||
<li><a href="https://bootstrap.hexschool.com/" hreflang="zh-tw">Bootstrap 4 繁體中文手冊 (中文(繁體))</a></li>
|
||||
|
||||
<li><a href="https://code.z01.com/v4/" hreflang="zh">Bootstrap 4 · 全球最流行的 HTML、CSS 和 JS 工具库。 (Chinese)</a></li>
|
||||
|
||||
<li><a href="https://getbootstrap.com.br/v4/" hreflang="pt-BR">Bootstrap 4 Português do Brasil (Brazilian Portuguese)</a></li>
|
||||
|
||||
<li><a href="https://getbootstrap.jp/" hreflang="ja">Bootstrap 4 日本語リファレンス (Japanese)</a></li>
|
||||
|
||||
<li><a href="https://getbootstrap.kr/" hreflang="ko">Bootstrap 4 한국어 문서 (Korean)</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p><strong>We don’t help organize or host translations, we just link to them.</strong></p>
|
||||
|
||||
<p>Finished a new or better translation? Open a pull request to add it to our list.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
5
docs/4.5/assets/brand/bootstrap-outline.svg
Normal file
5
docs/4.5/assets/brand/bootstrap-outline.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 180 612 612" focusable="false" role="img">
|
||||
<title>Bootstrap</title>
|
||||
<path d="M510 186c25.5 0 49.6 10 67.8 28.2S606 256.5 606 282v408c0 25.5-10 49.6-28.2 67.8S535.5 786 510 786H102c-25.5 0-49.6-10-67.8-28.2S6 715.5 6 690V282c0-25.5 10-49.6 28.2-67.8S76.5 186 102 186h408m0-6H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102z"/>
|
||||
<path d="M166.3 313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V619z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 957 B |
5
docs/4.5/assets/brand/bootstrap-punchout.svg
Normal file
5
docs/4.5/assets/brand/bootstrap-punchout.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 180 612 612" focusable="false" role="img">
|
||||
<title>Bootstrap</title>
|
||||
<path d="M383.5 521.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V619h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8-.1-17.6-5.3-31.2-15.8-40.6zm-15.3-72c10-8.5 15-20.8 15-36.8 0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.5h102c15 0 27.5-4.3 37.5-12.7z"/>
|
||||
<path d="M510 180H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102zm-55.8 429.8c-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 791 B |
BIN
docs/4.5/assets/brand/bootstrap-social-logo.png
Normal file
BIN
docs/4.5/assets/brand/bootstrap-social-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
docs/4.5/assets/brand/bootstrap-social.png
Normal file
BIN
docs/4.5/assets/brand/bootstrap-social.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
5
docs/4.5/assets/brand/bootstrap-solid.svg
Normal file
5
docs/4.5/assets/brand/bootstrap-solid.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612" focusable="false" role="img">
|
||||
<title>Bootstrap</title>
|
||||
<path fill="#563d7c" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/>
|
||||
<path fill="#fff" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 778 B |
8
docs/4.5/assets/css/docs.min.css
vendored
Normal file
8
docs/4.5/assets/css/docs.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
docs/4.5/assets/css/docs.min.css.map
Normal file
1
docs/4.5/assets/css/docs.min.css.map
Normal file
File diff suppressed because one or more lines are too long
BIN
docs/4.5/assets/img/bootstrap-icons.png
Normal file
BIN
docs/4.5/assets/img/bootstrap-icons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
docs/4.5/assets/img/bootstrap-icons@2x.png
Normal file
BIN
docs/4.5/assets/img/bootstrap-icons@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
BIN
docs/4.5/assets/img/bootstrap-themes-collage.png
Normal file
BIN
docs/4.5/assets/img/bootstrap-themes-collage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
docs/4.5/assets/img/bootstrap-themes-collage@2x.png
Normal file
BIN
docs/4.5/assets/img/bootstrap-themes-collage@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
BIN
docs/4.5/assets/img/bootstrap-themes.png
Normal file
BIN
docs/4.5/assets/img/bootstrap-themes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
docs/4.5/assets/img/bootstrap-themes@2x.png
Normal file
BIN
docs/4.5/assets/img/bootstrap-themes@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
BIN
docs/4.5/assets/img/examples/album.png
Normal file
BIN
docs/4.5/assets/img/examples/album.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
docs/4.5/assets/img/examples/album@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/album@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
docs/4.5/assets/img/examples/blog.png
Normal file
BIN
docs/4.5/assets/img/examples/blog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
docs/4.5/assets/img/examples/blog@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/blog@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
docs/4.5/assets/img/examples/carousel.png
Normal file
BIN
docs/4.5/assets/img/examples/carousel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
docs/4.5/assets/img/examples/carousel@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/carousel@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
docs/4.5/assets/img/examples/checkout.png
Normal file
BIN
docs/4.5/assets/img/examples/checkout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
docs/4.5/assets/img/examples/checkout@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/checkout@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
docs/4.5/assets/img/examples/cover.png
Normal file
BIN
docs/4.5/assets/img/examples/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
docs/4.5/assets/img/examples/cover@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/cover@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/4.5/assets/img/examples/dashboard.png
Normal file
BIN
docs/4.5/assets/img/examples/dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/4.5/assets/img/examples/dashboard@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/dashboard@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
docs/4.5/assets/img/examples/floating-labels.png
Normal file
BIN
docs/4.5/assets/img/examples/floating-labels.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
docs/4.5/assets/img/examples/floating-labels@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/floating-labels@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/4.5/assets/img/examples/grid.png
Normal file
BIN
docs/4.5/assets/img/examples/grid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
docs/4.5/assets/img/examples/grid@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/grid@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
docs/4.5/assets/img/examples/jumbotron.png
Normal file
BIN
docs/4.5/assets/img/examples/jumbotron.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
docs/4.5/assets/img/examples/jumbotron@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/jumbotron@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
docs/4.5/assets/img/examples/navbar-bottom.png
Normal file
BIN
docs/4.5/assets/img/examples/navbar-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
docs/4.5/assets/img/examples/navbar-bottom@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/navbar-bottom@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/4.5/assets/img/examples/navbar-fixed.png
Normal file
BIN
docs/4.5/assets/img/examples/navbar-fixed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/4.5/assets/img/examples/navbar-fixed@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/navbar-fixed@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
docs/4.5/assets/img/examples/navbar-static.png
Normal file
BIN
docs/4.5/assets/img/examples/navbar-static.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/4.5/assets/img/examples/navbar-static@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/navbar-static@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/4.5/assets/img/examples/navbars.png
Normal file
BIN
docs/4.5/assets/img/examples/navbars.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/4.5/assets/img/examples/navbars@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/navbars@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
docs/4.5/assets/img/examples/offcanvas.png
Normal file
BIN
docs/4.5/assets/img/examples/offcanvas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
docs/4.5/assets/img/examples/offcanvas@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/offcanvas@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
docs/4.5/assets/img/examples/pricing.png
Normal file
BIN
docs/4.5/assets/img/examples/pricing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/4.5/assets/img/examples/pricing@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/pricing@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
docs/4.5/assets/img/examples/product.png
Normal file
BIN
docs/4.5/assets/img/examples/product.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/4.5/assets/img/examples/product@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/product@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
docs/4.5/assets/img/examples/sign-in.png
Normal file
BIN
docs/4.5/assets/img/examples/sign-in.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
docs/4.5/assets/img/examples/sign-in@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/sign-in@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
docs/4.5/assets/img/examples/starter-template.png
Normal file
BIN
docs/4.5/assets/img/examples/starter-template.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
docs/4.5/assets/img/examples/starter-template@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/starter-template@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/4.5/assets/img/examples/sticky-footer-navbar.png
Normal file
BIN
docs/4.5/assets/img/examples/sticky-footer-navbar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/4.5/assets/img/examples/sticky-footer-navbar@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/sticky-footer-navbar@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
docs/4.5/assets/img/examples/sticky-footer.png
Normal file
BIN
docs/4.5/assets/img/examples/sticky-footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
docs/4.5/assets/img/examples/sticky-footer@2x.png
Normal file
BIN
docs/4.5/assets/img/examples/sticky-footer@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
docs/4.5/assets/img/favicons/android-chrome-192x192.png
Normal file
BIN
docs/4.5/assets/img/favicons/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
docs/4.5/assets/img/favicons/android-chrome-512x512.png
Normal file
BIN
docs/4.5/assets/img/favicons/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
docs/4.5/assets/img/favicons/apple-touch-icon.png
Normal file
BIN
docs/4.5/assets/img/favicons/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
9
docs/4.5/assets/img/favicons/browserconfig.xml
Normal file
9
docs/4.5/assets/img/favicons/browserconfig.xml
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="/docs/4.5/assets/img/favicons/mstile-150x150.png"/>
|
||||
<TileColor>#563d7c</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
BIN
docs/4.5/assets/img/favicons/favicon-16x16.png
Normal file
BIN
docs/4.5/assets/img/favicons/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 B |
BIN
docs/4.5/assets/img/favicons/favicon-32x32.png
Normal file
BIN
docs/4.5/assets/img/favicons/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 B |
BIN
docs/4.5/assets/img/favicons/favicon.ico
Normal file
BIN
docs/4.5/assets/img/favicons/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
20
docs/4.5/assets/img/favicons/manifest.json
Normal file
20
docs/4.5/assets/img/favicons/manifest.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "Bootstrap",
|
||||
"short_name": "Bootstrap",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/docs/4.5/assets/img/favicons/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/docs/4.5/assets/img/favicons/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"start_url": "/?utm_source=a2hs",
|
||||
"theme_color": "#563d7c",
|
||||
"background_color": "#563d7c",
|
||||
"display": "standalone"
|
||||
}
|
||||
BIN
docs/4.5/assets/img/favicons/mstile-144x144.png
Normal file
BIN
docs/4.5/assets/img/favicons/mstile-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
docs/4.5/assets/img/favicons/mstile-150x150.png
Normal file
BIN
docs/4.5/assets/img/favicons/mstile-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
docs/4.5/assets/img/favicons/mstile-310x150.png
Normal file
BIN
docs/4.5/assets/img/favicons/mstile-310x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
docs/4.5/assets/img/favicons/mstile-310x310.png
Normal file
BIN
docs/4.5/assets/img/favicons/mstile-310x310.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
docs/4.5/assets/img/favicons/mstile-70x70.png
Normal file
BIN
docs/4.5/assets/img/favicons/mstile-70x70.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
4
docs/4.5/assets/img/favicons/safari-pinned-tab.svg
Normal file
4
docs/4.5/assets/img/favicons/safari-pinned-tab.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="933.333" height="933.333" version="1" viewBox="0 0 700 700">
|
||||
<path d="M104.5.7C89.2 2.6 77.4 6.2 63.8 13.2 41.7 24.5 24.5 41.7 13.2 63.8 7.5 75.1 4.8 82.3 2.3 94 .6 102.1.5 114.3.5 350s.1 247.9 1.8 256c2.5 11.7 5.2 18.9 10.9 30.2 11.3 22.1 28.5 39.3 50.6 50.6 11.3 5.7 18.5 8.4 30.2 10.9 8.1 1.7 20.3 1.8 256 1.8s247.9-.1 256-1.8c11.7-2.5 18.9-5.2 30.2-10.9 22.1-11.3 39.3-28.5 50.6-50.6 5.7-11.3 8.4-18.5 10.9-30.2 1.7-8.1 1.8-20.3 1.8-256s-.1-247.9-1.8-256c-2.5-11.7-5.2-18.9-10.9-30.2C670.9 32.6 642.9 11 607 2.4 599.9.7 587.2.6 353.5.4 218.2.3 106.2.5 104.5.7zm315.3 153.6c47.4 9 75.3 30.5 85.6 65.9 5.1 17.8 5.6 43.1 1.1 60.3-2 7.5-7.9 20.3-12.2 26.4-8 11.3-21.9 22.8-36 30-3.5 1.7-6.3 3.5-6.3 3.9 0 .5 2.3 1.4 5.1 2 2.8.7 8.5 2.6 12.7 4.3 37.2 14.8 58.1 50.4 58.2 99 0 28.6-9 53.9-25.7 71.8-18.8 20.3-45.2 32.9-83.3 39.8-8.5 1.5-20.9 1.7-119.2 2l-109.8.4V151.9l110.8.4c95.5.3 111.8.6 119 2z"/>
|
||||
<path d="M262 266.5v56.6l65.3-.4c57.2-.3 65.9-.5 70.7-2 15.8-4.8 28.7-14.9 34.4-27.1 4.4-9.2 5.6-15.3 5.6-28.4-.1-25.1-7.5-39.8-24.3-47.7-14.1-6.7-14.2-6.7-86.4-7.2l-65.3-.5v56.7zm0 171.5v64.1l71.3-.3c69.8-.3 71.4-.4 79-2.6 11.4-3.2 19.2-7.7 27.2-15.7 12.1-12 16.8-24.9 16.8-46 0-20.8-5.1-34.3-17.3-45.9-7.9-7.4-15.8-11.6-28.1-14.7-8.1-2.1-10.5-2.2-78.6-2.6l-70.3-.5V438z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
22
docs/4.5/assets/js/docs.min.js
vendored
Normal file
22
docs/4.5/assets/js/docs.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
112
docs/4.5/assets/js/src/application.js
Normal file
112
docs/4.5/assets/js/src/application.js
Normal file
@ -0,0 +1,112 @@
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
/* global ClipboardJS: false, anchors: false, bsCustomFileInput: false */
|
||||
|
||||
(function ($) {
|
||||
'use strict'
|
||||
|
||||
$(function () {
|
||||
// Tooltip and popover demos
|
||||
$('.tooltip-demo').tooltip({
|
||||
selector: '[data-toggle="tooltip"]',
|
||||
container: 'body'
|
||||
})
|
||||
|
||||
$('[data-toggle="popover"]').popover()
|
||||
|
||||
$('.toast')
|
||||
.toast({
|
||||
autohide: false
|
||||
})
|
||||
.toast('show')
|
||||
|
||||
// Demos within modals
|
||||
$('.tooltip-test').tooltip()
|
||||
$('.popover-test').popover()
|
||||
|
||||
// Indeterminate checkbox example
|
||||
$('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
|
||||
|
||||
// Disable empty links in docs examples
|
||||
$('.bd-content [href="#"]').click(function (e) {
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
// Modal relatedTarget demo
|
||||
$('#exampleModal').on('show.bs.modal', function (event) {
|
||||
var $button = $(event.relatedTarget) // Button that triggered the modal
|
||||
var recipient = $button.data('whatever') // Extract info from data-* attributes
|
||||
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
|
||||
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
|
||||
var $modal = $(this)
|
||||
$modal.find('.modal-title').text('New message to ' + recipient)
|
||||
$modal.find('.modal-body input').val(recipient)
|
||||
})
|
||||
|
||||
// Activate animated progress bar
|
||||
$('.bd-toggle-animated-progress').on('click', function () {
|
||||
$(this).siblings('.progress').find('.progress-bar-striped').toggleClass('progress-bar-animated')
|
||||
})
|
||||
|
||||
// Insert copy to clipboard button before .highlight
|
||||
$('figure.highlight, div.highlight').each(function () {
|
||||
var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
|
||||
$(this).before(btnHtml)
|
||||
$('.btn-clipboard')
|
||||
.tooltip()
|
||||
.on('mouseleave', function () {
|
||||
// Explicitly hide tooltip, since after clicking it remains
|
||||
// focused (as it's a button), so tooltip would otherwise
|
||||
// remain visible until focus is moved away
|
||||
$(this).tooltip('hide')
|
||||
})
|
||||
})
|
||||
|
||||
var clipboard = new ClipboardJS('.btn-clipboard', {
|
||||
target: function (trigger) {
|
||||
return trigger.parentNode.nextElementSibling
|
||||
}
|
||||
})
|
||||
|
||||
clipboard.on('success', function (e) {
|
||||
$(e.trigger)
|
||||
.attr('title', 'Copied!')
|
||||
.tooltip('_fixTitle')
|
||||
.tooltip('show')
|
||||
.attr('title', 'Copy to clipboard')
|
||||
.tooltip('_fixTitle')
|
||||
|
||||
e.clearSelection()
|
||||
})
|
||||
|
||||
clipboard.on('error', function (e) {
|
||||
var modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
|
||||
var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
|
||||
|
||||
$(e.trigger)
|
||||
.attr('title', fallbackMsg)
|
||||
.tooltip('_fixTitle')
|
||||
.tooltip('show')
|
||||
.attr('title', 'Copy to clipboard')
|
||||
.tooltip('_fixTitle')
|
||||
})
|
||||
|
||||
anchors.options = {
|
||||
icon: '#'
|
||||
}
|
||||
anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
|
||||
$('.bd-content').children('h2, h3, h4, h5').wrapInner('<span class="bd-content-title"></span>')
|
||||
|
||||
bsCustomFileInput.init()
|
||||
})
|
||||
}(jQuery))
|
||||
47
docs/4.5/assets/js/src/ie-emulation-modes-warning.js
Normal file
47
docs/4.5/assets/js/src/ie-emulation-modes-warning.js
Normal file
@ -0,0 +1,47 @@
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
// Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
function emulatedIEMajorVersion() {
|
||||
var groups = /MSIE ([\d.]+)/.exec(window.navigator.userAgent)
|
||||
if (groups === null) {
|
||||
return null
|
||||
}
|
||||
var ieVersionNum = parseInt(groups[1], 10)
|
||||
var ieMajorVersion = Math.floor(ieVersionNum)
|
||||
return ieMajorVersion
|
||||
}
|
||||
|
||||
function actualNonEmulatedIEMajorVersion() {
|
||||
// Detects the actual version of IE in use, even if it's in an older-IE emulation mode.
|
||||
// IE JavaScript conditional compilation docs: https://msdn.microsoft.com/library/121hztk3%28v=vs.94%29.aspx
|
||||
// @cc_on docs: https://msdn.microsoft.com/library/8ka90k2e%28v=vs.94%29.aspx
|
||||
var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // eslint-disable-line no-new-func
|
||||
if (typeof jscriptVersion === 'undefined') {
|
||||
return 11 // IE11+ not in emulation mode
|
||||
}
|
||||
if (jscriptVersion < 9) {
|
||||
return 8 // IE8 (or lower; haven't tested on IE<8)
|
||||
}
|
||||
return jscriptVersion // IE9 or IE10 in any mode, or IE11 in non-IE11 mode
|
||||
}
|
||||
|
||||
var ua = window.navigator.userAgent
|
||||
if (ua.indexOf('Opera') > -1 || ua.indexOf('Presto') > -1) {
|
||||
return // Opera, which might pretend to be IE
|
||||
}
|
||||
var emulated = emulatedIEMajorVersion()
|
||||
if (emulated === null) {
|
||||
return // Not IE
|
||||
}
|
||||
var nonEmulated = actualNonEmulatedIEMajorVersion()
|
||||
|
||||
if (emulated !== nonEmulated) {
|
||||
// eslint-disable-next-line no-alert
|
||||
window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!')
|
||||
}
|
||||
}())
|
||||
59
docs/4.5/assets/js/src/search.js
Normal file
59
docs/4.5/assets/js/src/search.js
Normal file
@ -0,0 +1,59 @@
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
if (!window.docsearch) {
|
||||
return
|
||||
}
|
||||
|
||||
var inputElement = document.getElementById('search-input')
|
||||
var siteDocsVersion = inputElement.getAttribute('data-docs-version')
|
||||
|
||||
function getOrigin() {
|
||||
var location = window.location
|
||||
var origin = location.origin
|
||||
|
||||
if (!origin) {
|
||||
var port = location.port ? ':' + location.port : ''
|
||||
|
||||
origin = location.protocol + '//' + location.hostname + port
|
||||
}
|
||||
|
||||
return origin
|
||||
}
|
||||
|
||||
window.docsearch({
|
||||
apiKey: '5990ad008512000bba2cf951ccf0332f',
|
||||
indexName: 'bootstrap',
|
||||
inputSelector: '#search-input',
|
||||
algoliaOptions: {
|
||||
facetFilters: ['version:' + siteDocsVersion]
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
var currentUrl = getOrigin()
|
||||
var liveUrl = 'https://getbootstrap.com/'
|
||||
|
||||
hit.url = currentUrl.lastIndexOf(liveUrl, 0) === 0
|
||||
// On production, return the result as is
|
||||
? hit.url
|
||||
// On development or Netlify, replace `hit.url` with a trailing slash,
|
||||
// so that the result link is relative to the server root
|
||||
: hit.url.replace(liveUrl, '/')
|
||||
|
||||
// Prevent jumping to first header
|
||||
if (hit.anchor === 'content') {
|
||||
hit.url = hit.url.replace(/#content$/, '')
|
||||
hit.anchor = null
|
||||
}
|
||||
|
||||
return hit
|
||||
})
|
||||
},
|
||||
// Set debug to `true` if you want to inspect the dropdown
|
||||
debug: false
|
||||
})
|
||||
}())
|
||||
9
docs/4.5/assets/js/vendor/anchor.min.js
vendored
Normal file
9
docs/4.5/assets/js/vendor/anchor.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
docs/4.5/assets/js/vendor/bs-custom-file-input.min.js
vendored
Normal file
7
docs/4.5/assets/js/vendor/bs-custom-file-input.min.js
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* bsCustomFileInput v1.3.4 (https://github.com/Johann-S/bs-custom-file-input)
|
||||
* Copyright 2018 - 2020 Johann-S <johann.servoire@gmail.com>
|
||||
* Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE)
|
||||
*/
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).bsCustomFileInput=t()}(this,function(){"use strict";var s={CUSTOMFILE:'.custom-file input[type="file"]',CUSTOMFILELABEL:".custom-file-label",FORM:"form",INPUT:"input"},l=function(e){if(0<e.childNodes.length)for(var t=[].slice.call(e.childNodes),n=0;n<t.length;n++){var l=t[n];if(3!==l.nodeType)return l}return e},u=function(e){var t=e.bsCustomFileInput.defaultText,n=e.parentNode.querySelector(s.CUSTOMFILELABEL);n&&(l(n).textContent=t)},n=!!window.File,r=function(e){if(e.hasAttribute("multiple")&&n)return[].slice.call(e.files).map(function(e){return e.name}).join(", ");if(-1===e.value.indexOf("fakepath"))return e.value;var t=e.value.split("\\");return t[t.length-1]};function d(){var e=this.parentNode.querySelector(s.CUSTOMFILELABEL);if(e){var t=l(e),n=r(this);n.length?t.textContent=n:u(this)}}function v(){for(var e=[].slice.call(this.querySelectorAll(s.INPUT)).filter(function(e){return!!e.bsCustomFileInput}),t=0,n=e.length;t<n;t++)u(e[t])}var p="bsCustomFileInput",m="reset",h="change";return{init:function(e,t){void 0===e&&(e=s.CUSTOMFILE),void 0===t&&(t=s.FORM);for(var n,l,r=[].slice.call(document.querySelectorAll(e)),i=[].slice.call(document.querySelectorAll(t)),o=0,u=r.length;o<u;o++){var c=r[o];Object.defineProperty(c,p,{value:{defaultText:(n=void 0,n="",(l=c.parentNode.querySelector(s.CUSTOMFILELABEL))&&(n=l.textContent),n)},writable:!0}),d.call(c),c.addEventListener(h,d)}for(var f=0,a=i.length;f<a;f++)i[f].addEventListener(m,v),Object.defineProperty(i[f],p,{value:!0,writable:!0})},destroy:function(){for(var e=[].slice.call(document.querySelectorAll(s.FORM)).filter(function(e){return!!e.bsCustomFileInput}),t=[].slice.call(document.querySelectorAll(s.INPUT)).filter(function(e){return!!e.bsCustomFileInput}),n=0,l=t.length;n<l;n++){var r=t[n];u(r),r[p]=void 0,r.removeEventListener(h,d)}for(var i=0,o=e.length;i<o;i++)e[i].removeEventListener(m,v),e[i][p]=void 0}}});
|
||||
//# sourceMappingURL=bs-custom-file-input.min.js.map
|
||||
7
docs/4.5/assets/js/vendor/clipboard.min.js
vendored
Normal file
7
docs/4.5/assets/js/vendor/clipboard.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
docs/4.5/assets/js/vendor/jquery.slim.min.js
vendored
Normal file
2
docs/4.5/assets/js/vendor/jquery.slim.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1408
docs/4.5/browser-bugs/index.html
Normal file
1408
docs/4.5/browser-bugs/index.html
Normal file
@ -0,0 +1,1408 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Wall of browser bugs · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/browser-bugs/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Wall of browser bugs">
|
||||
<meta name="twitter:description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/browser-bugs/">
|
||||
<meta property="og:title" content="Wall of browser bugs">
|
||||
<meta property="og:description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Wall of browser bugs</h1>
|
||||
<p class="bd-lead"></p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h5 id="outdated-content">Outdated content</h5>
|
||||
|
||||
<p>This page is outdated and is no longer applicable to the latest versions of Bootstrap. It’s here purely for historical purposes now and will be removed in our next major release.</p>
|
||||
</div>
|
||||
|
||||
<p>Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.</p>
|
||||
|
||||
<p>We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap’s browser compatibility, <a href="/docs/4.5/getting-started/browsers-devices/#supported-browsers">see our browser compatibility docs</a>.</p>
|
||||
|
||||
<p>See also:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=536263">Chromium issue 536263: [meta] Issues affecting Bootstrap</a></li>
|
||||
<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1230801">Mozilla bug 1230801: Fix the issues that affect Bootstrap</a></li>
|
||||
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=159753">WebKit bug 159753: [meta] Issues affecting Bootstrap</a></li>
|
||||
<li><a href="https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o">jQuery’s browser bug workarounds</a></li>
|
||||
</ul>
|
||||
|
||||
<table class="bd-browser-bugs table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser(s)</th>
|
||||
<th>Summary of bug</th>
|
||||
<th>Upstream bug(s)</th>
|
||||
<th>Bootstrap issue(s)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Visual artifacts in scrollable modal dialogs</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9011176/">Edge issue #9011176</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20755">#20755</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Native browser tooltip for <code class="highlighter-rouge">title</code> shows on first keyboard focus (in addition to custom tooltip component)</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6793560/">Edge issue #6793560</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/18692">#18692</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Hovered element still remains in <code class="highlighter-rouge">:hover</code> state after scrolling away.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5381673/">Edge issue #5381673</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/14211">#14211</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>CSS <code class="highlighter-rouge">border-radius</code> sometimes causes lines of bleed-through of the <code class="highlighter-rouge">background-color</code> of the parent element.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3342037/">Edge issue #3342037</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/16671">#16671</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">background</code> of <code class="highlighter-rouge"><tr></code> is only applied to first child cell instead of all cells in the row</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5865620/">Edge issue #5865620</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/18504">#18504</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Background color from lower layer bleeds through transparent border in some cases</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6274505/">Edge issue #6274505</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/18228">#18228</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Hovering over descendant SVG element fires <code class="highlighter-rouge">mouseleave</code> event at ancestor</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7787318/">Edge issue #7787318</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/19670">#19670</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Active <code class="highlighter-rouge">position: fixed;</code> <code class="highlighter-rouge"><button></code> flickers when scrolling</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8770398/">Edge issue #8770398</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20507">#20507</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">.table-bordered</code> with an empty <code class="highlighter-rouge"><tbody></code> is missing borders.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023761">Mozilla bug #1023761</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/13453">#13453</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p>If the disabled state of a form control is changed via JavaScript, the normal state doesn’t return after refreshing the page.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/793">#793</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">focus</code> events should not be fired at the <code class="highlighter-rouge">document</code> object</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1228802">Mozilla bug #1228802</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/18365">#18365</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p>Wide floated table doesn’t wrap onto new line</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1277782">Mozilla bug #1277782</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/19839">#19839</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p>Mouse sometimes not within element for purposes of <code class="highlighter-rouge">mouseenter</code>/<code class="highlighter-rouge">mouseleave</code> when it’s within SVG elements</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=577785">Mozilla bug #577785</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/19670">#19670</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p>Layout with floated columns breaks when printing</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315994">Mozilla bug #1315994</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/21092">#21092</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox (Windows)
|
||||
</td>
|
||||
<td><p>Right border of <code class="highlighter-rouge"><select></code> menu is sometimes missing when screen is set to uncommon resolution</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=545685">Mozilla bug #545685</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/15990">#15990</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox (macOS & Linux)
|
||||
</td>
|
||||
<td><p>Badge widget causes bottom border of Tabs widget to unexpectedly not overlap</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1259972">Mozilla bug #1259972</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/19626">#19626</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome (macOS)
|
||||
</td>
|
||||
<td><p>Clicking above <code class="highlighter-rouge"><input type="number"></code> increment button flashes the decrement button.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=419108">Chromium issue #419108</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
Offshoot
|
||||
of
|
||||
<a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>
|
||||
|
||||
|
||||
&
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>CSS infinite linear animation with alpha transparency leaks memory.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=429375">Chromium issue #429375</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/14409">#14409</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">table-cell</code> borders not overlapping despite <code class="highlighter-rouge">margin-right: -1px</code></p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=749848">Chromium issue #749848</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/17438">#17438</a>,
|
||||
|
||||
|
||||
<a href="https://github.com/twbs/bootstrap/issues/14237">#14237</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>Don’t make <code class="highlighter-rouge">:hover</code> sticky on touch-friendly webpages</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=370155">Chromium issue #370155</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/12832">#12832</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">position: absolute</code> element that’s wider than its column is incorrectly clipped to column boundary</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=269061">Chromium issue #269061</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20161">#20161</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>Significant performance hit for dynamic SVGs with text depending on the number of fonts in <code class="highlighter-rouge">font-family</code>.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=781344">Chromium issue #781344</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/24673">#24673</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">rem</code> units in media queries should be calculated using <code class="highlighter-rouge">font-size: initial</code>, not the root element’s <code class="highlighter-rouge">font-size</code></p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=156684">WebKit bug #156684</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/17403">#17403</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
<td><p>Link to container with id and tabindex results in container being ignored by VoiceOver (affects skip links)</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=163658">WebKit bug #163658</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20732">#20732</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
<td><p>CSS <code class="highlighter-rouge">min-width</code> and <code class="highlighter-rouge">max-width</code> media features should not round fractional pixel</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=178261">WebKit bug #178261</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/25166">#25166</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (macOS)
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">px</code>, <code class="highlighter-rouge">em</code>, and <code class="highlighter-rouge">rem</code> should all behave the same in media queries when page zoom is applied</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=156687">WebKit bug #156687</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/17403">#17403</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (macOS)
|
||||
</td>
|
||||
<td><p>Weird button behavior with some <code class="highlighter-rouge"><input type="number"></code> elements.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>,
|
||||
|
||||
|
||||
<a href="https://openradar.appspot.com/18834768">Apple Safari Radar #18834768</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>,
|
||||
|
||||
|
||||
<a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>,
|
||||
|
||||
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (macOS)
|
||||
</td>
|
||||
<td><p>Small font size when printing webpage with fixed-width <code class="highlighter-rouge">.container</code>.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>,
|
||||
|
||||
|
||||
<a href="https://openradar.appspot.com/19435018">Apple Safari Radar #19435018</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">transform: translate3d(0,0,0);</code> rendering bug.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>,
|
||||
|
||||
|
||||
<a href="https://openradar.appspot.com/18804973">Apple Safari Radar #18804973</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/14603">#14603</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Text input’s cursor doesn’t move while scrolling the page.</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>,
|
||||
|
||||
|
||||
<a href="https://openradar.appspot.com/18819624">Apple Safari Radar #18819624</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/14708">#14708</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Can’t move cursor to start of text after entering long string of text into <code class="highlighter-rouge"><input type="text"></code></p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>,
|
||||
|
||||
|
||||
<a href="https://openradar.appspot.com/22299624">Apple Safari Radar #22299624</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/16988">#16988</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">display: block</code> causes text of temporal <code class="highlighter-rouge"><input></code>s to become vertically misaligned</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>,
|
||||
|
||||
|
||||
<a href="https://openradar.appspot.com/19434878">Apple Safari Radar #19434878</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>,
|
||||
|
||||
|
||||
<a href="https://github.com/twbs/bootstrap/issues/13098">#13098</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Tapping on <code class="highlighter-rouge"><body></code> doesn’t fire <code class="highlighter-rouge">click</code> events</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=151933">WebKit bug #151933</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/16028">#16028</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge">position:fixed</code> is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=153056">WebKit bug #153056</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/18859">#18859</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Tapping into an <code class="highlighter-rouge"><input></code> within a <code class="highlighter-rouge">position:fixed</code> element scrolls to the top of the page</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>,
|
||||
|
||||
|
||||
<a href="https://openradar.appspot.com/24235301">Apple Safari Radar #24235301</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/17497">#17497</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p><code class="highlighter-rouge"><body></code> with <code class="highlighter-rouge">overflow:hidden</code> CSS is scrollable on iOS</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/14839">#14839</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Scroll gesture in text field in <code class="highlighter-rouge">position:fixed</code> element sometimes scrolls <code class="highlighter-rouge"><body></code> instead of scrollable ancestor</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/14839">#14839</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Modal with <code class="highlighter-rouge">-webkit-overflow-scrolling: touch</code> doesn’t become scrollable after added text makes it taller</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=158342">WebKit bug #158342</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/17695">#17695</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Don’t make <code class="highlighter-rouge">:hover</code> sticky on touch-friendly webpages</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=158517">WebKit bug #158517</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/12832">#12832</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Element which is <code class="highlighter-rouge">position:fixed</code> disappears after opening a <code class="highlighter-rouge"><select></code> menu</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=162362">WebKit bug #162362</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20759">#20759</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (iPad Pro)
|
||||
</td>
|
||||
<td><p>Rendering of descendants of <code class="highlighter-rouge">position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>,
|
||||
|
||||
|
||||
<a href="https://openradar.appspot.com/24030853">Apple Safari Radar #24030853</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/18738">#18738</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1 id="most-wanted-features">Most wanted features</h1>
|
||||
|
||||
<p>There are several features specified in Web standards which would allow us to make Bootstrap more robust, elegant, or performant, but aren’t yet implemented in certain browsers, thus preventing us from taking advantage of them.</p>
|
||||
|
||||
<p>We publicly list these “most wanted” feature requests here, in the hopes of expediting the process of getting them implemented.</p>
|
||||
|
||||
<table class="bd-browser-bugs table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser(s)</th>
|
||||
<th>Summary of feature</th>
|
||||
<th>Upstream issue(s)</th>
|
||||
<th>Bootstrap issue(s)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Focusable elements should fire focus event / receive :focus styling when they receive Narrator/accessibility focus</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://microsoftaccessibility.uservoice.com/forums/307429-microsoft-accessibility-feedback/suggestions/16717318">Microsoft A11y UserVoice idea #16717318</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20732">#20732</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Implement the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"><code class="highlighter-rouge">:dir()</code> pseudo-class</a> from Selectors Level 4</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/12299532">Edge UserVoice idea #12299532</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/19984">#19984</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Implement the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code class="highlighter-rouge"><dialog></code> element</a></p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6508895">Edge UserVoice idea #6508895</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20175">#20175</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Fire a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event"><code class="highlighter-rouge">transitioncancel</code> event</a> when a CSS transition is canceled</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/15939898">Edge UserVoice idea #15939898</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20618">#20618</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class="highlighter-rouge">of <selector-list></code> clause</a> of the <code class="highlighter-rouge">:nth-child()</code> pseudo-class</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/15944476">Edge UserVoice idea #15944476</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20143">#20143</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class="highlighter-rouge">of <selector-list></code> clause</a> of the <code class="highlighter-rouge">:nth-child()</code> pseudo-class</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=854148">Mozilla bug #854148</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20143">#20143</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p>Implement the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code class="highlighter-rouge"><dialog></code> element</a></p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=840640">Mozilla bug #840640</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20175">#20175</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p>When virtual focus is on a button or link, fire actual focus on the element, too</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1000082">Mozilla bug #1000082</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20732">#20732</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>Fire a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event"><code class="highlighter-rouge">transitioncancel</code> event</a> when a CSS transition is canceled</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=642487">Chromium issue #642487</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=437860">Chromium issue #437860</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>Implement the <a href="https://caniuse.com/#feat=css-nth-child-of"><code class="highlighter-rouge">of <selector-list></code> clause</a> of the <code class="highlighter-rouge">:nth-child()</code> pseudo-class</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=304163">Chromium issue #304163</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20143">#20143</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>Implement the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"><code class="highlighter-rouge">:dir()</code> pseudo-class</a> from Selectors Level 4</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=576815">Chromium issue #576815</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/19984">#19984</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
<td><p>Fire a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event"><code class="highlighter-rouge">transitioncancel</code> event</a> when a CSS transition is canceled</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=161535">WebKit bug #161535</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20618">#20618</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
<td><p>Implement the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"><code class="highlighter-rouge">:dir()</code> pseudo-class</a> from Selectors Level 4</p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=64861">WebKit bug #64861</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/19984">#19984</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
<td><p>Implement the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code class="highlighter-rouge"><dialog></code> element</a></p>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://bugs.webkit.org/show_bug.cgi?id=84635">WebKit bug #84635</a>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://github.com/twbs/bootstrap/issues/20175">#20175</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
743
docs/4.5/components/alerts/index.html
Normal file
743
docs/4.5/components/alerts/index.html
Normal file
@ -0,0 +1,743 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Alerts · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/alerts/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Alerts">
|
||||
<meta name="twitter:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/alerts/">
|
||||
<meta property="og:title" content="Alerts">
|
||||
<meta property="og:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#link-color">Link color</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#additional-content">Additional content</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#dismissing">Dismissing</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#javascript-behavior">JavaScript behavior</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#triggers">Triggers</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#methods">Methods</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Alerts</h1>
|
||||
<p class="bd-lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code class="highlighter-rouge">.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts jQuery plugin</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-primary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple primary alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-secondary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple secondary alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple success alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple danger alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple warning alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple info alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-light"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple light alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-dark"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple dark alert—check it out!
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="link-color">Link color</h3>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-primary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple primary alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-secondary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple secondary alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple success alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple danger alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple warning alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple info alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-light"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple light alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-dark"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple dark alert with <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">></span>an example link<span class="nt"></a></span>. Give it a click if you like.
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="additional-content">Additional content</h3>
|
||||
|
||||
<p>Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="alert alert-success" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<hr />
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"alert-heading"</span><span class="nt">></span>Well done!<span class="nt"></h4></span>
|
||||
<span class="nt"><p></span>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.<span class="nt"></p></span>
|
||||
<span class="nt"><hr></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="dismissing">Dismissing</h3>
|
||||
|
||||
<p>Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:</p>
|
||||
|
||||
<ul>
|
||||
<li>Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.</li>
|
||||
<li>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>. The compiled version includes this.</li>
|
||||
<li>Add a dismiss button and the <code class="highlighter-rouge">.alert-dismissible</code> class, which adds extra padding to the right of the alert and positions the <code class="highlighter-rouge">.close</code> button.</li>
|
||||
<li>On the dismiss button, add the <code class="highlighter-rouge">data-dismiss="alert"</code> attribute, which triggers the JavaScript functionality. Be sure to use the <code class="highlighter-rouge"><button></code> element with it for proper behavior across all devices.</li>
|
||||
<li>To animate alerts when dismissing them, be sure to add the <code class="highlighter-rouge">.fade</code> and <code class="highlighter-rouge">.show</code> classes.</li>
|
||||
</ul>
|
||||
|
||||
<p>You can see this in action with a live demo:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible fade show"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
<span class="nt"><strong></span>Holy guacamole!<span class="nt"></strong></span> You should check in on some of those fields below.
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="javascript-behavior">JavaScript behavior</h2>
|
||||
|
||||
<h3 id="triggers">Triggers</h3>
|
||||
|
||||
<p>Enable dismissal of an alert via JavaScript:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.alert</span><span class="dl">'</span><span class="p">).</span><span class="nx">alert</span><span class="p">()</span></code></pre></figure>
|
||||
|
||||
<p>Or with <code class="highlighter-rouge">data</code> attributes on a button <strong>within the alert</strong>, as demonstrated above:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
|
||||
<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<p>Note that closing an alert will remove it from the DOM.</p>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().alert()</code></td>
|
||||
<td>Makes an alert listen for click events on descendant elements which have the <code class="highlighter-rouge">data-dismiss="alert"</code> attribute. (Not necessary when using the data-api’s auto-initialization.)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().alert('close')</code></td>
|
||||
<td>Closes an alert by removing it from the DOM. If the <code class="highlighter-rouge">.fade</code> and <code class="highlighter-rouge">.show</code> classes are present on the element, the alert will fade out before it is removed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().alert('dispose')</code></td>
|
||||
<td>Destroys an element’s alert.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.alert</span><span class="dl">'</span><span class="p">).</span><span class="nx">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">close</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
|
||||
<p>Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">close.bs.alert</code></td>
|
||||
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">closed.bs.alert</code></td>
|
||||
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myAlert</span><span class="dl">'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">closed.bs.alert</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// do something...</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
620
docs/4.5/components/badge/index.html
Normal file
620
docs/4.5/components/badge/index.html
Normal file
@ -0,0 +1,620 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Badges · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/badge/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Badges">
|
||||
<meta name="twitter:description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/badge/">
|
||||
<meta property="og:title" content="Badges">
|
||||
<meta property="og:description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#contextual-variations">Contextual variations</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#pill-badges">Pill badges</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#links">Links</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Badges</h1>
|
||||
<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code class="highlighter-rouge">em</code> units.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
|
||||
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
|
||||
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
|
||||
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
|
||||
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
|
||||
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1></span>Example heading <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>New<span class="nt"></span></h1></span>
|
||||
<span class="nt"><h2></span>Example heading <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>New<span class="nt"></span></h2></span>
|
||||
<span class="nt"><h3></span>Example heading <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>New<span class="nt"></span></h3></span>
|
||||
<span class="nt"><h4></span>Example heading <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>New<span class="nt"></span></h4></span>
|
||||
<span class="nt"><h5></span>Example heading <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>New<span class="nt"></span></h5></span>
|
||||
<span class="nt"><h6></span>Example heading <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>New<span class="nt"></span></h6></span></code></pre></figure>
|
||||
|
||||
<p>Badges can be used as part of links or buttons to provide a counter.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary">
|
||||
Notifications <span class="badge badge-light">4</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>
|
||||
Notifications <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>4<span class="nt"></span></span>
|
||||
<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p>
|
||||
|
||||
<p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary">
|
||||
Profile <span class="badge badge-light">9</span>
|
||||
<span class="sr-only">unread messages</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>
|
||||
Profile <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>9<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>unread messages<span class="nt"></span></span>
|
||||
<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<h2 id="contextual-variations">Contextual variations</h2>
|
||||
|
||||
<p>Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<span class="badge badge-primary">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-primary"</span><span class="nt">></span>Primary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>Secondary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-success"</span><span class="nt">></span>Success<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-danger"</span><span class="nt">></span>Danger<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-warning"</span><span class="nt">></span>Warning<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-info"</span><span class="nt">></span>Info<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>Light<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-dark"</span><span class="nt">></span>Dark<span class="nt"></span></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="pill-badges">Pill badges</h2>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.badge-pill</code> modifier class to make badges more rounded (with a larger <code class="highlighter-rouge">border-radius</code> and additional horizontal <code class="highlighter-rouge">padding</code>). Useful if you miss the badges from v3.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<span class="badge badge-pill badge-primary">Primary</span>
|
||||
<span class="badge badge-pill badge-secondary">Secondary</span>
|
||||
<span class="badge badge-pill badge-success">Success</span>
|
||||
<span class="badge badge-pill badge-danger">Danger</span>
|
||||
<span class="badge badge-pill badge-warning">Warning</span>
|
||||
<span class="badge badge-pill badge-info">Info</span>
|
||||
<span class="badge badge-pill badge-light">Light</span>
|
||||
<span class="badge badge-pill badge-dark">Dark</span>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-primary"</span><span class="nt">></span>Primary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-secondary"</span><span class="nt">></span>Secondary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-success"</span><span class="nt">></span>Success<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-danger"</span><span class="nt">></span>Danger<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-warning"</span><span class="nt">></span>Warning<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-info"</span><span class="nt">></span>Info<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-light"</span><span class="nt">></span>Light<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-dark"</span><span class="nt">></span>Dark<span class="nt"></span></span></code></pre></figure>
|
||||
|
||||
<h2 id="links">Links</h2>
|
||||
|
||||
<p>Using the contextual <code class="highlighter-rouge">.badge-*</code> classes on an <code class="highlighter-rouge"><a></code> element quickly provide <em>actionable</em> badges with hover and focus states.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<a href="#" class="badge badge-primary">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
<a href="#" class="badge badge-success">Success</a>
|
||||
<a href="#" class="badge badge-danger">Danger</a>
|
||||
<a href="#" class="badge badge-warning">Warning</a>
|
||||
<a href="#" class="badge badge-info">Info</a>
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-primary"</span><span class="nt">></span>Primary<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-secondary"</span><span class="nt">></span>Secondary<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-success"</span><span class="nt">></span>Success<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-danger"</span><span class="nt">></span>Danger<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-warning"</span><span class="nt">></span>Warning<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-info"</span><span class="nt">></span>Info<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">></span>Light<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-dark"</span><span class="nt">></span>Dark<span class="nt"></a></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
555
docs/4.5/components/breadcrumb/index.html
Normal file
555
docs/4.5/components/breadcrumb/index.html
Normal file
@ -0,0 +1,555 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Breadcrumb · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/breadcrumb/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Breadcrumb">
|
||||
<meta name="twitter:description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/breadcrumb/">
|
||||
<meta property="og:title" content="Breadcrumb">
|
||||
<meta property="og:description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Breadcrumb</h1>
|
||||
<p class="bd-lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<div class="bd-example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item active" aria-current="page">Home</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>Home<span class="nt"></li></span>
|
||||
<span class="nt"></ol></span>
|
||||
<span class="nt"></nav></span>
|
||||
|
||||
<span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>Library<span class="nt"></li></span>
|
||||
<span class="nt"></ol></span>
|
||||
<span class="nt"></nav></span>
|
||||
|
||||
<span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Library<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>Data<span class="nt"></li></span>
|
||||
<span class="nt"></ol></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<h2 id="changing-the-separator">Changing the separator</h2>
|
||||
|
||||
<p>Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code class="highlighter-rouge">::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code class="highlighter-rouge">content</code></a>. They can be changed by changing <code class="highlighter-rouge">$breadcrumb-divider</code>. The <a href="https://sass-lang.com/documentation/modules/string#quote">quote</a> function is needed to generate the quotes around a string, so if you want <code class="highlighter-rouge">></code> as separator, you can use this:</p>
|
||||
|
||||
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$breadcrumb-divider</span><span class="p">:</span> <span class="nf">quote</span><span class="p">(</span><span class="s2">">"</span><span class="p">);</span>
|
||||
</code></pre></div></div>
|
||||
|
||||
<p>It’s also possible to use a <strong>base64 embedded SVG icon</strong>:</p>
|
||||
|
||||
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$breadcrumb-divider</span><span class="p">:</span> <span class="sx">url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+)</span><span class="p">;</span>
|
||||
</code></pre></div></div>
|
||||
|
||||
<p>The separator can be removed by setting <code class="highlighter-rouge">$breadcrumb-divider</code> to <code class="highlighter-rouge">none</code>:</p>
|
||||
|
||||
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$breadcrumb-divider</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
|
||||
</code></pre></div></div>
|
||||
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
|
||||
<p>Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as <code class="highlighter-rouge">aria-label="breadcrumb"</code> to describe the type of navigation provided in the <code class="highlighter-rouge"><nav></code> element, as well as applying an <code class="highlighter-rouge">aria-current="page"</code> to the last item of the set to indicate that it represents the current page.</p>
|
||||
|
||||
<p>For more information, see the <a href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb">WAI-ARIA Authoring Practices for the breadcrumb pattern</a>.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
752
docs/4.5/components/button-group/index.html
Normal file
752
docs/4.5/components/button-group/index.html
Normal file
@ -0,0 +1,752 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Button group · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/button-group/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Button group">
|
||||
<meta name="twitter:description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/button-group/">
|
||||
<meta property="og:title" content="Button group">
|
||||
<meta property="og:description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#button-toolbar">Button toolbar</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#sizing">Sizing</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#nesting">Nesting</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#vertical-variation">Vertical variation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Button group</h1>
|
||||
<p class="bd-lead">Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="basic-example">Basic example</h2>
|
||||
|
||||
<p>Wrap a series of buttons with <code class="highlighter-rouge">.btn</code> in <code class="highlighter-rouge">.btn-group</code>. Add on optional JavaScript radio and checkbox style behavior with <a href="/docs/4.5/components/buttons/#button-plugin">our buttons plugin</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Basic example"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Left<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Middle<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Right<span class="nt"></button></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="ensure-correct-role-and-provide-a-label">Ensure correct <code class="highlighter-rouge">role</code> and provide a label</h5>
|
||||
|
||||
<p>In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate <code class="highlighter-rouge">role</code> attribute needs to be provided. For button groups, this would be <code class="highlighter-rouge">role="group"</code>, while toolbars should have a <code class="highlighter-rouge">role="toolbar"</code>.</p>
|
||||
|
||||
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use <code class="highlighter-rouge">aria-label</code>, but alternatives such as <code class="highlighter-rouge">aria-labelledby</code> can also be used.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="button-toolbar">Button toolbar</h2>
|
||||
|
||||
<p>Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="btn-group mr-2" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-secondary">5</button>
|
||||
<button type="button" class="btn btn-secondary">6</button>
|
||||
<button type="button" class="btn btn-secondary">7</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-secondary">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-toolbar"</span> <span class="na">role=</span><span class="s">"toolbar"</span> <span class="na">aria-label=</span><span class="s">"Toolbar with button groups"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group mr-2"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"First group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>1<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>2<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>3<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>4<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group mr-2"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Second group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>5<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>6<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>7<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Third group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>8<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text" id="btnGroupAddon">@</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text" id="btnGroupAddon2">@</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-toolbar mb-3"</span> <span class="na">role=</span><span class="s">"toolbar"</span> <span class="na">aria-label=</span><span class="s">"Toolbar with button groups"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group mr-2"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"First group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>1<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>2<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>3<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>4<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"btnGroupAddon"</span><span class="nt">></span>@<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Input group example"</span> <span class="na">aria-label=</span><span class="s">"Input group example"</span> <span class="na">aria-describedby=</span><span class="s">"btnGroupAddon"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-toolbar justify-content-between"</span> <span class="na">role=</span><span class="s">"toolbar"</span> <span class="na">aria-label=</span><span class="s">"Toolbar with button groups"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"First group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>1<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>2<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>3<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>4<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"btnGroupAddon2"</span><span class="nt">></span>@<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Input group example"</span> <span class="na">aria-label=</span><span class="s">"Input group example"</span> <span class="na">aria-describedby=</span><span class="s">"btnGroupAddon2"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="sizing">Sizing</h2>
|
||||
|
||||
<p>Instead of applying button sizing classes to every button in a group, just add <code class="highlighter-rouge">.btn-group-*</code> to each <code class="highlighter-rouge">.btn-group</code>, including each one when nesting multiple groups.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<br />
|
||||
<div class="btn-group" role="group" aria-label="Default button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<br />
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-lg"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-sm"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="nesting">Nesting</h2>
|
||||
|
||||
<p>Place a <code class="highlighter-rouge">.btn-group</code> within another <code class="highlighter-rouge">.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Button group with nested dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>1<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>2<span class="nt"></button></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">id=</span><span class="s">"btnGroupDrop1"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"btnGroupDrop1"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="vertical-variation">Vertical variation</h2>
|
||||
|
||||
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong>Split button dropdowns are not supported here.</strong></p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group-vertical"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
741
docs/4.5/components/buttons/index.html
Normal file
741
docs/4.5/components/buttons/index.html
Normal file
@ -0,0 +1,741 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Buttons · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/buttons/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Buttons">
|
||||
<meta name="twitter:description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/buttons/">
|
||||
<meta property="og:title" content="Buttons">
|
||||
<meta property="og:description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#disable-text-wrapping">Disable text wrapping</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#button-tags">Button tags</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#outline-buttons">Outline buttons</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#sizes">Sizes</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#active-state">Active state</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#disabled-state">Disabled state</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#button-plugin">Button plugin</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#toggle-states">Toggle states</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#checkbox-and-radio-buttons">Checkbox and radio buttons</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#methods">Methods</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Buttons</h1>
|
||||
<p class="bd-lead">Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Secondary<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Success<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">></span>Info<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-light"</span><span class="nt">></span>Light<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dark"</span><span class="nt">></span>Dark<span class="nt"></button></span>
|
||||
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">></span>Link<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="disable-text-wrapping">Disable text wrapping</h2>
|
||||
|
||||
<p>If you don’t want the button text to wrap, you can add the <code class="highlighter-rouge">.text-nowrap</code> class to the button. In Sass, you can set <code class="highlighter-rouge">$btn-white-space: nowrap</code> to disable text wrapping for each button.</p>
|
||||
|
||||
<h2 id="button-tags">Button tags</h2>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.btn</code> classes are designed to be used with the <code class="highlighter-rouge"><button></code> element. However, you can also use these classes on <code class="highlighter-rouge"><a></code> or <code class="highlighter-rouge"><input></code> elements (though some browsers may apply a slightly different rendering).</p>
|
||||
|
||||
<p>When using button classes on <code class="highlighter-rouge"><a></code> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a <code class="highlighter-rouge">role="button"</code> to appropriately convey their purpose to assistive technologies such as screen readers.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<a class="btn btn-primary" href="#" role="button">Link</a>
|
||||
<button class="btn btn-primary" type="submit">Button</button>
|
||||
<input class="btn btn-primary" type="button" value="Input" />
|
||||
<input class="btn btn-primary" type="submit" value="Submit" />
|
||||
<input class="btn btn-primary" type="reset" value="Reset" />
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"Input"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">value=</span><span class="s">"Submit"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"reset"</span> <span class="na">value=</span><span class="s">"Reset"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<h2 id="outline-buttons">Outline buttons</h2>
|
||||
|
||||
<p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code class="highlighter-rouge">.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success">Success</button>
|
||||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||
<button type="button" class="btn btn-outline-info">Info</button>
|
||||
<button type="button" class="btn btn-outline-light">Light</button>
|
||||
<button type="button" class="btn btn-outline-dark">Dark</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">></span>Secondary<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span><span class="nt">></span>Success<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-info"</span><span class="nt">></span>Info<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-light"</span><span class="nt">></span>Light<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-dark"</span><span class="nt">></span>Dark<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<h2 id="sizes">Sizes</h2>
|
||||
|
||||
<p>Fancy larger or smaller buttons? Add <code class="highlighter-rouge">.btn-lg</code> or <code class="highlighter-rouge">.btn-sm</code> for additional sizes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<p>Create block level buttons—those that span the full width of a parent—by adding <code class="highlighter-rouge">.btn-block</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg btn-block"</span><span class="nt">></span>Block level button<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg btn-block"</span><span class="nt">></span>Block level button<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<h2 id="active-state">Active state</h2>
|
||||
|
||||
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. <strong>There’s no need to add a class to <code class="highlighter-rouge"><button></code>s as they use a pseudo-class</strong>. However, you can still force the same active appearance with <code class="highlighter-rouge">.active</code> (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg active"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-pressed=</span><span class="s">"true"</span><span class="nt">></span>Primary link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg active"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-pressed=</span><span class="s">"true"</span><span class="nt">></span>Link<span class="nt"></a></span></code></pre></figure>
|
||||
|
||||
<h2 id="disabled-state">Disabled state</h2>
|
||||
|
||||
<p>Make buttons look inactive by adding the <code class="highlighter-rouge">disabled</code> boolean attribute to any <code class="highlighter-rouge"><button></code> element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-lg btn-primary" disabled="">Primary button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg" disabled="">Button</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-primary"</span> <span class="na">disabled</span><span class="nt">></span>Primary button<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span> <span class="na">disabled</span><span class="nt">></span>Button<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<p>Disabled buttons using the <code class="highlighter-rouge"><a></code> element behave a bit different:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge"><a></code>s don’t support the <code class="highlighter-rouge">disabled</code> attribute, so you must add the <code class="highlighter-rouge">.disabled</code> class to make it visually appear disabled.</li>
|
||||
<li>Some future-friendly styles are included to disable all <code class="highlighter-rouge">pointer-events</code> on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.</li>
|
||||
<li>Disabled buttons should include the <code class="highlighter-rouge">aria-disabled="true"</code> attribute to indicate the state of the element to assistive technologies.</li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-example">
|
||||
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg disabled"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Primary link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg disabled"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Link<span class="nt"></a></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="link-functionality-caveat">Link functionality caveat</h5>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.disabled</code> class uses <code class="highlighter-rouge">pointer-events: none</code> to try to disable the link functionality of <code class="highlighter-rouge"><a></code>s, but that CSS property is not yet standardized. In addition, even in browsers that do support <code class="highlighter-rouge">pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a <code class="highlighter-rouge">tabindex="-1"</code> attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="button-plugin">Button plugin</h2>
|
||||
|
||||
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
|
||||
|
||||
<h3 id="toggle-states">Toggle states</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">data-toggle="button"</code> to toggle a button’s <code class="highlighter-rouge">active</code> state. If you’re pre-toggling a button, you must manually add the <code class="highlighter-rouge">.active</code> class <strong>and</strong> <code class="highlighter-rouge">aria-pressed="true"</code> to the <code class="highlighter-rouge"><button></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
|
||||
Single toggle
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"button"</span> <span class="na">aria-pressed=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Single toggle
|
||||
<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
<h3 id="checkbox-and-radio-buttons">Checkbox and radio buttons</h3>
|
||||
|
||||
<p>Bootstrap’s <code class="highlighter-rouge">.button</code> styles can be applied to other elements, such as <code class="highlighter-rouge"><label></code>s, to provide checkbox or radio style button toggling. Add <code class="highlighter-rouge">data-toggle="buttons"</code> to a <code class="highlighter-rouge">.btn-group</code> containing those modified buttons to enable their toggling behavior via JavaScript and add <code class="highlighter-rouge">.btn-group-toggle</code> to style the <code class="highlighter-rouge"><input></code>s within your buttons. <strong>Note that you can create single input-powered buttons or groups of them.</strong></p>
|
||||
|
||||
<p>The checked state for these buttons is <strong>only updated via <code class="highlighter-rouge">click</code> event</strong> on the button. If you use another method to update the input—e.g., with <code class="highlighter-rouge"><input type="reset"></code> or by manually applying the input’s <code class="highlighter-rouge">checked</code> property—you’ll need to toggle <code class="highlighter-rouge">.active</code> on the <code class="highlighter-rouge"><label></code> manually.</p>
|
||||
|
||||
<p>Note that pre-checked buttons require you to manually add the <code class="highlighter-rouge">.active</code> class to the input’s <code class="highlighter-rouge"><label></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-secondary active">
|
||||
<input type="checkbox" checked="" /> Checked
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span><span class="nt">></span> Checked
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-secondary active">
|
||||
<input type="radio" name="options" id="option1" checked="" /> Active
|
||||
</label>
|
||||
<label class="btn btn-secondary">
|
||||
<input type="radio" name="options" id="option2" /> Radio
|
||||
</label>
|
||||
<label class="btn btn-secondary">
|
||||
<input type="radio" name="options" id="option3" /> Radio
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option1"</span> <span class="na">checked</span><span class="nt">></span> Active
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option2"</span><span class="nt">></span> Radio
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option3"</span><span class="nt">></span> Radio
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().button('toggle')</code></td>
|
||||
<td>Toggles push state. Gives the button the appearance that it has been activated.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().button('dispose')</code></td>
|
||||
<td>Destroys an element’s button.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
2100
docs/4.5/components/card/index.html
Normal file
2100
docs/4.5/components/card/index.html
Normal file
@ -0,0 +1,2100 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Cards · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/card/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Cards">
|
||||
<meta name="twitter:description" content="Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/card/">
|
||||
<meta property="og:title" content="Cards">
|
||||
<meta property="og:description" content="Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#about">About</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#content-types">Content types</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#body">Body</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#titles-text-and-links">Titles, text, and links</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#images">Images</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#list-groups">List groups</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#kitchen-sink">Kitchen sink</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#header-and-footer">Header and footer</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#sizing">Sizing</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#using-grid-markup">Using grid markup</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#using-utilities">Using utilities</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#using-custom-css">Using custom CSS</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#text-alignment">Text alignment</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#navigation">Navigation</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#images-1">Images</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#image-caps">Image caps</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#image-overlays">Image overlays</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#horizontal">Horizontal</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#card-styles">Card styles</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#background-and-color">Background and color</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#border">Border</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#mixins-utilities">Mixins utilities</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#card-layout">Card layout</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#card-groups">Card groups</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#card-decks">Card decks</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#grid-cards">Grid cards</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#card-columns">Card columns</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Cards</h1>
|
||||
<p class="bd-lead">Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="about">About</h2>
|
||||
|
||||
<p>A <strong>card</strong> is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.</p>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no <code class="highlighter-rouge">margin</code> by default, so use <a href="/docs/4.5/utilities/spacing/">spacing utilities</a> as needed.</p>
|
||||
|
||||
<p>Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various <a href="#sizing">sizing options</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="content-types">Content types</h2>
|
||||
|
||||
<p>Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.</p>
|
||||
|
||||
<h3 id="body">Body</h3>
|
||||
|
||||
<p>The building block of a card is the <code class="highlighter-rouge">.card-body</code>. Use it whenever you need a padded section within a card.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
This is some text within a card body.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
This is some text within a card body.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="titles-text-and-links">Titles, text, and links</h3>
|
||||
|
||||
<p>Card titles are used by adding <code class="highlighter-rouge">.card-title</code> to a <code class="highlighter-rouge"><h*></code> tag. In the same way, links are added and placed next to each other by adding <code class="highlighter-rouge">.card-link</code> to an <code class="highlighter-rouge"><a></code> tag.</p>
|
||||
|
||||
<p>Subtitles are used by adding a <code class="highlighter-rouge">.card-subtitle</code> to a <code class="highlighter-rouge"><h*></code> tag. If the <code class="highlighter-rouge">.card-title</code> and the <code class="highlighter-rouge">.card-subtitle</code> items are placed in a <code class="highlighter-rouge">.card-body</code> item, the card title and subtitle are aligned nicely.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"card-subtitle mb-2 text-muted"</span><span class="nt">></span>Card subtitle<span class="nt"></h6></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"card-link"</span><span class="nt">></span>Card link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"card-link"</span><span class="nt">></span>Another link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="images">Images</h3>
|
||||
|
||||
<p><code class="highlighter-rouge">.card-img-top</code> places an image to the top of the card. With <code class="highlighter-rouge">.card-text</code>, text can be added to the card. Text within <code class="highlighter-rouge">.card-text</code> can also be styled with the standard HTML tags.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="list-groups">List groups</h3>
|
||||
|
||||
<p>Create lists of content in a card with a flush list group.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>
|
||||
Featured
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="kitchen-sink">Kitchen sink</h3>
|
||||
|
||||
<p>Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
<div class="card-body">
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"card-link"</span><span class="nt">></span>Card link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"card-link"</span><span class="nt">></span>Another link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="header-and-footer">Header and footer</h3>
|
||||
|
||||
<p>Add an optional header and/or footer within a card.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>
|
||||
Featured
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Card headers can be styled by adding <code class="highlighter-rouge">.card-header</code> to <code class="highlighter-rouge"><h*></code> elements.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card">
|
||||
<h5 class="card-header">Featured</h5>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Featured<span class="nt"></h5></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Quote
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<blockquote class="blockquote mb-0">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>
|
||||
Quote
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span>
|
||||
<span class="nt"><footer</span> <span class="na">class=</span><span class="s">"blockquote-footer"</span><span class="nt">></span>Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></footer></span>
|
||||
<span class="nt"></blockquote></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
<div class="card-footer text-muted">
|
||||
2 days ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>
|
||||
Featured
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer text-muted"</span><span class="nt">></span>
|
||||
2 days ago
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="sizing">Sizing</h2>
|
||||
|
||||
<p>Cards assume no specific <code class="highlighter-rouge">width</code> to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.</p>
|
||||
|
||||
<h3 id="using-grid-markup">Using grid markup</h3>
|
||||
|
||||
<p>Using the grid, wrap cards in columns and rows as needed.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-6"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-6"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="using-utilities">Using utilities</h3>
|
||||
|
||||
<p>Use our handful of <a href="/docs/4.5/utilities/sizing/">available sizing utilities</a> to quickly set a card’s width.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card w-75">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card w-50">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card w-75"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Button<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card w-50"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Button<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="using-custom-css">Using custom CSS</h3>
|
||||
|
||||
<p>Use custom CSS in your stylesheets or as inline styles to set a width.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="text-alignment">Text alignment</h2>
|
||||
|
||||
<p>You can quickly change the text alignment of any card—in its entirety or specific parts—with our <a href="/docs/4.5/utilities/text/#text-alignment">text align classes</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-center" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-right" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-center"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-right"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="navigation">Navigation</h2>
|
||||
|
||||
<p>Add some navigation to a card’s header (or block) with Bootstrap’s <a href="/docs/4.5/components/navs/">nav components</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs card-header-tabs"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-pills card-header-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills card-header-pills"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="images-1">Images</h2>
|
||||
|
||||
<p>Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.</p>
|
||||
|
||||
<h3 id="image-caps">Image caps</h3>
|
||||
|
||||
<p>Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card mb-3">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<svg class="bd-placeholder-img card-img-bottom" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="image-overlays">Image overlays</h3>
|
||||
|
||||
<p>Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card bg-dark text-white">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg card-img" width="100%" height="270" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Card image"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>
|
||||
<div class="card-img-overlay">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text">Last updated 3 mins ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-dark text-white"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-img-overlay"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="horizontal">Horizontal</h2>
|
||||
|
||||
<p>Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with <code class="highlighter-rouge">.no-gutters</code> and use <code class="highlighter-rouge">.col-md-*</code> classes to make the card horizontal at the <code class="highlighter-rouge">md</code> breakpoint. Further adjustments may be needed depending on your card content.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card mb-3" style="max-width: 540px;">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-md-4">
|
||||
<svg class="bd-placeholder-img" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></svg>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 540px;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row no-gutters"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-8"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="card-styles">Card styles</h2>
|
||||
|
||||
<p>Cards include various options for customizing their backgrounds, borders, and color.</p>
|
||||
|
||||
<h3 id="background-and-color">Background and color</h3>
|
||||
|
||||
<p>Use <a href="/docs/4.5/utilities/colors/">text and background utilities</a> to change the appearance of a card.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Primary card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Secondary card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Success card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Danger card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Warning card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Info card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-light mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Light card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Dark card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-white bg-primary mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Primary card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-white bg-secondary mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Secondary card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-white bg-success mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Success card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-white bg-danger mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Danger card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-white bg-warning mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Warning card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-white bg-info mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Info card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-light mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Light card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-white bg-dark mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Dark card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="border">Border</h3>
|
||||
|
||||
<p>Use <a href="/docs/4.5/utilities/borders/">border utilities</a> to change just the <code class="highlighter-rouge">border-color</code> of a card. Note that you can put <code class="highlighter-rouge">.text-{color}</code> classes on the parent <code class="highlighter-rouge">.card</code> or a subset of the card’s contents as shown below.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<div class="card border-primary mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body text-primary">
|
||||
<h5 class="card-title">Primary card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-secondary mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body text-secondary">
|
||||
<h5 class="card-title">Secondary card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-success mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body text-success">
|
||||
<h5 class="card-title">Success card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-danger mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body text-danger">
|
||||
<h5 class="card-title">Danger card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-warning mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body text-warning">
|
||||
<h5 class="card-title">Warning card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-info mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body text-info">
|
||||
<h5 class="card-title">Info card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-light mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Light card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-dark mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body text-dark">
|
||||
<h5 class="card-title">Dark card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card border-primary mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body text-primary"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Primary card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card border-secondary mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body text-secondary"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Secondary card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card border-success mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body text-success"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Success card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card border-danger mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body text-danger"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Danger card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card border-warning mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body text-warning"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Warning card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card border-info mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body text-info"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Info card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card border-light mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Light card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card border-dark mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body text-dark"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Dark card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="mixins-utilities">Mixins utilities</h3>
|
||||
|
||||
<p>You can also change the borders on the card header and footer as needed, and even remove their <code class="highlighter-rouge">background-color</code> with <code class="highlighter-rouge">.bg-transparent</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card border-success mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header bg-transparent border-success">Header</div>
|
||||
<div class="card-body text-success">
|
||||
<h5 class="card-title">Success card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-success">Footer</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card border-success mb-3"</span> <span class="na">style=</span><span class="s">"max-width: 18rem;"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header bg-transparent border-success"</span><span class="nt">></span>Header<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body text-success"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Success card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer bg-transparent border-success"</span><span class="nt">></span>Footer<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="card-layout">Card layout</h2>
|
||||
|
||||
<p>In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, <strong>these layout options are not yet responsive</strong>.</p>
|
||||
|
||||
<h3 id="card-groups">Card groups</h3>
|
||||
|
||||
<p>Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use <code class="highlighter-rouge">display: flex;</code> to become attached with uniform dimensions starting at the <code class="highlighter-rouge">sm</code> breakpoint.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card-group">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This card has supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>When using card groups with footers, their content will automatically line up.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card-group">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
||||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This card has supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
||||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
||||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="card-decks">Card decks</h3>
|
||||
|
||||
<p>Need a set of equal width and height cards that aren’t attached to one another? Use card decks.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-deck"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This card has supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Just like with card groups, card footers in decks will automatically line up.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-deck"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
||||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This card has supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
||||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
||||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="grid-cards">Grid cards</h3>
|
||||
|
||||
<p>Use the Bootstrap grid system and its <a href="/docs/4.5/layout/grid/#row-columns"><code class="highlighter-rouge">.row-cols</code> classes</a> to control how many grid columns (wrapped around your cards) you show per row. For example, here’s <code class="highlighter-rouge">.row-cols-1</code> laying out the cards on one column, and <code class="highlighter-rouge">.row-cols-md-2</code> splitting four cards to equal width across multiple rows, from the medium breakpoint up.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row row-cols-1 row-cols-md-2">
|
||||
<div class="col mb-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row row-cols-1 row-cols-md-2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Change it to <code class="highlighter-rouge">.row-cols-3</code> and you’ll see the fourth card wrap.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row row-cols-1 row-cols-md-3">
|
||||
<div class="col mb-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row row-cols-1 row-cols-md-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>When you need equal height, add <code class="highlighter-rouge">.h-100</code> to the cards. If you want equal heights by default, you can set <code class="highlighter-rouge">$card-height: 100%</code> in Sass.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row row-cols-1 row-cols-md-3">
|
||||
<div class="col mb-4">
|
||||
<div class="card h-100">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div class="card h-100">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a short card.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div class="card h-100">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div class="card h-100">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row row-cols-1 row-cols-md-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card h-100"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card h-100"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a short card.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card h-100"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card h-100"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="card-columns">Card columns</h3>
|
||||
|
||||
<p>Cards can be organized into <a href="https://masonry.desandro.com/">Masonry</a>-like columns with just CSS by wrapping them in <code class="highlighter-rouge">.card-columns</code>. Cards are built with CSS <code class="highlighter-rouge">column</code> properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.</p>
|
||||
|
||||
<p><strong>Heads up!</strong> Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to <code class="highlighter-rouge">display: inline-block</code> as <code class="highlighter-rouge">column-break-inside: avoid</code> isn’t a bulletproof solution yet.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card-columns">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="160" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title that wraps to a new line</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card p-3">
|
||||
<blockquote class="blockquote mb-0 card-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">
|
||||
<small class="text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="160" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-primary text-white text-center p-3">
|
||||
<blockquote class="blockquote mb-0">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
|
||||
<footer class="blockquote-footer text-white">
|
||||
<small>
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Card image"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>
|
||||
</div>
|
||||
<div class="card p-3 text-right">
|
||||
<blockquote class="blockquote mb-0">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">
|
||||
<small class="text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-columns"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title that wraps to a new line<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card p-3"</span><span class="nt">></span>
|
||||
<span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote mb-0 card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span>
|
||||
<span class="nt"><footer</span> <span class="na">class=</span><span class="s">"blockquote-footer"</span><span class="nt">></span>
|
||||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>
|
||||
Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></span>
|
||||
<span class="nt"></small></span>
|
||||
<span class="nt"></footer></span>
|
||||
<span class="nt"></blockquote></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This card has supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-primary text-white text-center p-3"</span><span class="nt">></span>
|
||||
<span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.<span class="nt"></p></span>
|
||||
<span class="nt"><footer</span> <span class="na">class=</span><span class="s">"blockquote-footer text-white"</span><span class="nt">></span>
|
||||
<span class="nt"><small></span>
|
||||
Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></span>
|
||||
<span class="nt"></small></span>
|
||||
<span class="nt"></footer></span>
|
||||
<span class="nt"></blockquote></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This card has a regular title and short paragraphy of text below it.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card p-3 text-right"</span><span class="nt">></span>
|
||||
<span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span>
|
||||
<span class="nt"><footer</span> <span class="na">class=</span><span class="s">"blockquote-footer"</span><span class="nt">></span>
|
||||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>
|
||||
Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></span>
|
||||
<span class="nt"></small></span>
|
||||
<span class="nt"></footer></span>
|
||||
<span class="nt"></blockquote></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Card columns can also be extended and customized with some additional code. Shown below is an extension of the <code class="highlighter-rouge">.card-columns</code> class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.card-columns</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">media-breakpoint-only</span><span class="p">(</span><span class="n">lg</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nl">column-count</span><span class="p">:</span> <span class="m">4</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">@include</span> <span class="nd">media-breakpoint-only</span><span class="p">(</span><span class="n">xl</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nl">column-count</span><span class="p">:</span> <span class="m">5</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1015
docs/4.5/components/carousel/index.html
Normal file
1015
docs/4.5/components/carousel/index.html
Normal file
@ -0,0 +1,1015 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Carousel · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/carousel/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Carousel">
|
||||
<meta name="twitter:description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/carousel/">
|
||||
<meta property="og:title" content="Carousel">
|
||||
<meta property="og:description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#slides-only">Slides only</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#with-controls">With controls</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#with-indicators">With indicators</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#with-captions">With captions</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#crossfade">Crossfade</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#individual-carousel-item-interval">Individual .carousel-item interval</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#via-data-attributes">Via data attributes</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#via-javascript">Via JavaScript</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#options">Options</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#methods">Methods</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h4"><a href="#carouseloptions">.carousel(options)</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#carouselcycle">.carousel('cycle')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#carouselpause">.carousel('pause')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#carouselnumber">.carousel(number)</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#carouselprev">.carousel('prev')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#carouselnext">.carousel('next')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#carouseldispose">.carousel('dispose')</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#change-transition-duration">Change transition duration</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Carousel</h1>
|
||||
<p class="bd-lead">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
|
||||
<p>The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.</p>
|
||||
|
||||
<p>In browsers where the <a href="https://www.w3.org/TR/page-visibility/">Page Visibility API</a> is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The animation effect of this component is dependent on the <code class="highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
<p>Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.</p>
|
||||
|
||||
<p>Lastly, if you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.</p>
|
||||
|
||||
<p><strong>The <code class="highlighter-rouge">.active</code> class needs to be added to one of the slides</strong> otherwise the carousel will not be visible. Also be sure to set a unique id on the <code class="highlighter-rouge">.carousel</code> for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a <code class="highlighter-rouge">data-target</code> attribute (or <code class="highlighter-rouge">href</code> for links) that matches the id of the <code class="highlighter-rouge">.carousel</code> element.</p>
|
||||
|
||||
<h3 id="slides-only">Slides only</h3>
|
||||
|
||||
<p>Here’s a carousel with slides only. Note the presence of the <code class="highlighter-rouge">.d-block</code> and <code class="highlighter-rouge">.w-100</code> on carousel images to prevent browser default image alignment.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666" /><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555" /><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"carouselExampleSlidesOnly"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="with-controls">With controls</h3>
|
||||
|
||||
<p>Adding in the previous and next controls:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666" /><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555" /><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"carouselExampleControls"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carouselExampleControls"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Previous<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"carousel-control-next"</span> <span class="na">href=</span><span class="s">"#carouselExampleControls"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Next<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="with-indicators">With indicators</h3>
|
||||
|
||||
<p>You can also add the indicators to the carousel, alongside the controls, too.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
|
||||
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666" /><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555" /><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"carouselExampleIndicators"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">></span>
|
||||
<span class="nt"><ol</span> <span class="na">class=</span><span class="s">"carousel-indicators"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">data-target=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-slide-to=</span><span class="s">"0"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">></li></span>
|
||||
<span class="nt"><li</span> <span class="na">data-target=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-slide-to=</span><span class="s">"1"</span><span class="nt">></li></span>
|
||||
<span class="nt"><li</span> <span class="na">data-target=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-slide-to=</span><span class="s">"2"</span><span class="nt">></li></span>
|
||||
<span class="nt"></ol></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Previous<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"carousel-control-next"</span> <span class="na">href=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Next<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="with-captions">With captions</h3>
|
||||
|
||||
<p>Add captions to your slides easily with the <code class="highlighter-rouge">.carousel-caption</code> element within any <code class="highlighter-rouge">.carousel-item</code>. They can be easily hidden on smaller viewports, as shown below, with optional <a href="/docs/4.5/utilities/display/">display utilities</a>. We hide them initially with <code class="highlighter-rouge">.d-none</code> and bring them back on medium-sized devices with <code class="highlighter-rouge">.d-md-block</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666" /><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555" /><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"carouselExampleCaptions"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">></span>
|
||||
<span class="nt"><ol</span> <span class="na">class=</span><span class="s">"carousel-indicators"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">data-target=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-slide-to=</span><span class="s">"0"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">></li></span>
|
||||
<span class="nt"><li</span> <span class="na">data-target=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-slide-to=</span><span class="s">"1"</span><span class="nt">></li></span>
|
||||
<span class="nt"><li</span> <span class="na">data-target=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-slide-to=</span><span class="s">"2"</span><span class="nt">></li></span>
|
||||
<span class="nt"></ol></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="nt">></span>
|
||||
<span class="nt"><h5></span>First slide label<span class="nt"></h5></span>
|
||||
<span class="nt"><p></span>Nulla vitae elit libero, a pharetra augue mollis interdum.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="nt">></span>
|
||||
<span class="nt"><h5></span>Second slide label<span class="nt"></h5></span>
|
||||
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="nt">></span>
|
||||
<span class="nt"><h5></span>Third slide label<span class="nt"></h5></span>
|
||||
<span class="nt"><p></span>Praesent commodo cursus magna, vel scelerisque nisl consectetur.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Previous<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"carousel-control-next"</span> <span class="na">href=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Next<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="crossfade">Crossfade</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.carousel-fade</code> to your carousel to animate slides with a fade transition instead of a slide.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666" /><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555" /><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"carouselExampleFade"</span> <span class="na">class=</span><span class="s">"carousel slide carousel-fade"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carouselExampleFade"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Previous<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"carousel-control-next"</span> <span class="na">href=</span><span class="s">"#carouselExampleFade"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Next<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="individual-carousel-item-interval">Individual <code class="highlighter-rouge">.carousel-item</code> interval</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">data-interval=""</code> to a <code class="highlighter-rouge">.carousel-item</code> to change the amount of time to delay between automatically cycling to the next item.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active" data-interval="10000">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
|
||||
</div>
|
||||
<div class="carousel-item" data-interval="2000">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666" /><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555" /><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"carouselExampleInterval"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span> <span class="na">data-interval=</span><span class="s">"10000"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item"</span> <span class="na">data-interval=</span><span class="s">"2000"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carouselExampleInterval"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Previous<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"carousel-control-next"</span> <span class="na">href=</span><span class="s">"#carouselExampleInterval"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Next<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="usage">Usage</h2>
|
||||
|
||||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||
|
||||
<p>Use data attributes to easily control the position of the carousel. <code class="highlighter-rouge">data-slide</code> accepts the keywords <code class="highlighter-rouge">prev</code> or <code class="highlighter-rouge">next</code>, which alters the slide position relative to its current position. Alternatively, use <code class="highlighter-rouge">data-slide-to</code> to pass a raw slide index to the carousel <code class="highlighter-rouge">data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code class="highlighter-rouge">0</code>.</p>
|
||||
|
||||
<p>The <code class="highlighter-rouge">data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load. If you don’t use <code class="highlighter-rouge">data-ride="carousel"</code> to initialize your carousel, you have to initialize it yourself. <strong>It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.</strong></p>
|
||||
|
||||
<h3 id="via-javascript">Via JavaScript</h3>
|
||||
|
||||
<p>Call carousel manually with:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.carousel</span><span class="dl">'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">()</span></code></pre></figure>
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-interval=""</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">Type</th>
|
||||
<th style="width: 50px;">Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>interval</td>
|
||||
<td>number</td>
|
||||
<td>5000</td>
|
||||
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>keyboard</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Whether the carousel should react to keyboard events.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>pause</td>
|
||||
<td>string | boolean</td>
|
||||
<td>"hover"</td>
|
||||
<td><p>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p>
|
||||
<p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ride</td>
|
||||
<td>string</td>
|
||||
<td>false</td>
|
||||
<td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>wrap</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Whether the carousel should cycle continuously or have hard stops.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>touch</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Whether the carousel should support left/right swipe interactions on touchscreen devices.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4 id="asynchronous-methods-and-transitions">Asynchronous methods and transitions</h4>
|
||||
|
||||
<p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They return to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p>
|
||||
|
||||
<p><a href="/docs/4.5/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
|
||||
</div>
|
||||
|
||||
<h4 id="carouseloptions"><code class="highlighter-rouge">.carousel(options)</code></h4>
|
||||
|
||||
<p>Initializes the carousel with an optional options <code class="highlighter-rouge">object</code> and starts cycling through items.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.carousel</span><span class="dl">'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">({</span>
|
||||
<span class="na">interval</span><span class="p">:</span> <span class="mi">2000</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h4 id="carouselcycle"><code class="highlighter-rouge">.carousel('cycle')</code></h4>
|
||||
|
||||
<p>Cycles through the carousel items from left to right.</p>
|
||||
|
||||
<h4 id="carouselpause"><code class="highlighter-rouge">.carousel('pause')</code></h4>
|
||||
|
||||
<p>Stops the carousel from cycling through items.</p>
|
||||
|
||||
<h4 id="carouselnumber"><code class="highlighter-rouge">.carousel(number)</code></h4>
|
||||
|
||||
<p>Cycles the carousel to a particular frame (0 based, similar to an array). <strong>Returns to the caller before the target item has been shown</strong> (i.e. before the <code class="highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
|
||||
|
||||
<h4 id="carouselprev"><code class="highlighter-rouge">.carousel('prev')</code></h4>
|
||||
|
||||
<p>Cycles to the previous item. <strong>Returns to the caller before the previous item has been shown</strong> (i.e. before the <code class="highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
|
||||
|
||||
<h4 id="carouselnext"><code class="highlighter-rouge">.carousel('next')</code></h4>
|
||||
|
||||
<p>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (i.e. before the <code class="highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
|
||||
|
||||
<h4 id="carouseldispose"><code class="highlighter-rouge">.carousel('dispose')</code></h4>
|
||||
|
||||
<p>Destroys an element’s carousel.</p>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
|
||||
<p>Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">direction</code>: The direction in which the carousel is sliding (either <code class="highlighter-rouge">"left"</code> or <code class="highlighter-rouge">"right"</code>).</li>
|
||||
<li><code class="highlighter-rouge">relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
|
||||
<li><code class="highlighter-rouge">from</code>: The index of the current item</li>
|
||||
<li><code class="highlighter-rouge">to</code>: The index of the next item</li>
|
||||
</ul>
|
||||
|
||||
<p>All carousel events are fired at the carousel itself (i.e. at the <code class="highlighter-rouge"><div class="carousel"></code>).</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>slide.bs.carousel</td>
|
||||
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>slid.bs.carousel</td>
|
||||
<td>This event is fired when the carousel has completed its slide transition.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myCarousel</span><span class="dl">'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">slide.bs.carousel</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// do something...</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h3 id="change-transition-duration">Change transition duration</h3>
|
||||
|
||||
<p>The transition duration of <code class="highlighter-rouge">.carousel-item</code> can be changed with the <code class="highlighter-rouge">$carousel-transition</code> Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. <code class="highlighter-rouge">transition: transform 2s ease, opacity .5s ease-out</code>).</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
841
docs/4.5/components/collapse/index.html
Normal file
841
docs/4.5/components/collapse/index.html
Normal file
@ -0,0 +1,841 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Collapse · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/collapse/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Collapse">
|
||||
<meta name="twitter:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/collapse/">
|
||||
<meta property="og:title" content="Collapse">
|
||||
<meta property="og:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#multiple-targets">Multiple targets</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#accordion-example">Accordion example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#via-data-attributes">Via data attributes</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#via-javascript">Via JavaScript</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#options">Options</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#methods">Methods</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h4"><a href="#collapseoptions">.collapse(options)</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#collapsetoggle">.collapse('toggle')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#collapseshow">.collapse('show')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#collapsehide">.collapse('hide')</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#collapsedispose">.collapse('dispose')</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Collapse</h1>
|
||||
<p class="bd-lead">Toggle the visibility of content across your project with a few classes and our JavaScript plugins.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
|
||||
<p>The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the <code class="highlighter-rouge">height</code> from its current value to <code class="highlighter-rouge">0</code>. Given how CSS handles animations, you cannot use <code class="highlighter-rouge">padding</code> on a <code class="highlighter-rouge">.collapse</code> element. Instead, use the class as an independent wrapping element.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The animation effect of this component is dependent on the <code class="highlighter-rouge">prefers-reduced-motion</code> media query. See the <a href="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Click the buttons below to show and hide another element via class changes:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.collapse</code> hides content</li>
|
||||
<li><code class="highlighter-rouge">.collapsing</code> is applied during transitions</li>
|
||||
<li><code class="highlighter-rouge">.collapse.show</code> shows content</li>
|
||||
</ul>
|
||||
|
||||
<p>You can use a link with the <code class="highlighter-rouge">href</code> attribute, or a button with the <code class="highlighter-rouge">data-target</code> attribute. In both cases, the <code class="highlighter-rouge">data-toggle="collapse"</code> is required.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p>
|
||||
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-target
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">></span>
|
||||
Link with href
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">></span>
|
||||
Button with data-target
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">id=</span><span class="s">"collapseExample"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">></span>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="multiple-targets">Multiple targets</h2>
|
||||
|
||||
<p>A <code class="highlighter-rouge"><button></code> or <code class="highlighter-rouge"><a></code> can show and hide multiple elements by referencing them with a JQuery selector in its <code class="highlighter-rouge">href</code> or <code class="highlighter-rouge">data-target</code> attribute.
|
||||
Multiple <code class="highlighter-rouge"><button></code> or <code class="highlighter-rouge"><a></code> can show and hide an element if they each reference it with their <code class="highlighter-rouge">href</code> or <code class="highlighter-rouge">data-target</code> attribute</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p>
|
||||
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#multiCollapseExample1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1"</span><span class="nt">></span>Toggle first element<span class="nt"></a></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#multiCollapseExample2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample2"</span><span class="nt">></span>Toggle second element<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">".multi-collapse"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1 multiCollapseExample2"</span><span class="nt">></span>Toggle both elements<span class="nt"></button></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse multi-collapse"</span> <span class="na">id=</span><span class="s">"multiCollapseExample1"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">></span>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse multi-collapse"</span> <span class="na">id=</span><span class="s">"multiCollapseExample2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">></span>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="accordion-example">Accordion example</h2>
|
||||
|
||||
<p>Using the <a href="/docs/4.5/components/card/">card</a> component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use <code class="highlighter-rouge">.accordion</code> as a wrapper.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingOne">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingTwo">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingThree">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"accordion"</span> <span class="na">id=</span><span class="s">"accordionExample"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingOne"</span><span class="nt">></span>
|
||||
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-link btn-block text-left"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseOne"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">></span>
|
||||
Collapsible Group Item #1
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></h2></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseOne"</span> <span class="na">class=</span><span class="s">"collapse show"</span> <span class="na">aria-labelledby=</span><span class="s">"headingOne"</span> <span class="na">data-parent=</span><span class="s">"#accordionExample"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingTwo"</span><span class="nt">></span>
|
||||
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-link btn-block text-left collapsed"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseTwo"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">></span>
|
||||
Collapsible Group Item #2
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></h2></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseTwo"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">aria-labelledby=</span><span class="s">"headingTwo"</span> <span class="na">data-parent=</span><span class="s">"#accordionExample"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingThree"</span><span class="nt">></span>
|
||||
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-link btn-block text-left collapsed"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseThree"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">></span>
|
||||
Collapsible Group Item #3
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></h2></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseThree"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">aria-labelledby=</span><span class="s">"headingThree"</span> <span class="na">data-parent=</span><span class="s">"#accordionExample"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
|
||||
<p>Be sure to add <code class="highlighter-rouge">aria-expanded</code> to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of <code class="highlighter-rouge">aria-expanded="false"</code>. If you’ve set the collapsible element to be open by default using the <code class="highlighter-rouge">show</code> class, set <code class="highlighter-rouge">aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element’s HTML element is not a button (e.g., an <code class="highlighter-rouge"><a></code> or <code class="highlighter-rouge"><div></code>), the attribute <code class="highlighter-rouge">role="button"</code> should be added to the element.</p>
|
||||
|
||||
<p>If your control element is targeting a single collapsible element – i.e. the <code class="highlighter-rouge">data-target</code> attribute is pointing to an <code class="highlighter-rouge">id</code> selector – you should add the <code class="highlighter-rouge">aria-controls</code> attribute to the control element, containing the <code class="highlighter-rouge">id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
|
||||
|
||||
<p>Note that Bootstrap’s current implementation does not cover the various keyboard interactions described in the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#accordion">WAI-ARIA Authoring Practices 1.1 accordion pattern</a> - you will need to include these yourself with custom JavaScript.</p>
|
||||
|
||||
<h2 id="usage">Usage</h2>
|
||||
|
||||
<p>The collapse plugin utilizes a few classes to handle the heavy lifting:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.collapse</code> hides the content</li>
|
||||
<li><code class="highlighter-rouge">.collapse.show</code> shows the content</li>
|
||||
<li><code class="highlighter-rouge">.collapsing</code> is added when the transition starts, and removed when it finishes</li>
|
||||
</ul>
|
||||
|
||||
<p>These classes can be found in <code class="highlighter-rouge">_transitions.scss</code>.</p>
|
||||
|
||||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||
|
||||
<p>Just add <code class="highlighter-rouge">data-toggle="collapse"</code> and a <code class="highlighter-rouge">data-target</code> to the element to automatically assign control of one or more collapsible elements. The <code class="highlighter-rouge">data-target</code> attribute accepts a CSS selector to apply the collapse to. Be sure to add the class <code class="highlighter-rouge">collapse</code> to the collapsible element. If you’d like it to default open, add the additional class <code class="highlighter-rouge">show</code>.</p>
|
||||
|
||||
<p>To add accordion-like group management to a collapsible area, add the data attribute <code class="highlighter-rouge">data-parent="#selector"</code>. Refer to the demo to see this in action.</p>
|
||||
|
||||
<h3 id="via-javascript">Via JavaScript</h3>
|
||||
|
||||
<p>Enable manually with:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.collapse</span><span class="dl">'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">()</span></code></pre></figure>
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-parent=""</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">Type</th>
|
||||
<th style="width: 50px;">Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>parent</td>
|
||||
<td>selector | jQuery object | DOM element </td>
|
||||
<td>false</td>
|
||||
<td>If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Toggles the collapsible element on invocation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4 id="asynchronous-methods-and-transitions">Asynchronous methods and transitions</h4>
|
||||
|
||||
<p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They return to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p>
|
||||
|
||||
<p><a href="/docs/4.5/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
|
||||
</div>
|
||||
|
||||
<h4 id="collapseoptions"><code class="highlighter-rouge">.collapse(options)</code></h4>
|
||||
|
||||
<p>Activates your content as a collapsible element. Accepts an optional options <code class="highlighter-rouge">object</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myCollapsible</span><span class="dl">'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">({</span>
|
||||
<span class="na">toggle</span><span class="p">:</span> <span class="kc">false</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h4 id="collapsetoggle"><code class="highlighter-rouge">.collapse('toggle')</code></h4>
|
||||
|
||||
<p>Toggles a collapsible element to shown or hidden. <strong>Returns to the caller before the collapsible element has actually been shown or hidden</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.collapse</code> or <code class="highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
|
||||
|
||||
<h4 id="collapseshow"><code class="highlighter-rouge">.collapse('show')</code></h4>
|
||||
|
||||
<p>Shows a collapsible element. <strong>Returns to the caller before the collapsible element has actually been shown</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.collapse</code> event occurs).</p>
|
||||
|
||||
<h4 id="collapsehide"><code class="highlighter-rouge">.collapse('hide')</code></h4>
|
||||
|
||||
<p>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
|
||||
|
||||
<h4 id="collapsedispose"><code class="highlighter-rouge">.collapse('dispose')</code></h4>
|
||||
|
||||
<p>Destroys an element’s collapse.</p>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
|
||||
<p>Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show.bs.collapse</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.bs.collapse</td>
|
||||
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.bs.collapse</td>
|
||||
<td>This event is fired immediately when the <code>hide</code> method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.bs.collapse</td>
|
||||
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myCollapsible</span><span class="dl">'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden.bs.collapse</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// do something...</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1619
docs/4.5/components/dropdowns/index.html
Normal file
1619
docs/4.5/components/dropdowns/index.html
Normal file
@ -0,0 +1,1619 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Dropdowns · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/dropdowns/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Dropdowns">
|
||||
<meta name="twitter:description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/dropdowns/">
|
||||
<meta property="og:title" content="Dropdowns">
|
||||
<meta property="og:description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#single-button">Single button</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#split-button">Split button</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#sizing">Sizing</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#directions">Directions</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#dropup">Dropup</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#dropright">Dropright</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#dropleft">Dropleft</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#menu-items">Menu items</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#active">Active</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#disabled">Disabled</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#menu-alignment">Menu alignment</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#responsive-alignment">Responsive alignment</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#menu-content">Menu content</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#headers">Headers</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#dividers">Dividers</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#text">Text</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#forms">Forms</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#dropdown-options">Dropdown options</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#via-data-attributes">Via data attributes</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#via-javascript">Via JavaScript</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#options">Options</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#methods">Methods</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Dropdowns</h1>
|
||||
<p class="bd-lead">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
|
||||
<p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is <a href="https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision</a>.</p>
|
||||
|
||||
<p>Dropdowns are built on a third party library, <a href="https://popper.js.org/">Popper.js</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">popper.min.js</a> before Bootstrap’s JavaScript or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.</p>
|
||||
|
||||
<p>If you’re building our JavaScript from source, it <a href="/docs/4.5/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
|
||||
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
|
||||
<p>The <a href="https://www.w3.org/TR/wai-aria/"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr></a> standard defines an actual <a href="https://www.w3.org/WAI/PF/aria/roles#menu"><code class="highlighter-rouge">role="menu"</code> widget</a>, but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.</p>
|
||||
|
||||
<p>Bootstrap’s dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the <code class="highlighter-rouge">role</code> and <code class="highlighter-rouge">aria-</code> attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus. Authors will have to include these more specific attributes themselves.</p>
|
||||
|
||||
<p>However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual <code class="highlighter-rouge">.dropdown-item</code> elements using the cursor keys and close the menu with the <kbd>ESC</kbd> key.</p>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code class="highlighter-rouge">.dropdown</code>, or another element that declares <code class="highlighter-rouge">position: relative;</code>. Dropdowns can be triggered from <code class="highlighter-rouge"><a></code> or <code class="highlighter-rouge"><button></code> elements to better fit your potential needs.</p>
|
||||
|
||||
<h3 id="single-button">Single button</h3>
|
||||
|
||||
<p>Any single <code class="highlighter-rouge">.btn</code> can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <code class="highlighter-rouge"><button></code> elements:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown button
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuButton"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>And with <code class="highlighter-rouge"><a></code> elements:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown">
|
||||
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown link
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenuLink"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown link
|
||||
<span class="nt"></a></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuLink"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>The best part is you can do this with any button variant, too:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Example single danger button --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Action
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="split-button">Split button</h3>
|
||||
|
||||
<p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code class="highlighter-rouge">.dropdown-toggle-split</code> for proper spacing around the dropdown caret.</p>
|
||||
|
||||
<p>We use this extra class to reduce the horizontal <code class="highlighter-rouge">padding</code> on either side of the caret by 25% and remove the <code class="highlighter-rouge">margin-left</code> that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Example split danger button --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Action<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="sizing">Sizing</h2>
|
||||
|
||||
<p>Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Large button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group ml-2">
|
||||
<button type="button" class="btn btn-lg btn-secondary">Large split button</button>
|
||||
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Small button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group ml-2">
|
||||
<button type="button" class="btn btn-sm btn-secondary">Small split button</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
</div>
|
||||
<!-- /example -->
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Large button groups (default and split) --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Large button
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>
|
||||
Large split button
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- Small button groups (default and split) --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Small button
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>
|
||||
Small split button
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="directions">Directions</h2>
|
||||
|
||||
<h3 id="dropup">Dropup</h3>
|
||||
|
||||
<p>Trigger dropdown menus above elements by adding <code class="highlighter-rouge">.dropup</code> to the parent element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropup
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropup
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Default dropup button --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropup"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropup
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Dropdown menu links --></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- Split dropup button --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropup"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>
|
||||
Split dropup
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Dropdown menu links --></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="dropright">Dropright</h3>
|
||||
|
||||
<p>Trigger dropdown menus at the right of the elements by adding <code class="highlighter-rouge">.dropright</code> to the parent element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group dropright">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropright
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group dropright">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropright
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropright</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Default dropright button --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropright"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropright
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Dropdown menu links --></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- Split dropright button --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropright"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>
|
||||
Split dropright
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropright<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Dropdown menu links --></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="dropleft">Dropleft</h3>
|
||||
|
||||
<p>Trigger dropdown menus at the left of the elements by adding <code class="highlighter-rouge">.dropleft</code> to the parent element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group dropleft">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropleft
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<div class="btn-group dropleft" role="group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropleft</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropleft
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Default dropleft button --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropleft"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropleft
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Dropdown menu links --></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- Split dropleft button --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropleft"</span> <span class="na">role=</span><span class="s">"group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropleft<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Dropdown menu links --></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>
|
||||
Split dropleft
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="menu-items">Menu items</h2>
|
||||
|
||||
<p>Historically dropdown menu contents <em>had</em> to be links, but that’s no longer the case with v4. Now you can optionally use <code class="highlighter-rouge"><button></code> elements in your dropdowns instead of just <code class="highlighter-rouge"><a></code>s.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenu2"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenu2"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Action<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Another action<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Something else here<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>You can also create non-interactive dropdown items with <code class="highlighter-rouge">.dropdown-item-text</code>. Feel free to style further with custom CSS or text utilities.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown-menu">
|
||||
<span class="dropdown-item-text">Dropdown item text</span>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"dropdown-item-text"</span><span class="nt">></span>Dropdown item text<span class="nt"></span></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="active">Active</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.active</code> to items in the dropdown to <strong>style them as active</strong>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Regular link</a>
|
||||
<a class="dropdown-item active" href="#">Active link</a>
|
||||
<a class="dropdown-item" href="#">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Regular link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="disabled">Disabled</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.disabled</code> to items in the dropdown to <strong>style them as disabled</strong>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Regular link</a>
|
||||
<a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
|
||||
<a class="dropdown-item" href="#">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Regular link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="menu-alignment">Menu alignment</h2>
|
||||
|
||||
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code class="highlighter-rouge">.dropdown-menu-right</code> to a <code class="highlighter-rouge">.dropdown-menu</code> to right align the dropdown menu.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p><strong>Heads up!</strong> Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Right-aligned menu
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Right-aligned menu
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Action<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Another action<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Something else here<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="responsive-alignment">Responsive alignment</h3>
|
||||
|
||||
<p>If you want to use responsive alignment, disable dynamic positioning by adding the <code class="highlighter-rouge">data-display="static"</code> attribute and use the responsive variation classes.</p>
|
||||
|
||||
<p>To align <strong>right</strong> the dropdown menu with the given breakpoint or larger, add <code class="highlighter-rouge">.dropdown-menu{-sm|-md|-lg|-xl}-right</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
|
||||
Left-aligned but right aligned when large screen
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-lg-right">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">data-display=</span><span class="s">"static"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Left-aligned but right aligned when large screen
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-lg-right"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Action<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Another action<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Something else here<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>To align <strong>left</strong> the dropdown menu with the given breakpoint or larger, add <code class="highlighter-rouge">.dropdown-menu-right</code> and <code class="highlighter-rouge">.dropdown-menu{-sm|-md|-lg|-xl}-left</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
|
||||
Right-aligned but left aligned when large screen
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">data-display=</span><span class="s">"static"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Right-aligned but left aligned when large screen
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right dropdown-menu-lg-left"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Action<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Another action<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Something else here<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Note that you don’t need to add a <code class="highlighter-rouge">data-display="static"</code> attribute to dropdown buttons in navbars, since Popper.js isn’t used in navbars.</p>
|
||||
|
||||
<h2 id="menu-content">Menu content</h2>
|
||||
|
||||
<h3 id="headers">Headers</h3>
|
||||
|
||||
<p>Add a header to label sections of actions in any dropdown menu.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown-menu">
|
||||
<h6 class="dropdown-header">Dropdown header</h6>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"dropdown-header"</span><span class="nt">></span>Dropdown header<span class="nt"></h6></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="dividers">Dividers</h3>
|
||||
|
||||
<p>Separate groups of related menu items with a divider.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="text">Text</h3>
|
||||
|
||||
<p>Place any freeform text within a dropdown menu with text and use <a href="/docs/4.5/utilities/spacing/">spacing utilities</a>. Note that you’ll likely need additional sizing styles to constrain the menu width.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
|
||||
<p>
|
||||
Some example text that's free-flowing within the dropdown menu.
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
And this is more example text.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu p-4 text-muted"</span> <span class="na">style=</span><span class="s">"max-width: 200px;"</span><span class="nt">></span>
|
||||
<span class="nt"><p></span>
|
||||
Some example text that's free-flowing within the dropdown menu.
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>
|
||||
And this is more example text.
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="forms">Forms</h3>
|
||||
|
||||
<p>Put a form within a dropdown menu, or make it into a dropdown menu, and use <a href="/docs/4.5/utilities/spacing/">margin or padding utilities</a> to give it the negative space you require.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown-menu">
|
||||
<form class="px-4 py-3">
|
||||
<div class="form-group">
|
||||
<label for="exampleDropdownFormEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleDropdownFormPassword1">Password</label>
|
||||
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="dropdownCheck" />
|
||||
<label class="form-check-label" for="dropdownCheck">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</form>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">New around here? Sign up</a>
|
||||
<a class="dropdown-item" href="#">Forgot password?</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><form</span> <span class="na">class=</span><span class="s">"px-4 py-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleDropdownFormEmail1"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleDropdownFormEmail1"</span> <span class="na">placeholder=</span><span class="s">"email@example.com"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleDropdownFormPassword1"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleDropdownFormPassword1"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">id=</span><span class="s">"dropdownCheck"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"dropdownCheck"</span><span class="nt">></span>
|
||||
Remember me
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Sign in<span class="nt"></button></span>
|
||||
<span class="nt"></form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>New around here? Sign up<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Forgot password?<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="dropdown-menu p-4">
|
||||
<div class="form-group">
|
||||
<label for="exampleDropdownFormEmail2">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleDropdownFormPassword2">Password</label>
|
||||
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="dropdownCheck2" />
|
||||
<label class="form-check-label" for="dropdownCheck2">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"dropdown-menu p-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleDropdownFormEmail2"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleDropdownFormEmail2"</span> <span class="na">placeholder=</span><span class="s">"email@example.com"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleDropdownFormPassword2"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleDropdownFormPassword2"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">id=</span><span class="s">"dropdownCheck2"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"dropdownCheck2"</span><span class="nt">></span>
|
||||
Remember me
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Sign in<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h2 id="dropdown-options">Dropdown options</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">data-offset</code> or <code class="highlighter-rouge">data-reference</code> to change the location of the dropdown.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex">
|
||||
<div class="dropdown mr-1">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
|
||||
Offset
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Reference</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown mr-1"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">id=</span><span class="s">"dropdownMenuOffset"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">data-offset=</span><span class="s">"10,20"</span><span class="nt">></span>
|
||||
Offset
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuOffset"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Reference<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">id=</span><span class="s">"dropdownMenuReference"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">data-reference=</span><span class="s">"parent"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuReference"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="usage">Usage</h2>
|
||||
|
||||
<p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code class="highlighter-rouge">.show</code> class on the parent list item. The <code class="highlighter-rouge">data-toggle="dropdown"</code> attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>On touch-enabled devices, opening a dropdown adds empty (<code class="highlighter-rouge">$.noop</code>) <code class="highlighter-rouge">mouseover</code> handlers to the immediate children of the <code class="highlighter-rouge"><body></code> element. This admittedly ugly hack is necessary to work around a <a href="https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html">quirk in iOS’ event delegation</a>, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty <code class="highlighter-rouge">mouseover</code> handlers are removed.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">id=</span><span class="s">"dLabel"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown trigger
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dLabel"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="via-javascript">Via JavaScript</h3>
|
||||
|
||||
<p>Call the dropdowns via JavaScript:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.dropdown-toggle</span><span class="dl">'</span><span class="p">).</span><span class="nx">dropdown</span><span class="p">()</span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h5 id="data-toggledropdown-still-required"><code class="highlighter-rouge">data-toggle="dropdown"</code> still required</h5>
|
||||
|
||||
<p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code class="highlighter-rouge">data-toggle="dropdown"</code> is always required to be present on the dropdown’s trigger element.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="options">Options</h3>
|
||||
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-offset=""</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">Type</th>
|
||||
<th style="width: 50px;">Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>offset</td>
|
||||
<td>number | string | function</td>
|
||||
<td>0</td>
|
||||
<td>
|
||||
<p>Offset of the dropdown relative to its target.</p>
|
||||
<p>When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.</p>
|
||||
<p>For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..offset.offset">offset docs</a>.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>flip</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..flip.enabled">flip docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>boundary</td>
|
||||
<td>string | element</td>
|
||||
<td>'scrollParent'</td>
|
||||
<td>Overflow constraint boundary of the dropdown menu. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>reference</td>
|
||||
<td>string | element</td>
|
||||
<td>'toggle'</td>
|
||||
<td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper.js's <a href="https://popper.js.org/docs/v1/#referenceObject">referenceObject docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>display</td>
|
||||
<td>string</td>
|
||||
<td>'dynamic'</td>
|
||||
<td>By default, we use Popper.js for dynamic positioning. Disable this with <code>static</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>popperConfig</td>
|
||||
<td>null | object</td>
|
||||
<td>null</td>
|
||||
<td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults">Popper.js's configuration</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>Note when <code class="highlighter-rouge">boundary</code> is set to any value other than <code class="highlighter-rouge">'scrollParent'</code>, the style <code class="highlighter-rouge">position: static</code> is applied to the <code class="highlighter-rouge">.dropdown</code> container.</p>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().dropdown('toggle')</code></td>
|
||||
<td>Toggles the dropdown menu of a given navbar or tabbed navigation.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().dropdown('show')</code></td>
|
||||
<td>Shows the dropdown menu of a given navbar or tabbed navigation.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().dropdown('hide')</code></td>
|
||||
<td>Hides the dropdown menu of a given navbar or tabbed navigation.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().dropdown('update')</code></td>
|
||||
<td>Updates the position of an element’s dropdown.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$().dropdown('dispose')</code></td>
|
||||
<td>Destroys an element’s dropdown.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
|
||||
<p>All dropdown events are fired at the <code class="highlighter-rouge">.dropdown-menu</code>’s parent element and have a <code class="highlighter-rouge">relatedTarget</code> property, whose value is the toggling anchor element.
|
||||
<code class="highlighter-rouge">hide.bs.dropdown</code> and <code class="highlighter-rouge">hidden.bs.dropdown</code> events have a <code class="highlighter-rouge">clickEvent</code> property (only when the original event type is <code class="highlighter-rouge">click</code>) that contains an Event Object for the click event.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">show.bs.dropdown</code></td>
|
||||
<td>This event fires immediately when the show instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">shown.bs.dropdown</code></td>
|
||||
<td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">hide.bs.dropdown</code></td>
|
||||
<td>This event is fired immediately when the hide instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">hidden.bs.dropdown</code></td>
|
||||
<td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myDropdown</span><span class="dl">'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">show.bs.dropdown</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// do something...</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
2797
docs/4.5/components/forms/index.html
Normal file
2797
docs/4.5/components/forms/index.html
Normal file
@ -0,0 +1,2797 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Forms · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/forms/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Forms">
|
||||
<meta name="twitter:description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/forms/">
|
||||
<meta property="og:title" content="Forms">
|
||||
<meta property="og:description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#form-controls">Form controls</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#sizing">Sizing</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#readonly">Readonly</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#readonly-plain-text">Readonly plain text</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#range-inputs">Range Inputs</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#checkboxes-and-radios">Checkboxes and radios</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#default-stacked">Default (stacked)</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#inline">Inline</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#without-labels">Without labels</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#layout">Layout</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#form-groups">Form groups</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#form-grid">Form grid</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h4"><a href="#form-row">Form row</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#horizontal-form">Horizontal form</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#column-sizing">Column sizing</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#auto-sizing">Auto-sizing</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h3"><a href="#inline-forms">Inline forms</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#help-text">Help text</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#disabled-forms">Disabled forms</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#validation">Validation</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#how-it-works">How it works</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#custom-styles">Custom styles</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#browser-defaults">Browser defaults</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#server-side">Server side</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#supported-elements">Supported elements</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#tooltips">Tooltips</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#customizing">Customizing</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#input-group-validation-workaround">Input group validation workaround</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#custom-forms">Custom forms</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#checkboxes-and-radios-1">Checkboxes and radios</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h4"><a href="#checkboxes">Checkboxes</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#radios">Radios</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#inline-1">Inline</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#disabled">Disabled</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h3"><a href="#switches">Switches</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#select-menu">Select menu</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#range">Range</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#file-browser">File browser</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h4"><a href="#translating-or-customizing-the-strings-with-scss">Translating or customizing the strings with SCSS</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#translating-or-customizing-the-strings-with-html">Translating or customizing the strings with HTML</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Forms</h1>
|
||||
<p class="bd-lead">Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
|
||||
<p>Bootstrap’s form controls expand on <a href="/docs/4.5/content/reboot/#forms">our Rebooted form styles</a> with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.</p>
|
||||
|
||||
<p>Be sure to use an appropriate <code class="highlighter-rouge">type</code> attribute on all inputs (e.g., <code class="highlighter-rouge">email</code> for email address or <code class="highlighter-rouge">number</code> for numerical information) to take advantage of newer input controls like email verification, number selection, and more.</p>
|
||||
|
||||
<p>Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
|
||||
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword1">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" />
|
||||
</div>
|
||||
<div class="form-group form-check">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1" />
|
||||
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleInputEmail1"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail1"</span> <span class="na">aria-describedby=</span><span class="s">"emailHelp"</span><span class="nt">></span>
|
||||
<span class="nt"><small</span> <span class="na">id=</span><span class="s">"emailHelp"</span> <span class="na">class=</span><span class="s">"form-text text-muted"</span><span class="nt">></span>We'll never share your email with anyone else.<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleInputPassword1"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputPassword1"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">id=</span><span class="s">"exampleCheck1"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"exampleCheck1"</span><span class="nt">></span>Check me out<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Submit<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h2 id="form-controls">Form controls</h2>
|
||||
|
||||
<p>Textual form controls—like <code class="highlighter-rouge"><input></code>s, <code class="highlighter-rouge"><select></code>s, and <code class="highlighter-rouge"><textarea></code>s—are styled with the <code class="highlighter-rouge">.form-control</code> class. Included are styles for general appearance, focus state, sizing, and more.</p>
|
||||
|
||||
<p>Be sure to explore our <a href="#custom-forms">custom forms</a> to further style <code class="highlighter-rouge"><select></code>s.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlInput1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlSelect1">Example select</label>
|
||||
<select class="form-control" id="exampleFormControlSelect1">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlSelect2">Example multiple select</label>
|
||||
<select multiple="" class="form-control" id="exampleFormControlSelect2">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlTextarea1">Example textarea</label>
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlInput1"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlInput1"</span> <span class="na">placeholder=</span><span class="s">"name@example.com"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlSelect1"</span><span class="nt">></span>Example select<span class="nt"></label></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlSelect1"</span><span class="nt">></span>
|
||||
<span class="nt"><option></span>1<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>2<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>3<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>4<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>5<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlSelect2"</span><span class="nt">></span>Example multiple select<span class="nt"></label></span>
|
||||
<span class="nt"><select</span> <span class="na">multiple</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlSelect2"</span><span class="nt">></span>
|
||||
<span class="nt"><option></span>1<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>2<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>3<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>4<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>5<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlTextarea1"</span><span class="nt">></span>Example textarea<span class="nt"></label></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlTextarea1"</span> <span class="na">rows=</span><span class="s">"3"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<p>For file inputs, swap the <code class="highlighter-rouge">.form-control</code> for <code class="highlighter-rouge">.form-control-file</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlFile1">Example file input</label>
|
||||
<input type="file" class="form-control-file" id="exampleFormControlFile1" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlFile1"</span><span class="nt">></span>Example file input<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"form-control-file"</span> <span class="na">id=</span><span class="s">"exampleFormControlFile1"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h3 id="sizing">Sizing</h3>
|
||||
|
||||
<p>Set heights using classes like <code class="highlighter-rouge">.form-control-lg</code> and <code class="highlighter-rouge">.form-control-sm</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" />
|
||||
<input class="form-control" type="text" placeholder="Default input" />
|
||||
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" />
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control form-control-lg"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">".form-control-lg"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Default input"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control form-control-sm"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">".form-control-sm"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<select class="form-control form-control-lg">
|
||||
<option>Large select</option>
|
||||
</select>
|
||||
<select class="form-control">
|
||||
<option>Default select</option>
|
||||
</select>
|
||||
<select class="form-control form-control-sm">
|
||||
<option>Small select</option>
|
||||
</select>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control form-control-lg"</span><span class="nt">></span>
|
||||
<span class="nt"><option></span>Large select<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><option></span>Default select<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control form-control-sm"</span><span class="nt">></span>
|
||||
<span class="nt"><option></span>Small select<span class="nt"></option></span>
|
||||
<span class="nt"></select></span></code></pre></figure>
|
||||
|
||||
<h3 id="readonly">Readonly</h3>
|
||||
|
||||
<p>Add the <code class="highlighter-rouge">readonly</code> boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<input class="form-control" type="text" placeholder="Readonly input here..." readonly="" />
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Readonly input here..."</span> <span class="na">readonly</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<h3 id="readonly-plain-text">Readonly plain text</h3>
|
||||
|
||||
<p>If you want to have <code class="highlighter-rouge"><input readonly></code> elements in your form styled as plain text, use the <code class="highlighter-rouge">.form-control-plaintext</code> class to remove the default form field styling and preserve the correct margin and padding.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" readonly="" class="form-control-plaintext" id="staticEmail" value="email@example.com" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="password" class="form-control" id="inputPassword" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"staticEmail"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label"</span><span class="nt">></span>Email<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">readonly</span> <span class="na">class=</span><span class="s">"form-control-plaintext"</span> <span class="na">id=</span><span class="s">"staticEmail"</span> <span class="na">value=</span><span class="s">"email@example.com"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="form-inline">
|
||||
<div class="form-group mb-2">
|
||||
<label for="staticEmail2" class="sr-only">Email</label>
|
||||
<input type="text" readonly="" class="form-control-plaintext" id="staticEmail2" value="email@example.com" />
|
||||
</div>
|
||||
<div class="form-group mx-sm-3 mb-2">
|
||||
<label for="inputPassword2" class="sr-only">Password</label>
|
||||
<input type="password" class="form-control" id="inputPassword2" placeholder="Password" />
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group mb-2"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"staticEmail2"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Email<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">readonly</span> <span class="na">class=</span><span class="s">"form-control-plaintext"</span> <span class="na">id=</span><span class="s">"staticEmail2"</span> <span class="na">value=</span><span class="s">"email@example.com"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group mx-sm-3 mb-2"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword2"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword2"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary mb-2"</span><span class="nt">></span>Confirm identity<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h2 id="range-inputs">Range Inputs</h2>
|
||||
|
||||
<p>Set horizontally scrollable range inputs using <code class="highlighter-rouge">.form-control-range</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="formControlRange">Example Range input</label>
|
||||
<input type="range" class="form-control-range" id="formControlRange" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"formControlRange"</span><span class="nt">></span>Example Range input<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"form-control-range"</span> <span class="na">id=</span><span class="s">"formControlRange"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h2 id="checkboxes-and-radios">Checkboxes and radios</h2>
|
||||
|
||||
<p>Default checkboxes and radios are improved upon with the help of <code class="highlighter-rouge">.form-check</code>, <strong>a single class for both input types that improves the layout and behavior of their HTML elements</strong>. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
|
||||
|
||||
<p>Disabled checkboxes and radios are supported. The <code class="highlighter-rouge">disabled</code> attribute will apply a lighter color to help indicate the input’s state.</p>
|
||||
|
||||
<p>Checkboxes and radio buttons support HTML-based form validation and provide concise, accessible labels. As such, our <code class="highlighter-rouge"><input></code>s and <code class="highlighter-rouge"><label></code>s are sibling elements as opposed to an <code class="highlighter-rouge"><input></code> within a <code class="highlighter-rouge"><label></code>. This is slightly more verbose as you must specify <code class="highlighter-rouge">id</code> and <code class="highlighter-rouge">for</code> attributes to relate the <code class="highlighter-rouge"><input></code> and <code class="highlighter-rouge"><label></code>.</p>
|
||||
|
||||
<h3 id="default-stacked">Default (stacked)</h3>
|
||||
|
||||
<p>By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with <code class="highlighter-rouge">.form-check</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1" />
|
||||
<label class="form-check-label" for="defaultCheck1">
|
||||
Default checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled="" />
|
||||
<label class="form-check-label" for="defaultCheck2">
|
||||
Disabled checkbox
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"defaultCheck1"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"defaultCheck1"</span><span class="nt">></span>
|
||||
Default checkbox
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"defaultCheck2"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"defaultCheck2"</span><span class="nt">></span>
|
||||
Disabled checkbox
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked="" />
|
||||
<label class="form-check-label" for="exampleRadios1">
|
||||
Default radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" />
|
||||
<label class="form-check-label" for="exampleRadios2">
|
||||
Second default radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled="" />
|
||||
<label class="form-check-label" for="exampleRadios3">
|
||||
Disabled radio
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios"</span> <span class="na">id=</span><span class="s">"exampleRadios1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">checked</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"exampleRadios1"</span><span class="nt">></span>
|
||||
Default radio
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios"</span> <span class="na">id=</span><span class="s">"exampleRadios2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"exampleRadios2"</span><span class="nt">></span>
|
||||
Second default radio
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios"</span> <span class="na">id=</span><span class="s">"exampleRadios3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"exampleRadios3"</span><span class="nt">></span>
|
||||
Disabled radio
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="inline">Inline</h3>
|
||||
|
||||
<p>Group checkboxes or radios on the same horizontal row by adding <code class="highlighter-rouge">.form-check-inline</code> to any <code class="highlighter-rouge">.form-check</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" />
|
||||
<label class="form-check-label" for="inlineCheckbox1">1</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" />
|
||||
<label class="form-check-label" for="inlineCheckbox2">2</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled="" />
|
||||
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox1"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineCheckbox1"</span><span class="nt">></span>1<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineCheckbox2"</span><span class="nt">></span>2<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineCheckbox3"</span><span class="nt">></span>3 (disabled)<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" />
|
||||
<label class="form-check-label" for="inlineRadio1">1</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" />
|
||||
<label class="form-check-label" for="inlineRadio2">2</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled="" />
|
||||
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio1"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineRadio1"</span><span class="nt">></span>1<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineRadio2"</span><span class="nt">></span>2<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineRadio3"</span><span class="nt">></span>3 (disabled)<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="without-labels">Without labels</h3>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.position-static</code> to inputs within <code class="highlighter-rouge">.form-check</code> that don’t have any label text. Remember to still provide some form of label for assistive technologies (for instance, using <code class="highlighter-rouge">aria-label</code>).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="..." />
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..." />
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input position-static"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"blankCheckbox"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input position-static"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"blankRadio"</span> <span class="na">id=</span><span class="s">"blankRadio1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="layout">Layout</h2>
|
||||
|
||||
<p>Since Bootstrap applies <code class="highlighter-rouge">display: block</code> and <code class="highlighter-rouge">width: 100%</code> to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.</p>
|
||||
|
||||
<h3 id="form-groups">Form groups</h3>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.form-group</code> class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies <code class="highlighter-rouge">margin-bottom</code>, but it picks up additional styles in <code class="highlighter-rouge">.form-inline</code> as needed. Use it with <code class="highlighter-rouge"><fieldset></code>s, <code class="highlighter-rouge"><div></code>s, or nearly any other element.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="formGroupExampleInput">Example label</label>
|
||||
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="formGroupExampleInput2">Another label</label>
|
||||
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"formGroupExampleInput"</span><span class="nt">></span>Example label<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"formGroupExampleInput"</span> <span class="na">placeholder=</span><span class="s">"Example input placeholder"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"formGroupExampleInput2"</span><span class="nt">></span>Another label<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"formGroupExampleInput2"</span> <span class="na">placeholder=</span><span class="s">"Another input placeholder"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h3 id="form-grid">Form grid</h3>
|
||||
|
||||
<p>More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="First name" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Last name" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"First name"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h4 id="form-row">Form row</h4>
|
||||
|
||||
<p>You may also swap <code class="highlighter-rouge">.row</code> for <code class="highlighter-rouge">.form-row</code>, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="First name" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Last name" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"First name"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<p>More complex layouts can also be created with the grid system.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="inputEmail4">Email</label>
|
||||
<input type="email" class="form-control" id="inputEmail4" />
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="inputPassword4">Password</label>
|
||||
<input type="password" class="form-control" id="inputPassword4" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputAddress">Address</label>
|
||||
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputAddress2">Address 2</label>
|
||||
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="inputCity">City</label>
|
||||
<input type="text" class="form-control" id="inputCity" />
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="inputState">State</label>
|
||||
<select id="inputState" class="form-control">
|
||||
<option selected="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-2">
|
||||
<label for="inputZip">Zip</label>
|
||||
<input type="text" class="form-control" id="inputZip" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="gridCheck" />
|
||||
<label class="form-check-label" for="gridCheck">
|
||||
Check me out
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputEmail4"</span><span class="nt">></span>Email<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputEmail4"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword4"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword4"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputAddress"</span><span class="nt">></span>Address<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputAddress"</span> <span class="na">placeholder=</span><span class="s">"1234 Main St"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputAddress2"</span><span class="nt">></span>Address 2<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputAddress2"</span> <span class="na">placeholder=</span><span class="s">"Apartment, studio, or floor"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputCity"</span><span class="nt">></span>City<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputCity"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-4"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputState"</span><span class="nt">></span>State<span class="nt"></label></span>
|
||||
<span class="nt"><select</span> <span class="na">id=</span><span class="s">"inputState"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>...<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-2"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputZip"</span><span class="nt">></span>Zip<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputZip"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"gridCheck"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"gridCheck"</span><span class="nt">></span>
|
||||
Check me out
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Sign in<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h4 id="horizontal-form">Horizontal form</h4>
|
||||
|
||||
<p>Create horizontal forms with the grid by adding the <code class="highlighter-rouge">.row</code> class to form groups and using the <code class="highlighter-rouge">.col-*-*</code> classes to specify the width of your labels and controls. Be sure to add <code class="highlighter-rouge">.col-form-label</code> to your <code class="highlighter-rouge"><label></code>s as well so they’re vertically centered with their associated form controls.</p>
|
||||
|
||||
<p>At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the <code class="highlighter-rouge">padding-top</code> on our stacked radio inputs label to better align the text baseline.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="inputEmail3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="password" class="form-control" id="inputPassword3" />
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<div class="row">
|
||||
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked="" />
|
||||
<label class="form-check-label" for="gridRadios1">
|
||||
First radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2" />
|
||||
<label class="form-check-label" for="gridRadios2">
|
||||
Second radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check disabled">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled="" />
|
||||
<label class="form-check-label" for="gridRadios3">
|
||||
Third disabled radio
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-2">Checkbox</div>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="gridCheck1" />
|
||||
<label class="form-check-label" for="gridCheck1">
|
||||
Example checkbox
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-10">
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputEmail3"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label"</span><span class="nt">></span>Email<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputEmail3"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword3"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword3"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><fieldset</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||||
<span class="nt"><legend</span> <span class="na">class=</span><span class="s">"col-form-label col-sm-2 pt-0"</span><span class="nt">></span>Radios<span class="nt"></legend></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gridRadios"</span> <span class="na">id=</span><span class="s">"gridRadios1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">checked</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"gridRadios1"</span><span class="nt">></span>
|
||||
First radio
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gridRadios"</span> <span class="na">id=</span><span class="s">"gridRadios2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"gridRadios2"</span><span class="nt">></span>
|
||||
Second radio
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check disabled"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"gridRadios"</span> <span class="na">id=</span><span class="s">"gridRadios3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"gridRadios3"</span><span class="nt">></span>
|
||||
Third disabled radio
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></fieldset></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-2"</span><span class="nt">></span>Checkbox<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"gridCheck1"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"gridCheck1"</span><span class="nt">></span>
|
||||
Example checkbox
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Sign in<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h5 id="horizontal-form-label-sizing">Horizontal form label sizing</h5>
|
||||
|
||||
<p>Be sure to use <code class="highlighter-rouge">.col-form-label-sm</code> or <code class="highlighter-rouge">.col-form-label-lg</code> to your <code class="highlighter-rouge"><label></code>s or <code class="highlighter-rouge"><legend></code>s to correctly follow the size of <code class="highlighter-rouge">.form-control-lg</code> and <code class="highlighter-rouge">.form-control-sm</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"colFormLabelSm"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label col-form-label-sm"</span><span class="nt">></span>Email<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control form-control-sm"</span> <span class="na">id=</span><span class="s">"colFormLabelSm"</span> <span class="na">placeholder=</span><span class="s">"col-form-label-sm"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"colFormLabel"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label"</span><span class="nt">></span>Email<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"colFormLabel"</span> <span class="na">placeholder=</span><span class="s">"col-form-label"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group row"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"colFormLabelLg"</span> <span class="na">class=</span><span class="s">"col-sm-2 col-form-label col-form-label-lg"</span><span class="nt">></span>Email<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control form-control-lg"</span> <span class="na">id=</span><span class="s">"colFormLabelLg"</span> <span class="na">placeholder=</span><span class="s">"col-form-label-lg"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h4 id="column-sizing">Column sizing</h4>
|
||||
|
||||
<p>As shown in the previous examples, our grid system allows you to place any number of <code class="highlighter-rouge">.col</code>s within a <code class="highlighter-rouge">.row</code> or <code class="highlighter-rouge">.form-row</code>. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining <code class="highlighter-rouge">.col</code>s equally split the rest, with specific column classes like <code class="highlighter-rouge">.col-7</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control" placeholder="City" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="State" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Zip" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-7"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"City"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"State"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Zip"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h4 id="auto-sizing">Auto-sizing</h4>
|
||||
|
||||
<p>The example below uses a flexbox utility to vertically center the contents and changes <code class="highlighter-rouge">.col</code> to <code class="highlighter-rouge">.col-auto</code> so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-row align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="sr-only" for="inlineFormInput">Name</label>
|
||||
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe" />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="sr-only" for="inlineFormInputGroup">Username</label>
|
||||
<div class="input-group mb-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="autoSizingCheck" />
|
||||
<label class="form-check-label" for="autoSizingCheck">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="submit" class="btn btn-primary mb-2">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row align-items-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormInput"</span><span class="nt">></span>Name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control mb-2"</span> <span class="na">id=</span><span class="s">"inlineFormInput"</span> <span class="na">placeholder=</span><span class="s">"Jane Doe"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormInputGroup"</span><span class="nt">></span>Username<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>@<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inlineFormInputGroup"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check mb-2"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"autoSizingCheck"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"autoSizingCheck"</span><span class="nt">></span>
|
||||
Remember me
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary mb-2"</span><span class="nt">></span>Submit<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<p>You can then remix that once again with size-specific column classes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-row align-items-center">
|
||||
<div class="col-sm-3 my-1">
|
||||
<label class="sr-only" for="inlineFormInputName">Name</label>
|
||||
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe" />
|
||||
</div>
|
||||
<div class="col-sm-3 my-1">
|
||||
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="autoSizingCheck2" />
|
||||
<label class="form-check-label" for="autoSizingCheck2">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row align-items-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-3 my-1"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormInputName"</span><span class="nt">></span>Name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inlineFormInputName"</span> <span class="na">placeholder=</span><span class="s">"Jane Doe"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-3 my-1"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormInputGroupUsername"</span><span class="nt">></span>Username<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>@<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inlineFormInputGroupUsername"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto my-1"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"autoSizingCheck2"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"autoSizingCheck2"</span><span class="nt">></span>
|
||||
Remember me
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto my-1"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Submit<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<p>And of course <a href="#custom-forms">custom form controls</a> are supported.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-row align-items-center">
|
||||
<div class="col-auto my-1">
|
||||
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
|
||||
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
|
||||
<option selected="">Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<div class="custom-control custom-checkbox mr-sm-2">
|
||||
<input type="checkbox" class="custom-control-input" id="customControlAutosizing" />
|
||||
<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row align-items-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto my-1"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"mr-sm-2 sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormCustomSelect"</span><span class="nt">></span>Preference<span class="nt"></label></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select mr-sm-2"</span> <span class="na">id=</span><span class="s">"inlineFormCustomSelect"</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto my-1"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox mr-sm-2"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customControlAutosizing"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customControlAutosizing"</span><span class="nt">></span>Remember my preference<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto my-1"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Submit<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h3 id="inline-forms">Inline forms</h3>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.form-inline</code> class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.</p>
|
||||
|
||||
<ul>
|
||||
<li>Controls are <code class="highlighter-rouge">display: flex</code>, collapsing any HTML white space and allowing you to provide alignment control with <a href="/docs/4.5/utilities/spacing/">spacing</a> and <a href="/docs/4.5/utilities/flex/">flexbox</a> utilities.</li>
|
||||
<li>Controls and input groups receive <code class="highlighter-rouge">width: auto</code> to override the Bootstrap default <code class="highlighter-rouge">width: 100%</code>.</li>
|
||||
<li>Controls <strong>only appear inline in viewports that are at least 576px wide</strong> to account for narrow viewports on mobile devices.</li>
|
||||
</ul>
|
||||
|
||||
<p>You may need to manually address the width and alignment of individual form controls with <a href="/docs/4.5/utilities/spacing/">spacing utilities</a> (as shown below). Lastly, be sure to always include a <code class="highlighter-rouge"><label></code> with each form control, even if you need to hide it from non-screenreader visitors with <code class="highlighter-rouge">.sr-only</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="form-inline">
|
||||
<label class="sr-only" for="inlineFormInputName2">Name</label>
|
||||
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe" />
|
||||
|
||||
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
|
||||
<div class="input-group mb-2 mr-sm-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username" />
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-2 mr-sm-2">
|
||||
<input class="form-check-input" type="checkbox" id="inlineFormCheck" />
|
||||
<label class="form-check-label" for="inlineFormCheck">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary mb-2">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormInputName2"</span><span class="nt">></span>Name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control mb-2 mr-sm-2"</span> <span class="na">id=</span><span class="s">"inlineFormInputName2"</span> <span class="na">placeholder=</span><span class="s">"Jane Doe"</span><span class="nt">></span>
|
||||
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inlineFormInputGroupUsername2"</span><span class="nt">></span>Username<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-2 mr-sm-2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>@<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inlineFormInputGroupUsername2"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check mb-2 mr-sm-2"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineFormCheck"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"inlineFormCheck"</span><span class="nt">></span>
|
||||
Remember me
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary mb-2"</span><span class="nt">></span>Submit<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<p>Custom form controls and selects are also supported.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="form-inline">
|
||||
<label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
|
||||
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
|
||||
<option selected="">Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
|
||||
<div class="custom-control custom-checkbox my-1 mr-sm-2">
|
||||
<input type="checkbox" class="custom-control-input" id="customControlInline" />
|
||||
<label class="custom-control-label" for="customControlInline">Remember my preference</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary my-1">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"my-1 mr-2"</span> <span class="na">for=</span><span class="s">"inlineFormCustomSelectPref"</span><span class="nt">></span>Preference<span class="nt"></label></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select my-1 mr-sm-2"</span> <span class="na">id=</span><span class="s">"inlineFormCustomSelectPref"</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox my-1 mr-sm-2"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customControlInline"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customControlInline"</span><span class="nt">></span>Remember my preference<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary my-1"</span><span class="nt">></span>Submit<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="alternatives-to-hidden-labels">Alternatives to hidden labels</h5>
|
||||
<p>Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the <code class="highlighter-rouge">.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code class="highlighter-rouge">aria-label</code>, <code class="highlighter-rouge">aria-labelledby</code> or <code class="highlighter-rouge">title</code> attribute. If none of these are present, assistive technologies may resort to using the <code class="highlighter-rouge">placeholder</code> attribute, if present, but note that use of <code class="highlighter-rouge">placeholder</code> as a replacement for other labelling methods is not advised.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="help-text">Help text</h2>
|
||||
|
||||
<p>Block-level help text in forms can be created using <code class="highlighter-rouge">.form-text</code> (previously known as <code class="highlighter-rouge">.help-block</code> in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like <code class="highlighter-rouge">.text-muted</code>.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="associating-help-text-with-form-controls">Associating help text with form controls</h5>
|
||||
|
||||
<p>Help text should be explicitly associated with the form control it relates to using the <code class="highlighter-rouge">aria-describedby</code> attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.</p>
|
||||
</div>
|
||||
|
||||
<p>Help text below inputs can be styled with <code class="highlighter-rouge">.form-text</code>. This class includes <code class="highlighter-rouge">display: block</code> and adds some top margin for easy spacing from the inputs above.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<label for="inputPassword5">Password</label>
|
||||
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock" />
|
||||
<small id="passwordHelpBlock" class="form-text text-muted">
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
|
||||
</small>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword5"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">id=</span><span class="s">"inputPassword5"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-describedby=</span><span class="s">"passwordHelpBlock"</span><span class="nt">></span>
|
||||
<span class="nt"><small</span> <span class="na">id=</span><span class="s">"passwordHelpBlock"</span> <span class="na">class=</span><span class="s">"form-text text-muted"</span><span class="nt">></span>
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
|
||||
<span class="nt"></small></span></code></pre></figure>
|
||||
|
||||
<p>Inline text can use any typical inline HTML element (be it a <code class="highlighter-rouge"><small></code>, <code class="highlighter-rouge"><span></code>, or something else) with nothing more than a utility class.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<label for="inputPassword6">Password</label>
|
||||
<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline" />
|
||||
<small id="passwordHelpInline" class="text-muted">
|
||||
Must be 8-20 characters long.
|
||||
</small>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword6"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">id=</span><span class="s">"inputPassword6"</span> <span class="na">class=</span><span class="s">"form-control mx-sm-3"</span> <span class="na">aria-describedby=</span><span class="s">"passwordHelpInline"</span><span class="nt">></span>
|
||||
<span class="nt"><small</span> <span class="na">id=</span><span class="s">"passwordHelpInline"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>
|
||||
Must be 8-20 characters long.
|
||||
<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h2 id="disabled-forms">Disabled forms</h2>
|
||||
|
||||
<p>Add the <code class="highlighter-rouge">disabled</code> boolean attribute on an input to prevent user interactions and make it appear lighter.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"disabledInput"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Disabled input here..."</span> <span class="na">disabled</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<p>Add the <code class="highlighter-rouge">disabled</code> attribute to a <code class="highlighter-rouge"><fieldset></code> to disable all the controls within.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<fieldset disabled="">
|
||||
<div class="form-group">
|
||||
<label for="disabledTextInput">Disabled input</label>
|
||||
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="disabledSelect">Disabled select menu</label>
|
||||
<select id="disabledSelect" class="form-control">
|
||||
<option>Disabled select</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled="" />
|
||||
<label class="form-check-label" for="disabledFieldsetCheck">
|
||||
Can't check this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><fieldset</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"disabledTextInput"</span><span class="nt">></span>Disabled input<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"disabledTextInput"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Disabled input"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"disabledSelect"</span><span class="nt">></span>Disabled select menu<span class="nt"></label></span>
|
||||
<span class="nt"><select</span> <span class="na">id=</span><span class="s">"disabledSelect"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><option></span>Disabled select<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"disabledFieldsetCheck"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"disabledFieldsetCheck"</span><span class="nt">></span>
|
||||
Can't check this
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Submit<span class="nt"></button></span>
|
||||
<span class="nt"></fieldset></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="caveat-with-anchors">Caveat with anchors</h5>
|
||||
|
||||
<p>By default, browsers will treat all native form controls (<code class="highlighter-rouge"><input></code>, <code class="highlighter-rouge"><select></code> and <code class="highlighter-rouge"><button></code> elements) inside a <code class="highlighter-rouge"><fieldset disabled></code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code class="highlighter-rouge"><a ... class="btn btn-*"></code> elements, these will only be given a style of <code class="highlighter-rouge">pointer-events: none</code>. As noted in the section about <a href="/docs/4.5/components/buttons/#disabled-state">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in Internet Explorer 10, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-danger">
|
||||
<h4 id="cross-browser-compatibility">Cross-browser compatibility</h4>
|
||||
|
||||
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the <code class="highlighter-rouge">disabled</code> attribute on a <code class="highlighter-rouge"><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="validation">Validation</h2>
|
||||
|
||||
<p>Provide valuable, actionable feedback to your users with HTML5 form validation–<a href="https://caniuse.com/#feat=form-validation">available in all our supported browsers</a>. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<p>We currently recommend using custom validation styles, as native browser default validation messages are not consistently exposed to assistive technologies in all browsers (most notably, Chrome on desktop and mobile).</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="input-group-validation">Input group validation</h5>
|
||||
<p>Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the <code class="highlighter-rouge">.input-group</code> that has <code class="highlighter-rouge">.is-{valid|invalid}</code>. Placing feedback messages within input groups breaks the <code class="highlighter-rouge">border-radius</code>. <a href="#input-group-validation-workaround">See this workaround</a>.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="how-it-works">How it works</h3>
|
||||
|
||||
<p>Here’s how form validation works with Bootstrap:</p>
|
||||
|
||||
<ul>
|
||||
<li>HTML form validation is applied via CSS’s two pseudo-classes, <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code>. It applies to <code class="highlighter-rouge"><input></code>, <code class="highlighter-rouge"><select></code>, and <code class="highlighter-rouge"><textarea></code> elements.</li>
|
||||
<li>Bootstrap scopes the <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> styles to parent <code class="highlighter-rouge">.was-validated</code> class, usually applied to the <code class="highlighter-rouge"><form></code>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).</li>
|
||||
<li>To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the <code class="highlighter-rouge">.was-validated</code> class from the <code class="highlighter-rouge"><form></code> again after submission.</li>
|
||||
<li>As a fallback, <code class="highlighter-rouge">.is-invalid</code> and <code class="highlighter-rouge">.is-valid</code> classes may be used instead of the pseudo-classes for <a href="#server-side">server side validation</a>. They do not require a <code class="highlighter-rouge">.was-validated</code> parent class.</li>
|
||||
<li>Due to constraints in how CSS works, we cannot (at present) apply styles to a <code class="highlighter-rouge"><label></code> that comes before a form control in the DOM without the help of custom JavaScript.</li>
|
||||
<li>All modern browsers support the <a href="https://www.w3.org/TR/html5/sec-forms.html#the-constraint-validation-api">constraint validation API</a>, a series of JavaScript methods for validating form controls.</li>
|
||||
<li>Feedback messages may utilize the <a href="#browser-defaults">browser defaults</a> (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.</li>
|
||||
<li>You may provide custom validity messages with <code class="highlighter-rouge">setCustomValidity</code> in JavaScript.</li>
|
||||
</ul>
|
||||
|
||||
<p>With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.</p>
|
||||
|
||||
<h3 id="custom-styles">Custom styles</h3>
|
||||
|
||||
<p>For custom Bootstrap form validation messages, you’ll need to add the <code class="highlighter-rouge">novalidate</code> boolean attribute to your <code class="highlighter-rouge"><form></code>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> styles applied to your form controls.</p>
|
||||
|
||||
<p>Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for <code class="highlighter-rouge"><select></code>s are only available with <code class="highlighter-rouge">.custom-select</code>, and not <code class="highlighter-rouge">.form-control</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="needs-validation" novalidate="">
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationCustom01">First name</label>
|
||||
<input type="text" class="form-control" id="validationCustom01" value="Mark" required="" />
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationCustom02">Last name</label>
|
||||
<input type="text" class="form-control" id="validationCustom02" value="Otto" required="" />
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationCustom03">City</label>
|
||||
<input type="text" class="form-control" id="validationCustom03" required="" />
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationCustom04">State</label>
|
||||
<select class="custom-select" id="validationCustom04" required="">
|
||||
<option selected="" disabled="" value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationCustom05">Zip</label>
|
||||
<input type="text" class="form-control" id="validationCustom05" required="" />
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required="" />
|
||||
<label class="form-check-label" for="invalidCheck">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
You must agree before submitting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
||||
(function() {
|
||||
'use strict';
|
||||
window.addEventListener('load', function() {
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
// Loop over them and prevent submission
|
||||
var validation = Array.prototype.filter.call(forms, function(form) {
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"needs-validation"</span> <span class="na">novalidate</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom01"</span><span class="nt">></span>First name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationCustom01"</span> <span class="na">value=</span><span class="s">"Mark"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-feedback"</span><span class="nt">></span>
|
||||
Looks good!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom02"</span><span class="nt">></span>Last name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationCustom02"</span> <span class="na">value=</span><span class="s">"Otto"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-feedback"</span><span class="nt">></span>
|
||||
Looks good!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom03"</span><span class="nt">></span>City<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationCustom03"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please provide a valid city.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom04"</span><span class="nt">></span>State<span class="nt"></label></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">id=</span><span class="s">"validationCustom04"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span> <span class="na">disabled</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>...<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please select a valid state.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom05"</span><span class="nt">></span>Zip<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationCustom05"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please provide a valid zip.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"invalidCheck"</span><span class="nt">></span>
|
||||
Agree to terms and conditions
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
You must agree before submitting.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit form<span class="nt"></button></span>
|
||||
<span class="nt"></form></span>
|
||||
|
||||
<span class="nt"><script></span>
|
||||
<span class="c1">// Example starter JavaScript for disabling form submissions if there are invalid fields</span>
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="dl">'</span><span class="s1">use strict</span><span class="dl">'</span><span class="p">;</span>
|
||||
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">load</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// Fetch all the forms we want to apply custom Bootstrap validation styles to</span>
|
||||
<span class="kd">var</span> <span class="nx">forms</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="dl">'</span><span class="s1">needs-validation</span><span class="dl">'</span><span class="p">);</span>
|
||||
<span class="c1">// Loop over them and prevent submission</span>
|
||||
<span class="kd">var</span> <span class="nx">validation</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">filter</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">forms</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">form</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">submit</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">form</span><span class="p">.</span><span class="nx">checkValidity</span><span class="p">()</span> <span class="o">===</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="nx">event</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">form</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">was-validated</span><span class="dl">'</span><span class="p">);</span>
|
||||
<span class="p">},</span> <span class="kc">false</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span> <span class="kc">false</span><span class="p">);</span>
|
||||
<span class="p">})();</span>
|
||||
<span class="nt"></script></span></code></pre></figure>
|
||||
|
||||
<h3 id="browser-defaults">Browser defaults</h3>
|
||||
|
||||
<p>Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.</p>
|
||||
|
||||
<p>While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationDefault01">First name</label>
|
||||
<input type="text" class="form-control" id="validationDefault01" value="Mark" required="" />
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationDefault02">Last name</label>
|
||||
<input type="text" class="form-control" id="validationDefault02" value="Otto" required="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationDefault03">City</label>
|
||||
<input type="text" class="form-control" id="validationDefault03" required="" />
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationDefault04">State</label>
|
||||
<select class="custom-select" id="validationDefault04" required="">
|
||||
<option selected="" disabled="" value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationDefault05">Zip</label>
|
||||
<input type="text" class="form-control" id="validationDefault05" required="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required="" />
|
||||
<label class="form-check-label" for="invalidCheck2">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationDefault01"</span><span class="nt">></span>First name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationDefault01"</span> <span class="na">value=</span><span class="s">"Mark"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationDefault02"</span><span class="nt">></span>Last name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationDefault02"</span> <span class="na">value=</span><span class="s">"Otto"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationDefault03"</span><span class="nt">></span>City<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationDefault03"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationDefault04"</span><span class="nt">></span>State<span class="nt"></label></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">id=</span><span class="s">"validationDefault04"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span> <span class="na">disabled</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>...<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationDefault05"</span><span class="nt">></span>Zip<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationDefault05"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck2"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"invalidCheck2"</span><span class="nt">></span>
|
||||
Agree to terms and conditions
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit form<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h3 id="server-side">Server side</h3>
|
||||
|
||||
<p>We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with <code class="highlighter-rouge">.is-invalid</code> and <code class="highlighter-rouge">.is-valid</code>. Note that <code class="highlighter-rouge">.invalid-feedback</code> is also supported with these classes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationServer01">First name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required="" />
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationServer02">Last name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required="" />
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationServer03">City</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer03" required="" />
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationServer04">State</label>
|
||||
<select class="custom-select is-invalid" id="validationServer04" required="">
|
||||
<option selected="" disabled="" value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationServer05">Zip</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer05" required="" />
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required="" />
|
||||
<label class="form-check-label" for="invalidCheck3">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
You must agree before submitting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer01"</span><span class="nt">></span>First name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-valid"</span> <span class="na">id=</span><span class="s">"validationServer01"</span> <span class="na">value=</span><span class="s">"Mark"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-feedback"</span><span class="nt">></span>
|
||||
Looks good!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer02"</span><span class="nt">></span>Last name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-valid"</span> <span class="na">id=</span><span class="s">"validationServer02"</span> <span class="na">value=</span><span class="s">"Otto"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-feedback"</span><span class="nt">></span>
|
||||
Looks good!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer03"</span><span class="nt">></span>City<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer03"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please provide a valid city.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer04"</span><span class="nt">></span>State<span class="nt"></label></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer04"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span> <span class="na">disabled</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>...<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please select a valid state.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer05"</span><span class="nt">></span>Zip<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationServer05"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please provide a valid zip.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input is-invalid"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck3"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"invalidCheck3"</span><span class="nt">></span>
|
||||
Agree to terms and conditions
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
You must agree before submitting.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit form<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h3 id="supported-elements">Supported elements</h3>
|
||||
|
||||
<p>Validation styles are available for the following form controls and components:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge"><input></code>s and <code class="highlighter-rouge"><textarea></code>s with <code class="highlighter-rouge">.form-control</code></li>
|
||||
<li><code class="highlighter-rouge"><select></code>s with <code class="highlighter-rouge">.form-control</code> or <code class="highlighter-rouge">.custom-select</code></li>
|
||||
<li><code class="highlighter-rouge">.form-check</code>s</li>
|
||||
<li><code class="highlighter-rouge">.custom-checkbox</code>s and <code class="highlighter-rouge">.custom-radio</code>s</li>
|
||||
<li><code class="highlighter-rouge">.custom-file</code></li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="was-validated">
|
||||
<div class="mb-3">
|
||||
<label for="validationTextarea">Textarea</label>
|
||||
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required=""></textarea>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a message in the textarea.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-checkbox mb-3">
|
||||
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required="" />
|
||||
<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
|
||||
<div class="invalid-feedback">Example invalid feedback text</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required="" />
|
||||
<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio mb-3">
|
||||
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required="" />
|
||||
<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
|
||||
<div class="invalid-feedback">More example invalid feedback text</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<select class="custom-select" required="">
|
||||
<option value="">Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">Example invalid custom select feedback</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-file mb-3">
|
||||
<input type="file" class="custom-file-input" id="validatedCustomFile" required="" />
|
||||
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
|
||||
<div class="invalid-feedback">Example invalid custom file feedback</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="input-group is-invalid">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required="" />
|
||||
</div>
|
||||
<div class="invalid-feedback">
|
||||
Example invalid input group feedback
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="input-group is-invalid">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
|
||||
</div>
|
||||
<select class="custom-select" id="validatedInputGroupSelect" required="">
|
||||
<option value="">Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="invalid-feedback">
|
||||
Example invalid input group feedback
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group is-invalid">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required="" />
|
||||
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
|
||||
</div>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invalid-feedback">
|
||||
Example invalid input group feedback
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"was-validated"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTextarea"</span><span class="nt">></span>Textarea<span class="nt"></label></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">id=</span><span class="s">"validationTextarea"</span> <span class="na">placeholder=</span><span class="s">"Required example textarea"</span> <span class="na">required</span><span class="nt">></textarea></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please enter a message in the textarea.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customControlValidation1"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customControlValidation1"</span><span class="nt">></span>Check this custom checkbox<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>Example invalid feedback text<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-radio"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customControlValidation2"</span> <span class="na">name=</span><span class="s">"radio-stacked"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customControlValidation2"</span><span class="nt">></span>Toggle this custom radio<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-radio mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customControlValidation3"</span> <span class="na">name=</span><span class="s">"radio-stacked"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customControlValidation3"</span><span class="nt">></span>Or toggle this other custom radio<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>More example invalid feedback text<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>Example invalid custom select feedback<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"validatedCustomFile"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"validatedCustomFile"</span><span class="nt">></span>Choose file...<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>Example invalid custom file feedback<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group is-invalid"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"validatedInputGroupPrepend"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">aria-describedby=</span><span class="s">"validatedInputGroupPrepend"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Example invalid input group feedback
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group is-invalid"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">for=</span><span class="s">"validatedInputGroupSelect"</span><span class="nt">></span>Options<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">id=</span><span class="s">"validatedInputGroupSelect"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Example invalid input group feedback
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group is-invalid"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"validatedInputGroupCustomFile"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"validatedInputGroupCustomFile"</span><span class="nt">></span>Choose file...<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Example invalid input group feedback
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h3 id="tooltips">Tooltips</h3>
|
||||
|
||||
<p>If your form layout allows it, you can swap the <code class="highlighter-rouge">.{valid|invalid}-feedback</code> classes for <code class="highlighter-rouge">.{valid|invalid}-tooltip</code> classes to display validation feedback in a styled tooltip. Be sure to have a parent with <code class="highlighter-rouge">position: relative</code> on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="needs-validation" novalidate="">
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationTooltip01">First name</label>
|
||||
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required="" />
|
||||
<div class="valid-tooltip">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationTooltip02">Last name</label>
|
||||
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required="" />
|
||||
<div class="valid-tooltip">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationTooltip03">City</label>
|
||||
<input type="text" class="form-control" id="validationTooltip03" required="" />
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationTooltip04">State</label>
|
||||
<select class="custom-select" id="validationTooltip04" required="">
|
||||
<option selected="" disabled="" value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-tooltip">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationTooltip05">Zip</label>
|
||||
<input type="text" class="form-control" id="validationTooltip05" required="" />
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"needs-validation"</span> <span class="na">novalidate</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip01"</span><span class="nt">></span>First name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationTooltip01"</span> <span class="na">value=</span><span class="s">"Mark"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-tooltip"</span><span class="nt">></span>
|
||||
Looks good!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip02"</span><span class="nt">></span>Last name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationTooltip02"</span> <span class="na">value=</span><span class="s">"Otto"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-tooltip"</span><span class="nt">></span>
|
||||
Looks good!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip03"</span><span class="nt">></span>City<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationTooltip03"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-tooltip"</span><span class="nt">></span>
|
||||
Please provide a valid city.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip04"</span><span class="nt">></span>State<span class="nt"></label></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">id=</span><span class="s">"validationTooltip04"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span> <span class="na">disabled</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>...<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-tooltip"</span><span class="nt">></span>
|
||||
Please select a valid state.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip05"</span><span class="nt">></span>Zip<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"validationTooltip05"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-tooltip"</span><span class="nt">></span>
|
||||
Please provide a valid zip.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit form<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></figure>
|
||||
|
||||
<h3 id="customizing">Customizing</h3>
|
||||
|
||||
<p>Validation states can be customized via Sass with the <code class="highlighter-rouge">$form-validation-states</code> map. Located in our <code class="highlighter-rouge">_variables.scss</code> file, this Sass map is looped over to generate the default <code class="highlighter-rouge">valid</code>/<code class="highlighter-rouge">invalid</code> validation states. Included is a nested map for customizing each state’s color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.</p>
|
||||
|
||||
<p>Please note that we do not recommend customizing these values without also modifying the <code class="highlighter-rouge">form-validation-state</code> mixin.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Sass map from `_variables.scss`</span>
|
||||
<span class="c1">// Override this and recompile your Sass to generate different states</span>
|
||||
<span class="nv">$form-validation-states</span><span class="p">:</span> <span class="nf">map-merge</span><span class="p">(</span>
|
||||
<span class="p">(</span>
|
||||
<span class="s2">"valid"</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="s2">"color"</span><span class="o">:</span> <span class="nv">$form-feedback-valid-color</span><span class="o">,</span>
|
||||
<span class="s2">"icon"</span><span class="o">:</span> <span class="nv">$form-feedback-icon-valid</span>
|
||||
<span class="p">)</span><span class="o">,</span>
|
||||
<span class="s2">"invalid"</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="s2">"color"</span><span class="o">:</span> <span class="nv">$form-feedback-invalid-color</span><span class="o">,</span>
|
||||
<span class="s2">"icon"</span><span class="o">:</span> <span class="nv">$form-feedback-icon-invalid</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">)</span><span class="o">,</span>
|
||||
<span class="nv">$form-validation-states</span>
|
||||
<span class="p">);</span>
|
||||
|
||||
<span class="c1">// Loop from `_forms.scss`</span>
|
||||
<span class="c1">// Any modifications to the above Sass map will be reflected in your compiled</span>
|
||||
<span class="c1">// CSS via this loop.</span>
|
||||
<span class="k">@each</span> <span class="nv">$state</span><span class="o">,</span> <span class="nv">$data</span> <span class="n">in</span> <span class="nv">$form-validation-states</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">form-validation-state</span><span class="p">(</span><span class="nv">$state</span><span class="o">,</span> <span class="nf">map-get</span><span class="p">(</span><span class="nv">$data</span><span class="o">,</span> <span class="n">color</span><span class="p">)</span><span class="o">,</span> <span class="nf">map-get</span><span class="p">(</span><span class="nv">$data</span><span class="o">,</span> <span class="nb">icon</span><span class="p">));</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<h3 id="input-group-validation-workaround">Input group validation workaround</h3>
|
||||
|
||||
<p>We’re unable to resolve the broken <code class="highlighter-rouge">border-radius</code> of input groups with validation due to selector limitations, so manual overrides are required. When you’re using a standard input group and don’t customize the default border radius values, add <code class="highlighter-rouge">.rounded-right</code> to the elements with the broken <code class="highlighter-rouge">border-radius</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control rounded-right"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please choose a username.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example bd-example-forms-input-group-workaround">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control is-invalid rounded-right" required="" />
|
||||
<div class="invalid-feedback">
|
||||
Please choose a username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>When you are using a small or large input group or customizing the default <code class="highlighter-rouge">border-radius</code> values, add custom CSS to the element with the busted <code class="highlighter-rouge">border-radius</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="c">/* Change values to match the radius of your form control */</span>
|
||||
<span class="nc">.fix-rounded-right</span> <span class="p">{</span>
|
||||
<span class="nl">border-top-right-radius</span><span class="p">:</span> <span class="m">.2rem</span> <span class="cp">!important</span><span class="p">;</span>
|
||||
<span class="nl">border-bottom-right-radius</span><span class="p">:</span> <span class="m">.2rem</span> <span class="cp">!important</span><span class="p">;</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group input-group-sm"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control fix-rounded-right"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
Please choose a username.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example bd-example-forms-input-group-workaround">
|
||||
<div class="input-group input-group-sm">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control is-invalid fix-rounded-right" required="" />
|
||||
<div class="invalid-feedback">
|
||||
Please choose a username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="custom-forms">Custom forms</h2>
|
||||
|
||||
<p>For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.</p>
|
||||
|
||||
<h3 id="checkboxes-and-radios-1">Checkboxes and radios</h3>
|
||||
|
||||
<p>Each checkbox and radio <code class="highlighter-rouge"><input></code> and <code class="highlighter-rouge"><label></code> pairing is wrapped in a <code class="highlighter-rouge"><div></code> to create our custom control. Structurally, this is the same approach as our default <code class="highlighter-rouge">.form-check</code>.</p>
|
||||
|
||||
<p>We use the sibling selector (<code class="highlighter-rouge">~</code>) for all our <code class="highlighter-rouge"><input></code> states—like <code class="highlighter-rouge">:checked</code>—to properly style our custom form indicator. When combined with the <code class="highlighter-rouge">.custom-control-label</code> class, we can also style the text for each item based on the <code class="highlighter-rouge"><input></code>’s state.</p>
|
||||
|
||||
<p>We hide the default <code class="highlighter-rouge"><input></code> with <code class="highlighter-rouge">opacity</code> and use the <code class="highlighter-rouge">.custom-control-label</code> to build a new custom form indicator in its place with <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code>. Unfortunately we can’t build a custom one from just the <code class="highlighter-rouge"><input></code> because CSS’s <code class="highlighter-rouge">content</code> doesn’t work on that element.</p>
|
||||
|
||||
<p>In the checked states, we use <strong>base64 embedded SVG icons</strong> from <a href="https://github.com/iconic/open-iconic">Open Iconic</a>. This provides us the best control for styling and positioning across browsers and devices.</p>
|
||||
|
||||
<h4 id="checkboxes">Checkboxes</h4>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="customCheck1" />
|
||||
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customCheck1"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customCheck1"</span><span class="nt">></span>Check this custom checkbox<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Custom checkboxes can also utilize the <code class="highlighter-rouge">:indeterminate</code> pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).</p>
|
||||
|
||||
<div class="bd-example bd-example-indeterminate">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="customCheck2" />
|
||||
<label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>If you’re using jQuery, something like this should suffice:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.your-checkbox</span><span class="dl">'</span><span class="p">).</span><span class="nx">prop</span><span class="p">(</span><span class="dl">'</span><span class="s1">indeterminate</span><span class="dl">'</span><span class="p">,</span> <span class="kc">true</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h4 id="radios">Radios</h4>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" />
|
||||
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" />
|
||||
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-radio"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">id=</span><span class="s">"customRadio1"</span> <span class="na">name=</span><span class="s">"customRadio"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customRadio1"</span><span class="nt">></span>Toggle this custom radio<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-radio"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">id=</span><span class="s">"customRadio2"</span> <span class="na">name=</span><span class="s">"customRadio"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customRadio2"</span><span class="nt">></span>Or toggle this other custom radio<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h4 id="inline-1">Inline</h4>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-control custom-radio custom-control-inline">
|
||||
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input" />
|
||||
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio custom-control-inline">
|
||||
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input" />
|
||||
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-radio custom-control-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">id=</span><span class="s">"customRadioInline1"</span> <span class="na">name=</span><span class="s">"customRadioInline1"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customRadioInline1"</span><span class="nt">></span>Toggle this custom radio<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-radio custom-control-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">id=</span><span class="s">"customRadioInline2"</span> <span class="na">name=</span><span class="s">"customRadioInline1"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customRadioInline2"</span><span class="nt">></span>Or toggle this other custom radio<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h4 id="disabled">Disabled</h4>
|
||||
|
||||
<p>Custom checkboxes and radios can also be disabled. Add the <code class="highlighter-rouge">disabled</code> boolean attribute to the <code class="highlighter-rouge"><input></code> and the custom indicator and label description will be automatically styled.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled="" />
|
||||
<label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled="" />
|
||||
<label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customCheckDisabled1"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customCheckDisabled1"</span><span class="nt">></span>Check this custom checkbox<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-radio"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"radioDisabled"</span> <span class="na">id=</span><span class="s">"customRadioDisabled2"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customRadioDisabled2"</span><span class="nt">></span>Toggle this custom radio<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="switches">Switches</h3>
|
||||
|
||||
<p>A switch has the markup of a custom checkbox but uses the <code class="highlighter-rouge">.custom-switch</code> class to render a toggle switch. Switches also support the <code class="highlighter-rouge">disabled</code> attribute.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-control custom-switch">
|
||||
<input type="checkbox" class="custom-control-input" id="customSwitch1" />
|
||||
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
|
||||
</div>
|
||||
<div class="custom-control custom-switch">
|
||||
<input type="checkbox" class="custom-control-input" disabled="" id="customSwitch2" />
|
||||
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-switch"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"customSwitch1"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customSwitch1"</span><span class="nt">></span>Toggle this switch element<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-control custom-switch"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">disabled</span> <span class="na">id=</span><span class="s">"customSwitch2"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"customSwitch2"</span><span class="nt">></span>Disabled switch element<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="select-menu">Select menu</h3>
|
||||
|
||||
<p>Custom <code class="highlighter-rouge"><select></code> menus need only a custom class, <code class="highlighter-rouge">.custom-select</code> to trigger the custom styles. Custom styles are limited to the <code class="highlighter-rouge"><select></code>’s initial appearance and cannot modify the <code class="highlighter-rouge"><option></code>s due to browser limitations.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<select class="custom-select">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Open this select menu<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span></code></pre></figure>
|
||||
|
||||
<p>You may also choose from small and large custom selects to match our similarly sized text inputs.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<select class="custom-select custom-select-lg mb-3">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
|
||||
<select class="custom-select custom-select-sm">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select custom-select-lg mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Open this select menu<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select custom-select-sm"</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Open this select menu<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span></code></pre></figure>
|
||||
|
||||
<p>The <code class="highlighter-rouge">multiple</code> attribute is also supported:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<select class="custom-select" multiple="">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">multiple</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Open this select menu<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span></code></pre></figure>
|
||||
|
||||
<p>As is the <code class="highlighter-rouge">size</code> attribute:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<select class="custom-select" size="3">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">size=</span><span class="s">"3"</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Open this select menu<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span></code></pre></figure>
|
||||
|
||||
<h3 id="range">Range</h3>
|
||||
|
||||
<p>Create custom <code class="highlighter-rouge"><input type="range"></code> controls with <code class="highlighter-rouge">.custom-range</code>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<label for="customRange1">Example range</label>
|
||||
<input type="range" class="custom-range" id="customRange1" />
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">for=</span><span class="s">"customRange1"</span><span class="nt">></span>Example range<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"custom-range"</span> <span class="na">id=</span><span class="s">"customRange1"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<p>Range inputs have implicit values for <code class="highlighter-rouge">min</code> and <code class="highlighter-rouge">max</code>—<code class="highlighter-rouge">0</code> and <code class="highlighter-rouge">100</code>, respectively. You may specify new values for those using the <code class="highlighter-rouge">min</code> and <code class="highlighter-rouge">max</code> attributes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<label for="customRange2">Example range</label>
|
||||
<input type="range" class="custom-range" min="0" max="5" id="customRange2" />
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">for=</span><span class="s">"customRange2"</span><span class="nt">></span>Example range<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"custom-range"</span> <span class="na">min=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"5"</span> <span class="na">id=</span><span class="s">"customRange2"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<p>By default, range inputs “snap” to integer values. To change this, you can specify a <code class="highlighter-rouge">step</code> value. In the example below, we double the number of steps by using <code class="highlighter-rouge">step="0.5"</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<label for="customRange3">Example range</label>
|
||||
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3" />
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">for=</span><span class="s">"customRange3"</span><span class="nt">></span>Example range<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">class=</span><span class="s">"custom-range"</span> <span class="na">min=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"5"</span> <span class="na">step=</span><span class="s">"0.5"</span> <span class="na">id=</span><span class="s">"customRange3"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<h3 id="file-browser">File browser</h3>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>The recommended plugin to animate custom file input: <a href="https://www.npmjs.com/package/bs-custom-file-input">bs-custom-file-input</a>, that’s what we are using currently here in our docs.</p>
|
||||
</div>
|
||||
|
||||
<p>The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional <em>Choose file…</em> and selected file name text.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="customFile" />
|
||||
<label class="custom-file-label" for="customFile">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"customFile"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFile"</span><span class="nt">></span>Choose file<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>We hide the default file <code class="highlighter-rouge"><input></code> via <code class="highlighter-rouge">opacity</code> and instead style the <code class="highlighter-rouge"><label></code>. The button is generated and positioned with <code class="highlighter-rouge">::after</code>. Lastly, we declare a <code class="highlighter-rouge">width</code> and <code class="highlighter-rouge">height</code> on the <code class="highlighter-rouge"><input></code> for proper spacing for surrounding content.</p>
|
||||
|
||||
<h4 id="translating-or-customizing-the-strings-with-scss">Translating or customizing the strings with SCSS</h4>
|
||||
|
||||
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang"><code class="highlighter-rouge">:lang()</code> pseudo-class</a> is used to allow for translation of the “Browse” text into other languages. Override or add entries to the <code class="highlighter-rouge">$custom-file-text</code> Sass variable with the relevant <a href="https://en.wikipedia.org/wiki/IETF_language_tag">language tag</a> and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is <code class="highlighter-rouge">es</code>):</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$custom-file-text</span><span class="p">:</span> <span class="p">(</span>
|
||||
<span class="n">en</span><span class="o">:</span> <span class="s2">"Browse"</span><span class="o">,</span>
|
||||
<span class="n">es</span><span class="o">:</span> <span class="s2">"Elegir"</span>
|
||||
<span class="p">);</span></code></pre></figure>
|
||||
|
||||
<p>Here’s <code class="highlighter-rouge">lang(es)</code> in action on the custom file input for a Spanish translation:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="customFileLang" lang="es" />
|
||||
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"customFileLang"</span> <span class="na">lang=</span><span class="s">"es"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFileLang"</span><span class="nt">></span>Seleccionar Archivo<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">the <code class="highlighter-rouge">lang</code> attribute</a> on the <code class="highlighter-rouge"><span class="nt"><html></span></code> element or the <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12"><code class="highlighter-rouge">Content-Language</code> HTTP header</a>, among other methods.</p>
|
||||
|
||||
<h4 id="translating-or-customizing-the-strings-with-html">Translating or customizing the strings with HTML</h4>
|
||||
|
||||
<p>Bootstrap also provides a way to translate the “Browse” text in HTML with the <code class="highlighter-rouge">data-browse</code> attribute which can be added to the custom input label (example in Dutch):</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="customFileLangHTML" />
|
||||
<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"customFileLangHTML"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFileLangHTML"</span> <span class="na">data-browse=</span><span class="s">"Bestand kiezen"</span><span class="nt">></span>Voeg je document toe<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
11
docs/4.5/components/index.html
Normal file
11
docs/4.5/components/index.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/alerts/">
|
||||
<script>location="https://getbootstrap.com/docs/4.5/components/alerts/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.5/components/alerts/">
|
||||
<meta name="robots" content="noindex">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.5/components/alerts/">Click here if you are not redirected.</a>
|
||||
</html>
|
||||
1143
docs/4.5/components/input-group/index.html
Normal file
1143
docs/4.5/components/input-group/index.html
Normal file
@ -0,0 +1,1143 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Input group · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/input-group/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Input group">
|
||||
<meta name="twitter:description" content="Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/input-group/">
|
||||
<meta property="og:title" content="Input group">
|
||||
<meta property="og:description" content="Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#wrapping">Wrapping</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#sizing">Sizing</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#checkboxes-and-radios">Checkboxes and radios</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#multiple-inputs">Multiple inputs</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#multiple-addons">Multiple addons</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#button-addons">Button addons</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#buttons-with-dropdowns">Buttons with dropdowns</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#segmented-buttons">Segmented buttons</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#custom-forms">Custom forms</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#custom-select">Custom select</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#custom-file-input">Custom file input</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Input group</h1>
|
||||
<p class="bd-lead">Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="basic-example">Basic example</h2>
|
||||
|
||||
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <code class="highlighter-rouge"><label></code>s outside the input group.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" />
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text" id="basic-addon2">@example.com</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="basic-url">Your vanity URL</label>
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" />
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" />
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">With textarea</span>
|
||||
</div>
|
||||
<textarea class="form-control" aria-label="With textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"basic-addon1"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-label=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"basic-addon1"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Recipient's username"</span> <span class="na">aria-label=</span><span class="s">"Recipient's username"</span> <span class="na">aria-describedby=</span><span class="s">"basic-addon2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"basic-addon2"</span><span class="nt">></span>@example.com<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"basic-url"</span><span class="nt">></span>Your vanity URL<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"basic-addon3"</span><span class="nt">></span>https://example.com/users/<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"basic-url"</span> <span class="na">aria-describedby=</span><span class="s">"basic-addon3"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>$<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Amount (to the nearest dollar)"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>.00<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>With textarea<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"With textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="wrapping">Wrapping</h2>
|
||||
|
||||
<p>Input groups wrap by default via <code class="highlighter-rouge">flex-wrap: wrap</code> in order to accommodate custom form field validation within an input group. You may disable this with <code class="highlighter-rouge">.flex-nowrap</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group flex-nowrap">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="addon-wrapping">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group flex-nowrap"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"addon-wrapping"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-label=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"addon-wrapping"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="sizing">Sizing</h2>
|
||||
|
||||
<p>Add the relative form sizing classes to the <code class="highlighter-rouge">.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
|
||||
|
||||
<p><strong>Sizing on the individual input group elements isn’t supported.</strong></p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group input-group-sm mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" />
|
||||
</div>
|
||||
|
||||
<div class="input-group input-group-lg">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" />
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group input-group-sm mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"inputGroup-sizing-sm"</span><span class="nt">></span>Small<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Sizing example input"</span> <span class="na">aria-describedby=</span><span class="s">"inputGroup-sizing-sm"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"inputGroup-sizing-default"</span><span class="nt">></span>Default<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Sizing example input"</span> <span class="na">aria-describedby=</span><span class="s">"inputGroup-sizing-default"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group input-group-lg"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"inputGroup-sizing-lg"</span><span class="nt">></span>Large<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Sizing example input"</span> <span class="na">aria-describedby=</span><span class="s">"inputGroup-sizing-lg"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="checkboxes-and-radios">Checkboxes and radios</h2>
|
||||
|
||||
<p>Place any checkbox or radio option within an input group’s addon instead of text.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<input type="checkbox" aria-label="Checkbox for following text input" />
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with checkbox" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<input type="radio" aria-label="Radio button for following text input" />
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with radio button" />
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">aria-label=</span><span class="s">"Checkbox for following text input"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Text input with checkbox"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">aria-label=</span><span class="s">"Radio button for following text input"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Text input with radio button"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="multiple-inputs">Multiple inputs</h2>
|
||||
|
||||
<p>While multiple <code class="highlighter-rouge"><input></code>s are supported visually, validation styles are only available for input groups with a single <code class="highlighter-rouge"><input></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">First and last name</span>
|
||||
</div>
|
||||
<input type="text" aria-label="First name" class="form-control" />
|
||||
<input type="text" aria-label="Last name" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>First and last name<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">aria-label=</span><span class="s">"First name"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">aria-label=</span><span class="s">"Last name"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="multiple-addons">Multiple addons</h2>
|
||||
|
||||
<p>Multiple add-ons are supported and can be mixed with checkbox and radio input versions.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
<span class="input-group-text">0.00</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)" />
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">$</span>
|
||||
<span class="input-group-text">0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>$<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>0.00<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Dollar amount (with dot and two decimal places)"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Dollar amount (with dot and two decimal places)"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>$<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>0.00<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="button-addons">Button addons</h2>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1" />
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2" />
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend" id="button-addon3">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4" />
|
||||
<div class="input-group-append" id="button-addon4">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"button-addon1"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">""</span> <span class="na">aria-label=</span><span class="s">"Example text with button addon"</span> <span class="na">aria-describedby=</span><span class="s">"button-addon1"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Recipient's username"</span> <span class="na">aria-label=</span><span class="s">"Recipient's username"</span> <span class="na">aria-describedby=</span><span class="s">"button-addon2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"button-addon2"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span> <span class="na">id=</span><span class="s">"button-addon3"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">""</span> <span class="na">aria-label=</span><span class="s">"Example text with two button addons"</span> <span class="na">aria-describedby=</span><span class="s">"button-addon3"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Recipient's username"</span> <span class="na">aria-label=</span><span class="s">"Recipient's username with two button addons"</span> <span class="na">aria-describedby=</span><span class="s">"button-addon4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span> <span class="na">id=</span><span class="s">"button-addon4"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="buttons-with-dropdowns">Buttons with dropdowns</h2>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button" />
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Dropdown<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"separator"</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Text input with dropdown button"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Text input with dropdown button"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Dropdown<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"separator"</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="segmented-buttons">Segmented buttons</h2>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button type="button" class="btn btn-outline-secondary">Action</button>
|
||||
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button" />
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-outline-secondary">Action</button>
|
||||
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">></span>Action<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"separator"</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Text input with segmented dropdown button"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Text input with segmented dropdown button"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">></span>Action<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"separator"</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="custom-forms">Custom forms</h2>
|
||||
|
||||
<p>Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.</p>
|
||||
|
||||
<h3 id="custom-select">Custom select</h3>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text" for="inputGroupSelect01">Options</label>
|
||||
</div>
|
||||
<select class="custom-select" id="inputGroupSelect01">
|
||||
<option selected="">Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<select class="custom-select" id="inputGroupSelect02">
|
||||
<option selected="">Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<label class="input-group-text" for="inputGroupSelect02">Options</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
<select class="custom-select" id="inputGroupSelect03" aria-label="Example select with button addon">
|
||||
<option selected="">Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon">
|
||||
<option selected="">Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">for=</span><span class="s">"inputGroupSelect01"</span><span class="nt">></span>Options<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">id=</span><span class="s">"inputGroupSelect01"</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">id=</span><span class="s">"inputGroupSelect02"</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">for=</span><span class="s">"inputGroupSelect02"</span><span class="nt">></span>Options<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">id=</span><span class="s">"inputGroupSelect03"</span> <span class="na">aria-label=</span><span class="s">"Example select with button addon"</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"custom-select"</span> <span class="na">id=</span><span class="s">"inputGroupSelect04"</span> <span class="na">aria-label=</span><span class="s">"Example select with button addon"</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>One<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Two<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Three<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="custom-file-input">Custom file input</h3>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
|
||||
</div>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01" />
|
||||
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="inputGroupFile02" />
|
||||
<label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
|
||||
</div>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
|
||||
</div>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" />
|
||||
<label class="custom-file-label" for="inputGroupFile03">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" />
|
||||
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
|
||||
</div>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"inputGroupFileAddon01"</span><span class="nt">></span>Upload<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"inputGroupFile01"</span> <span class="na">aria-describedby=</span><span class="s">"inputGroupFileAddon01"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"inputGroupFile01"</span><span class="nt">></span>Choose file<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"inputGroupFile02"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"inputGroupFile02"</span> <span class="na">aria-describedby=</span><span class="s">"inputGroupFileAddon02"</span><span class="nt">></span>Choose file<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"inputGroupFileAddon02"</span><span class="nt">></span>Upload<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"inputGroupFileAddon03"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"inputGroupFile03"</span> <span class="na">aria-describedby=</span><span class="s">"inputGroupFileAddon03"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"inputGroupFile03"</span><span class="nt">></span>Choose file<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"inputGroupFile04"</span> <span class="na">aria-describedby=</span><span class="s">"inputGroupFileAddon04"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"inputGroupFile04"</span><span class="nt">></span>Choose file<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"inputGroupFileAddon04"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="accessibility">Accessibility</h2>
|
||||
|
||||
<p>Screen readers will have trouble with your forms if you don’t include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.</p>
|
||||
|
||||
<p>The exact technique to be used (<code class="highlighter-rouge"><label></code> elements hidden using the <code class="highlighter-rouge">.sr-only</code> class, or use of the <code class="highlighter-rouge">aria-label</code> and <code class="highlighter-rouge">aria-labelledby</code> attributes, possibly in combination with <code class="highlighter-rouge">aria-describedby</code>) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you’re implementing. The examples in this section provide a few suggested, case-specific approaches.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
524
docs/4.5/components/jumbotron/index.html
Normal file
524
docs/4.5/components/jumbotron/index.html
Normal file
@ -0,0 +1,524 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Lightweight, flexible component for showcasing hero unit style content.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Jumbotron · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/jumbotron/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Jumbotron">
|
||||
<meta name="twitter:description" content="Lightweight, flexible component for showcasing hero unit style content.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/jumbotron/">
|
||||
<meta property="og:title" content="Jumbotron">
|
||||
<meta property="og:description" content="Lightweight, flexible component for showcasing hero unit style content.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Jumbotron</h1>
|
||||
<p class="bd-lead">Lightweight, flexible component for showcasing hero unit style content.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="jumbotron">
|
||||
<h1 class="display-4">Hello, world!</h1>
|
||||
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
||||
<hr class="my-4" />
|
||||
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"jumbotron"</span><span class="nt">></span>
|
||||
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">></span>Hello, world!<span class="nt"></h1></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">></span>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<span class="nt"></p></span>
|
||||
<span class="nt"><hr</span> <span class="na">class=</span><span class="s">"my-4"</span><span class="nt">></span>
|
||||
<span class="nt"><p></span>It uses utility classes for typography and spacing to space content out within the larger container.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Learn more<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>To make the jumbotron full width, and without rounded corners, add the <code class="highlighter-rouge">.jumbotron-fluid</code> modifier class and add a <code class="highlighter-rouge">.container</code> or <code class="highlighter-rouge">.container-fluid</code> within.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="jumbotron jumbotron-fluid">
|
||||
<div class="container">
|
||||
<h1 class="display-4">Fluid jumbotron</h1>
|
||||
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"jumbotron jumbotron-fluid"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">></span>Fluid jumbotron<span class="nt"></h1></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">></span>This is a modified jumbotron that occupies the entire horizontal space of its parent.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1065
docs/4.5/components/list-group/index.html
Normal file
1065
docs/4.5/components/list-group/index.html
Normal file
@ -0,0 +1,1065 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>List group · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/list-group/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="List group">
|
||||
<meta name="twitter:description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/list-group/">
|
||||
<meta property="og:title" content="List group">
|
||||
<meta property="og:description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#active-items">Active items</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#disabled-items">Disabled items</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#links-and-buttons">Links and buttons</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#flush">Flush</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#horizontal">Horizontal</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#contextual-classes">Contextual classes</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#with-badges">With badges</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#custom-content">Custom content</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#javascript-behavior">JavaScript behavior</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#using-data-attributes">Using data attributes</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#via-javascript">Via JavaScript</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#fade-effect">Fade effect</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#methods">Methods</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h4"><a href="#tab">$().tab</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#tabshow">.tab(‘show’)</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">List group</h1>
|
||||
<p class="bd-lead">List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="basic-example">Basic example</h2>
|
||||
|
||||
<p>The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Morbi leo risus<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Porta ac consectetur ac<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<h2 id="active-items">Active items</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.active</code> to a <code class="highlighter-rouge">.list-group-item</code> to indicate the current active selection.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item active">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item active"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Morbi leo risus<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Porta ac consectetur ac<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<h2 id="disabled-items">Disabled items</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.disabled</code> to a <code class="highlighter-rouge">.list-group-item</code> to make it <em>appear</em> disabled. Note that some elements with <code class="highlighter-rouge">.disabled</code> will also require custom JavaScript to fully disable their click events (e.g., links).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item disabled"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Morbi leo risus<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Porta ac consectetur ac<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<h2 id="links-and-buttons">Links and buttons</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge"><a></code>s or <code class="highlighter-rouge"><button></code>s to create <em>actionable</em> list group items with hover, disabled, and active states by adding <code class="highlighter-rouge">.list-group-item-action</code>. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <code class="highlighter-rouge"><li></code>s or <code class="highlighter-rouge"><div></code>s) don’t provide a click or tap affordance.</p>
|
||||
|
||||
<p>Be sure to <strong>not use the standard <code class="highlighter-rouge">.btn</code> classes here</strong>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span><span class="nt">></span>
|
||||
Cras justo odio
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Morbi leo risus<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Porta ac consectetur ac<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action disabled"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>With <code class="highlighter-rouge"><button></code>s, you can also make use of the <code class="highlighter-rouge">disabled</code> attribute instead of the <code class="highlighter-rouge">.disabled</code> class. Sadly, <code class="highlighter-rouge"><a></code>s don’t support the disabled attribute.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="list-group">
|
||||
<button type="button" class="list-group-item list-group-item-action active">
|
||||
Cras justo odio
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
|
||||
<button type="button" class="list-group-item list-group-item-action" disabled="">Vestibulum at eros</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span><span class="nt">></span>
|
||||
Cras justo odio
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Morbi leo risus<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Porta ac consectetur ac<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">disabled</span><span class="nt">></span>Vestibulum at eros<span class="nt"></button></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="flush">Flush</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.list-group-flush</code> to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Morbi leo risus<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Porta ac consectetur ac<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<h2 id="horizontal">Horizontal</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.list-group-horizontal</code> to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant <code class="highlighter-rouge">.list-group-horizontal-{sm|md|lg|xl}</code> to make a list group horizontal starting at that breakpoint’s <code class="highlighter-rouge">min-width</code>. Currently <strong>horizontal list groups cannot be combined with flush list groups.</strong></p>
|
||||
|
||||
<p><strong>ProTip:</strong> Want equal-width list group items when horizontal? Add <code class="highlighter-rouge">.flex-fill</code> to each list group item.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group list-group-horizontal">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-horizontal"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Morbi leo risus<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group list-group-horizontal-sm">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-horizontal-sm"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Morbi leo risus<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group list-group-horizontal-md">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-horizontal-md"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Morbi leo risus<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group list-group-horizontal-lg">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-horizontal-lg"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Morbi leo risus<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group list-group-horizontal-xl">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-horizontal-xl"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Morbi leo risus<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<h2 id="contextual-classes">Contextual classes</h2>
|
||||
|
||||
<p>Use contextual classes to style list items with a stateful background and color.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
|
||||
|
||||
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
|
||||
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
|
||||
<li class="list-group-item list-group-item-success">A simple success list group item</li>
|
||||
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
|
||||
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
|
||||
<li class="list-group-item list-group-item-info">A simple info list group item</li>
|
||||
<li class="list-group-item list-group-item-light">A simple light list group item</li>
|
||||
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
|
||||
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-danger"</span><span class="nt">></span>A simple danger list group item<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-warning"</span><span class="nt">></span>A simple warning list group item<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-info"</span><span class="nt">></span>A simple info list group item<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-light"</span><span class="nt">></span>A simple light list group item<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-dark"</span><span class="nt">></span>A simple dark list group item<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<p>Contextual classes also work with <code class="highlighter-rouge">.list-group-item-action</code>. Note the addition of the hover styles here not present in the previous example. Also supported is the <code class="highlighter-rouge">.active</code> state; apply it to indicate an active selection on a contextual list group item.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
|
||||
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></a></span>
|
||||
|
||||
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-primary"</span><span class="nt">></span>A simple primary list group item<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-secondary"</span><span class="nt">></span>A simple secondary list group item<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-success"</span><span class="nt">></span>A simple success list group item<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-danger"</span><span class="nt">></span>A simple danger list group item<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-warning"</span><span class="nt">></span>A simple warning list group item<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-info"</span><span class="nt">></span>A simple info list group item<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-light"</span><span class="nt">></span>A simple light list group item<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action list-group-item-dark"</span><span class="nt">></span>A simple dark list group item<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="with-badges">With badges</h2>
|
||||
|
||||
<p>Add badges to any list group item to show unread counts, activity, and more with the help of some <a href="/docs/4.5/utilities/flex/">utilities</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Cras justo odio
|
||||
<span class="badge badge-primary badge-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Dapibus ac facilisis in
|
||||
<span class="badge badge-primary badge-pill">2</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Morbi leo risus
|
||||
<span class="badge badge-primary badge-pill">1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item d-flex justify-content-between align-items-center"</span><span class="nt">></span>
|
||||
Cras justo odio
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-primary badge-pill"</span><span class="nt">></span>14<span class="nt"></span></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item d-flex justify-content-between align-items-center"</span><span class="nt">></span>
|
||||
Dapibus ac facilisis in
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-primary badge-pill"</span><span class="nt">></span>2<span class="nt"></span></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item d-flex justify-content-between align-items-center"</span><span class="nt">></span>
|
||||
Morbi leo risus
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge badge-primary badge-pill"</span><span class="nt">></span>1<span class="nt"></span></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
<h2 id="custom-content">Custom content</h2>
|
||||
|
||||
<p>Add nearly any HTML within, even for linked list groups like the one below, with the help of <a href="/docs/4.5/utilities/flex/">flexbox utilities</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action active">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex w-100 justify-content-between"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">></span>List group item heading<span class="nt"></h5></span>
|
||||
<span class="nt"><small></span>3 days ago<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">></span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="nt"></p></span>
|
||||
<span class="nt"><small></span>Donec id elit non mi porta.<span class="nt"></small></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex w-100 justify-content-between"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">></span>List group item heading<span class="nt"></h5></span>
|
||||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>3 days ago<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">></span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="nt"></p></span>
|
||||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Donec id elit non mi porta.<span class="nt"></small></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex w-100 justify-content-between"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">></span>List group item heading<span class="nt"></h5></span>
|
||||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>3 days ago<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">></span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<span class="nt"></p></span>
|
||||
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Donec id elit non mi porta.<span class="nt"></small></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="javascript-behavior">JavaScript behavior</h2>
|
||||
|
||||
<p>Use the tab JavaScript plugin—include it individually or through the compiled <code class="highlighter-rouge">bootstrap.js</code> file—to extend our list group to create tabbable panes of local content.</p>
|
||||
|
||||
<div class="bd-example" role="tabpanel">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="list-group" id="list-tab" role="tablist">
|
||||
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a>
|
||||
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
|
||||
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
|
||||
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
|
||||
<p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
|
||||
<p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
|
||||
<p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
|
||||
<p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span> <span class="na">id=</span><span class="s">"list-tab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">id=</span><span class="s">"list-home-list"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#list-home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"home"</span><span class="nt">></span>Home<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id=</span><span class="s">"list-profile-list"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#list-profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"profile"</span><span class="nt">></span>Profile<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id=</span><span class="s">"list-messages-list"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#list-messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"messages"</span><span class="nt">></span>Messages<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">id=</span><span class="s">"list-settings-list"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#list-settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"settings"</span><span class="nt">></span>Settings<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-8"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span> <span class="na">id=</span><span class="s">"nav-tabContent"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"list-home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"list-home-list"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"list-profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"list-profile-list"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"list-messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"list-messages-list"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"list-settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"list-settings-list"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="using-data-attributes">Using data attributes</h3>
|
||||
|
||||
<p>You can activate a list group navigation without writing any JavaScript by simply specifying <code class="highlighter-rouge">data-toggle="list"</code> or on an element. Use these data attributes on <code class="highlighter-rouge">.list-group-item</code>.</p>
|
||||
|
||||
<div role="tabpanel">
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- List group --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span> <span class="na">id=</span><span class="s">"myList"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">></span>Home<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">></span>Profile<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">></span>Messages<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">></span>Settings<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- Tab panes --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
</div>
|
||||
|
||||
<h3 id="via-javascript">Via JavaScript</h3>
|
||||
|
||||
<p>Enable tabbable list item via JavaScript (each list item needs to be activated individually):</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myList a</span><span class="dl">'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<p>You can activate individual list item in several ways:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myList a[href="#profile"]</span><span class="dl">'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span> <span class="c1">// Select tab by name</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myList a:first-child</span><span class="dl">'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span> <span class="c1">// Select first tab</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myList a:last-child</span><span class="dl">'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span> <span class="c1">// Select last tab</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myList a:nth-child(3)</span><span class="dl">'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span> <span class="c1">// Select third tab</span></code></pre></figure>
|
||||
|
||||
<h3 id="fade-effect">Fade effect</h3>
|
||||
|
||||
<p>To make tabs panel fade in, add <code class="highlighter-rouge">.fade</code> to each <code class="highlighter-rouge">.tab-pane</code>. The first tab pane must also have <code class="highlighter-rouge">.show</code> to make the initial content visible.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="methods">Methods</h3>
|
||||
|
||||
<h4 id="tab">$().tab</h4>
|
||||
|
||||
<p>Activates a list item element and content container. Tab should have either a <code class="highlighter-rouge">data-target</code> or an <code class="highlighter-rouge">href</code> targeting a container node in the DOM.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"list-group"</span> <span class="na">id=</span><span class="s">"myList"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">></span>Home<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">></span>Profile<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">></span>Messages<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">data-toggle=</span><span class="s">"list"</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">role=</span><span class="s">"tab"</span><span class="nt">></span>Settings<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><script></span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#myList a:last-child</span><span class="dl">'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span>
|
||||
<span class="p">})</span>
|
||||
<span class="nt"></script></span></code></pre></figure>
|
||||
|
||||
<h4 id="tabshow">.tab(‘show’)</h4>
|
||||
|
||||
<p>Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. <strong>Returns to the caller before the tab pane has actually been shown</strong> (for example, before the <code class="highlighter-rouge">shown.bs.tab</code> event occurs).</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#someListItem</span><span class="dl">'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
|
||||
<p>When showing a new tab, the events fire in the following order:</p>
|
||||
|
||||
<ol>
|
||||
<li><code class="highlighter-rouge">hide.bs.tab</code> (on the current active tab)</li>
|
||||
<li><code class="highlighter-rouge">show.bs.tab</code> (on the to-be-shown tab)</li>
|
||||
<li><code class="highlighter-rouge">hidden.bs.tab</code> (on the previous active tab, the same one as for the <code class="highlighter-rouge">hide.bs.tab</code> event)</li>
|
||||
<li><code class="highlighter-rouge">shown.bs.tab</code> (on the newly-active just-shown tab, the same one as for the <code class="highlighter-rouge">show.bs.tab</code> event)</li>
|
||||
</ol>
|
||||
|
||||
<p>If no tab was already active, the <code class="highlighter-rouge">hide.bs.tab</code> and <code class="highlighter-rouge">hidden.bs.tab</code> events will not be fired.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show.bs.tab</td>
|
||||
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.bs.tab</td>
|
||||
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.bs.tab</td>
|
||||
<td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.bs.tab</td>
|
||||
<td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">a[data-toggle="list"]</span><span class="dl">'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">shown.bs.tab</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">target</span> <span class="c1">// newly activated tab</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
705
docs/4.5/components/media-object/index.html
Normal file
705
docs/4.5/components/media-object/index.html
Normal file
@ -0,0 +1,705 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
|
||||
<title>Media object · Bootstrap v4.5</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/components/media-object/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Media object">
|
||||
<meta name="twitter:description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/components/media-object/">
|
||||
<meta property="og:title" content="Media object">
|
||||
<meta property="og:description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.5
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<div class="col-md-3 col-xl-2 bd-sidebar">
|
||||
<form role="search" class="bd-search d-flex align-items-center">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
|
||||
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||||
</form>
|
||||
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.5/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/interactions/">
|
||||
Interactions
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/screen-readers/">
|
||||
Screen readers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/stretched-link/">
|
||||
Stretched link
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.5/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.5/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#nesting">Nesting</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#alignment">Alignment</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#order">Order</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#media-list">Media list</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Media object</h1>
|
||||
<p class="bd-lead">Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">media object</a> helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.</p>
|
||||
|
||||
<p>Below is an example of a single media object. Only two classes are required—the wrapping <code class="highlighter-rouge">.media</code> and the <code class="highlighter-rouge">.media-body</code> around your content. Optional padding and margin can be controlled through <a href="/docs/4.5/utilities/spacing/">spacing utilities</a>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media heading<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="flexbug-12-inline-elements-arent-treated-as-flex-items">Flexbug #12: Inline elements aren’t treated as flex items</h5>
|
||||
|
||||
<p>Internet Explorer 10-11 do not render inline elements like links or images (or <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code> pseudo-elements) as flex items. The only workaround is to set a non-inline <code class="highlighter-rouge">display</code> value (e.g., <code class="highlighter-rouge">block</code>, <code class="highlighter-rouge">inline-block</code>, or <code class="highlighter-rouge">flex</code>). We suggest using <code class="highlighter-rouge">.d-flex</code>, one of our <a href="/docs/4.5/utilities/display/">display utilities</a>, as an easy fix.</p>
|
||||
|
||||
<p><strong>Source:</strong> <a href="https://github.com/philipwalton/flexbugs#flexbug-12">Flexbugs on GitHub</a></p>
|
||||
</div>
|
||||
|
||||
<h2 id="nesting">Nesting</h2>
|
||||
|
||||
<p>Media objects can be infinitely nested, though we suggest you stop at some point. Place nested <code class="highlighter-rouge">.media</code> within the <code class="highlighter-rouge">.media-body</code> of a parent media object.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
|
||||
<div class="media mt-3">
|
||||
<a class="mr-3" href="#">
|
||||
<svg class="bd-placeholder-img" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media heading<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media mt-3"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media heading<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="alignment">Alignment</h2>
|
||||
|
||||
<p>Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your <code class="highlighter-rouge">.media-body</code> content.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
<svg class="bd-placeholder-img align-self-start mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Top-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"align-self-start mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Top-aligned media<span class="nt"></h5></span>
|
||||
<span class="nt"><p></span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt"></p></span>
|
||||
<span class="nt"><p></span>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
<svg class="bd-placeholder-img align-self-center mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Center-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"align-self-center mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Center-aligned media<span class="nt"></h5></span>
|
||||
<span class="nt"><p></span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
<svg class="bd-placeholder-img align-self-end mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Bottom-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"align-self-end mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Bottom-aligned media<span class="nt"></h5></span>
|
||||
<span class="nt"><p></span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="order">Order</h2>
|
||||
|
||||
<p>Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the <code class="highlighter-rouge">order</code> property (to an integer of your choosing).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">Media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
<svg class="bd-placeholder-img ml-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">></span>Media object<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"ml-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="media-list">Media list</h2>
|
||||
|
||||
<p>Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your <code class="highlighter-rouge"><ul></code> or <code class="highlighter-rouge"><ol></code>, add the <code class="highlighter-rouge">.list-unstyled</code> to remove any browser default list styles, and then apply <code class="highlighter-rouge">.media</code> to your <code class="highlighter-rouge"><li></code>s. As always, use spacing utilities wherever needed to fine tune.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="list-unstyled">
|
||||
<li class="media">
|
||||
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="media my-4">
|
||||
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">></span>List-based media object<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"media my-4"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">></span>List-based media object<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">></span>List-based media object<span class="nt"></h5></span>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/vendor/bs-custom-file-input.min.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/application.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/search.js"></script>
|
||||
<script src="/docs/4.5/assets/js/src/ie-emulation-modes-warning.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user