From 0c0cd7bdfb6c1284d030878fc1bdb53e2058228b Mon Sep 17 00:00:00 2001
From: XhmikosR The full Bootstrap license is located in the project repository for more information. The full Bootstrap license is located in the project repository for more information. 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. Our latest release, Bootstrap 5, focuses on improving v4’s codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling. Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop. Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop. Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop. Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop. 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 an intentional design decision. Dropdowns are built on a third party library, Popper, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use Dropdowns are built on a third party library, Popper, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use The WAI ARIA standard defines an actual 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 Numbers are generated by These work great with custom content as well. This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal. This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal. This content should appear at the bottom after you scroll. This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal. This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal. Just like that. Things to know when using the popover plugin: Initialize toasts via JavaScript:
Get involved
-
prefers-reduced
prefers-reduced
prefers-reduced
prefers-reduced
<button>
or <a>
can show and hide
<button>
or <a>
can show and hide
Overview
bootstrap.bundle.min.js
/ bootstrap.bundle.js
which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.bootstrap.bundle.min.js
/ bootstrap.bundle.js
which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.Accessibility
role="menu"
widget, but this is specific to application-like menus which trigger actions or functions. ARIA menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.role
and aria-
attributes required for true ARIA menus. Authors will have to include these more specific attributes themselves.mouseover
h
mouseover
h
counter-reset
on the <ol>
, and then styled and placed with a ::before
pseudo-element on the <li>
with counter-increment
and content
.
-
<ol class="list-group list-group-numbered">
- <li class="list-group-item">Cras justo odio</li>
- <li class="list-group-item">Cras justo odio</li>
- <li class="list-group-item">Cras justo odio</li>
+ <li class="list-group-item">A list item</li>
+ <li class="list-group-item">A list item</li>
+ <li class="list-group-item">A list item</li>
</ol>
prefers-reduced
prefers-reduced
prefers-reduced
Show a second modal and hide this one with the button below.
@@ -964,7 +964,7 @@ The animation effect of this component is dependent on the prefers-reduced
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
- <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
+ <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
@@ -1441,7 +1441,7 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f
prefers-reduced
prefers-reduced
prefers-reduced
Backdroped with scrolling
+ Backdrop with scrolling
prefers-reduced
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
- <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
+ <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
@@ -854,7 +854,7 @@ While both ways to dismiss an offcanvas are supported, keep in mind that dismiss
aria-hidden="true"
only indicates that the element should be hidden to screen readers. The loading behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavasSript code may be needed to swap the state of the placeholder and inform AT users of the update.
+The use of aria-hidden="true"
only indicates that the element should be hidden to screen readers. The loading behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to swap the state of the placeholder and inform AT users of the update.
Width
@@ -584,7 +584,7 @@ The use of aria-hidden="true"
only indicates that the ele
aria-hidden="true"
only indicates that the ele
Overview
-
bootstrap.bundle.min.js
/ bootstrap.bundle.js
which contains Popper in order for popovers to work!bootstrap.bundle.min.js
/ bootstrap.bundle.js
which contains Popper in order for popovers to work!title
and content
values will never show a popover.sanitize
, sanitizeFn
sanitize
, sanitizeFn
-
+
diff --git a/docs/5.1/components/progress/index.html b/docs/5.1/components/progress/index.html
index 92564c8d15..5c78b0fbfe 100644
--- a/docs/5.1/components/progress/index.html
+++ b/docs/5.1/components/progress/index.html
@@ -17,7 +17,7 @@
-
+
@@ -615,7 +615,7 @@
prefers-reduced
prefers-reduced
.hide
class to comple
$toast-color: null;
$toast-background-color: rgba($white, .85);
$toast-border-width: 1px;
-$toast-border-color: rgba(0, 0, 0, .1);
+$toast-border-color: rgba($black, .1);
$toast-border-radius: $border-radius;
$toast-box-shadow: $box-shadow;
$toast-spacing: $container-padding-x;
$toast-header-color: $gray-600;
$toast-header-background-color: rgba($white, .85);
-$toast-header-border-color: rgba(0, 0, 0, .05);
+$toast-header-border-color: rgba($black, .05);
Usage
Things to know when using the tooltip plugin:
bootstrap.bundle.min.js
/ bootstrap.bundle.js
which contains Popper in order for tooltips to work!bootstrap.bundle.min.js
/ bootstrap.bundle.js
which contains Popper in order for tooltips to work!container: 'body'
to avoid rendering problems in more complex components (like our input groups, button groups, etc).sanitize
, sanitizeFn
sanitize
, sanitizeFn
-
+
diff --git a/docs/5.1/content/figures/index.html b/docs/5.1/content/figures/index.html
index 2deaee145a..2bb401fbef 100644
--- a/docs/5.1/content/figures/index.html
+++ b/docs/5.1/content/figures/index.html
@@ -17,7 +17,7 @@
-
+
@@ -461,7 +461,7 @@
Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
+Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.
@@ -421,7 +421,7 @@Images in Bootstrap are made responsive with .img-fluid
. This applies max-width: 100%;
and height: auto;
to the image so that it scales with the parent element.
Images in Bootstrap are made responsive with .img-fluid
. This applies max-width: 100%;
and height: auto;
to the image so that it scales with the parent width.
The <abbr>
element receives basic styling to make it stand out amongst paragraph text.
The default cursor
on summary is text
, so we reset that to pointer
to convey that the element can be interacted with by clicking on it.
Lastly, this CSS Tricks article on unused CSS shows how to use PurgeCSS and other similar tools.
Whenever possible, be sure to compress all the code you serve to your visitors. If you’re using Bootstrap dist files, try to stick to the minified versions (indicated by the .min.css
and .min.js
extensions). If you’re building Bootstrap from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS.
While minifying and using compression might seem like enough, making your files nonblocking ones is also a big step in making your site well-optimized and fast enough.
+While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough.
If you are using a Lighthouse plugin in Google Chrome, you may have stumbled over FCP. The First Contentful Paint metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.
You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don’t need to be present on the first paint of your page should be marked with async
or defer
attributes.
This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles.
@@ -535,7 +535,7 @@`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\n\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-bs-original-title] { // 1\n text-decoration: underline dotted; // 2\n cursor: help; // 3\n text-decoration-skip-ink: none; // 4\n}\n\n\n// Address\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\n\n// Lists\n\nol,\nul {\n padding-left: 2rem;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\n// 1. Undo browser default\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // 1\n}\n\n\n// Blockquote\n\nblockquote {\n margin: 0 0 1rem;\n}\n\n\n// Strong\n//\n// Add the correct font weight in Chrome, Edge, and Safari\n\nb,\nstrong {\n font-weight: $font-weight-bolder;\n}\n\n\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n @include font-size($small-font-size);\n}\n\n\n// Mark\n\nmark {\n padding: $mark-padding;\n background-color: $mark-bg;\n}\n\n\n// Sub and Sup\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n\nsub,\nsup {\n position: relative;\n @include font-size($sub-sup-font-size);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n// Links\n\na {\n color: $link-color;\n text-decoration: $link-decoration;\n\n &:hover {\n color: $link-hover-color;\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n &,\n &:hover {\n color: inherit;\n text-decoration: none;\n }\n}\n\n\n// Code\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-code;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n direction: ltr #{\"/* rtl:ignore */\"};\n unicode-bidi: bidi-override;\n}\n\n// 1. Remove browser default top margin\n// 2. Reset browser default of `1em` to use `rem`s\n// 3. Don't allow content to break outside\n\npre {\n display: block;\n margin-top: 0; // 1\n margin-bottom: 1rem; // 2\n overflow: auto; // 3\n @include font-size($code-font-size);\n color: $pre-color;\n\n // Account for some code outputs that place code tags in pre tags\n code {\n @include font-size(inherit);\n color: inherit;\n word-break: normal;\n }\n}\n\ncode {\n @include font-size($code-font-size);\n color: $code-color;\n word-wrap: break-word;\n\n // Streamline the style when inside anchors to avoid broken underline and more\n a > & {\n color: inherit;\n }\n}\n\nkbd {\n padding: $kbd-padding-y $kbd-padding-x;\n @include font-size($kbd-font-size);\n color: $kbd-color;\n background-color: $kbd-bg;\n @include border-radius($border-radius-sm);\n\n kbd {\n padding: 0;\n @include font-size(1em);\n font-weight: $nested-kbd-font-weight;\n }\n}\n\n\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n margin: 0 0 1rem;\n}\n\n\n// Images and content\n\nimg,\nsvg {\n vertical-align: middle;\n}\n\n\n// Tables\n//\n// Prevent double borders\n\ntable {\n caption-side: bottom;\n border-collapse: collapse;\n}\n\ncaption {\n padding-top: $table-cell-padding-y;\n padding-bottom: $table-cell-padding-y;\n color: $table-caption-color;\n text-align: left;\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `