diff --git a/404.html b/404.html index 03ee00569c..c993501c90 100644 --- a/404.html +++ b/404.html @@ -3,7 +3,7 @@ - + @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - - + + - - + - + @@ -65,7 +63,7 @@
Skip to main content - +
@@ -145,15 +143,19 @@
- +

404

@@ -265,7 +265,7 @@
@@ -314,7 +314,7 @@
- + @@ -324,7 +324,7 @@ - - + + diff --git a/docs/5.2/about/brand/index.html b/docs/5.2/about/brand/index.html index 84b3079998..e1c8c7f2d7 100644 --- a/docs/5.2/about/brand/index.html +++ b/docs/5.2/about/brand/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

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.

 @@ -550,7 +550,7 @@
@@ -599,7 +599,7 @@
- + @@ -608,12 +608,12 @@ - +
diff --git a/docs/5.2/about/license/index.html b/docs/5.2/about/license/index.html index 2a9e5bf1b6..e08f7c7070 100644 --- a/docs/5.2/about/license/index.html +++ b/docs/5.2/about/license/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
@@ -528,7 +528,7 @@
@@ -577,7 +577,7 @@
- + @@ -586,12 +586,12 @@ - +
diff --git a/docs/5.2/about/overview/index.html b/docs/5.2/about/overview/index.html index 673502e0a0..982457286f 100644 --- a/docs/5.2/about/overview/index.html +++ b/docs/5.2/about/overview/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
@@ -561,7 +561,7 @@
- + @@ -570,12 +570,12 @@ - +
diff --git a/docs/5.2/about/team/index.html b/docs/5.2/about/team/index.html index 88d6cef5be..8e8eeb56b9 100644 --- a/docs/5.2/about/team/index.html +++ b/docs/5.2/about/team/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
@@ -584,7 +584,7 @@
@@ -633,7 +633,7 @@
- + @@ -642,12 +642,12 @@ - +
diff --git a/docs/5.2/about/translations/index.html b/docs/5.2/about/translations/index.html index 5913191833..4331e208a9 100644 --- a/docs/5.2/about/translations/index.html +++ b/docs/5.2/about/translations/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
@@ -2290,7 +2290,7 @@ Note that content should not be larger than the height of the image. If content
- + @@ -2299,12 +2299,12 @@ Note that content should not be larger than the height of the image. If content - +
diff --git a/docs/5.2/components/carousel/index.html b/docs/5.2/components/carousel/index.html index e50ce7d0f8..70c5548ff7 100644 --- a/docs/5.2/components/carousel/index.html +++ b/docs/5.2/components/carousel/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

How it works

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.

@@ -1074,9 +1074,10 @@ The animation effect of this component is dependent on the prefers-reduced </div>

Custom transition

-

The transition duration of .carousel-item can be changed with the $carousel-transition-duration 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. transition: transform 2s ease, opacity .5s ease-out).

+

The transition duration of .carousel-item can be changed with the $carousel-transition-duration 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 (e.g. transition: transform 2s ease, opacity .5s ease-out).

Sass

Variables

+

Variables for all carousels:

$carousel-control-color:             $white;
 $carousel-control-width:             15%;
 $carousel-control-opacity:           .5;
@@ -1104,8 +1105,9 @@ The animation effect of this component is dependent on the prefers-reduced
 
 $carousel-transition-duration:       .6s;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
-
-$carousel-dark-indicator-active-bg:  $black;
+
+

Variables for the dark carousel:

+
$carousel-dark-indicator-active-bg:  $black;
 $carousel-dark-caption-color:        $black;
 $carousel-dark-control-icon-filter:  invert(1) grayscale(100);
@@ -1201,11 +1203,11 @@ The animation effect of this component is dependent on the prefers-reduced getInstance -Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: bootstrap.Carousel.getInstance(element) +Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: bootstrap.Carousel.getInstance(element). getOrCreateInstance -Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: bootstrap.Carousel.getOrCreateInstance(element) +Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: bootstrap.Carousel.getOrCreateInstance(element). next @@ -1213,7 +1215,7 @@ The animation effect of this component is dependent on the prefers-reduced nextWhenVisible -Don’t cycle carousel to next when the page isn’t visible or the carousel or its parent isn’t visible. Returns to the caller before the target item has been shown +Don’t cycle carousel to next when the page isn’t visible or the carousel or its parent isn’t visible. Returns to the caller before the target item has been shown. pause @@ -1280,7 +1282,7 @@ The animation effect of this component is dependent on the prefers-reduced
@@ -1329,7 +1331,7 @@ The animation effect of this component is dependent on the prefers-reduced
- + @@ -1338,12 +1340,12 @@ The animation effect of this component is dependent on the prefers-reduced - +
diff --git a/docs/5.2/components/close-button/index.html b/docs/5.2/components/close-button/index.html index 0e599a4dfa..e49898335d 100644 --- a/docs/5.2/components/close-button/index.html +++ b/docs/5.2/components/close-button/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Example

Provide an option to dismiss or close a component with .btn-close. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default background-image. Be sure to include text for screen readers, as we’ve done with aria-label.

@@ -590,7 +590,7 @@
@@ -639,7 +639,7 @@
- + @@ -648,12 +648,12 @@ - +
diff --git a/docs/5.2/components/collapse/index.html b/docs/5.2/components/collapse/index.html index d7f03182b2..919b6cb5b4 100644 --- a/docs/5.2/components/collapse/index.html +++ b/docs/5.2/components/collapse/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

How it works

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 height from its current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.

@@ -731,15 +731,15 @@ Multiple <button> or <a> can show and hide parent -selector, jQuery object, DOM element -false +selector, DOM element +null 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 card class). The attribute has to be set on the target collapsible area. toggle boolean true -Toggles the collapsible element on invocation +Toggles the collapsible element on invocation.
@@ -771,11 +771,11 @@ Multiple <button> or <a> can show and hide getInstance -Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: bootstrap.Collapse.getInstance(element) +Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: bootstrap.Collapse.getInstance(element). getOrCreateInstance -Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: bootstrap.Collapse.getOrCreateInstance(element) +Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: bootstrap.Collapse.getOrCreateInstance(element). hide @@ -842,7 +842,7 @@ Multiple <button> or <a> can show and hide
@@ -891,7 +891,7 @@ Multiple <button> or <a> can show and hide
- + @@ -900,12 +900,12 @@ Multiple <button> or <a> can show and hide - +
diff --git a/docs/5.2/components/dropdowns/index.html b/docs/5.2/components/dropdowns/index.html index cae0807ca1..b66c94f8e5 100644 --- a/docs/5.2/components/dropdowns/index.html +++ b/docs/5.2/components/dropdowns/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Overview

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 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.

+

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 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

The WAI ARIA standard defines an actual 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.

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 role and aria- attributes required for true ARIA menus. Authors will have to include these more specific attributes themselves.

@@ -1993,7 +1993,8 @@ Added in v5.2.0

As part of Bootstrap’s evolving CSS variables approach, dropdowns now use local CSS variables on .dropdown-menu for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

-
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
+
  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
+  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
   --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
   --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
   --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
@@ -2196,12 +2197,12 @@ On touch-enabled devices, opening a dropdown adds empty mouseover h
 autoClose
 boolean, string
 true
-Configure the auto close behavior of the dropdown: 
  • true - the dropdown will be closed by clicking outside or inside the dropdown menu.
  • false - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
  • 'inside' - the dropdown will be closed (only) by clicking inside the dropdown menu.
    •   
  • 'outside' - the dropdown will be closed (only) by clicking outside the dropdown menu.
 Note: the dropdown can always be closed with the ESC key
+Configure the auto close behavior of the dropdown: 
  • true - the dropdown will be closed by clicking outside or inside the dropdown menu.
  • false - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
  • 'inside' - the dropdown will be closed (only) by clicking inside the dropdown menu.
    •  
  • 'outside' - the dropdown will be closed (only) by clicking outside the dropdown menu.
 Note: the dropdown can always be closed with the ESC key.
 
 
 boundary
 string, element
-'scrollParent'
+'clippingParents'
 Overflow constraint boundary of the dropdown menu (applies only to Popper’s preventOverflow modifier). By default it’s clippingParents and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper’s detectOverflow docs.
 
 
@@ -2212,7 +2213,7 @@ On touch-enabled devices, opening a dropdown adds empty mouseover h
 
 
 offset
-number, string, function
+array, string, function
 [0, 2]
 Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: data-bs-offset="10,20". When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: skidding, distance. For more information refer to Popper’s offset docs.
 
@@ -2224,7 +2225,7 @@ On touch-enabled devices, opening a dropdown adds empty mouseover h
 
 
 reference
-string, element
+string, element, object
 'toggle'
 Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', an HTMLElement reference or an object providing getBoundingClientRect. For more information refer to Popper’s constructor docs and virtual element docs.
 
@@ -2254,7 +2255,7 @@ On touch-enabled devices, opening a dropdown adds empty mouseover h
 
 
 getInstance
-Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: bootstrap.Dropdown.getInstance(element)
+Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: bootstrap.Dropdown.getInstance(element).
 
 
 getOrCreateInstance
@@ -2329,7 +2330,7 @@ On touch-enabled devices, opening a dropdown adds empty mouseover h
         
       

       

@@ -2378,7 +2379,7 @@ On touch-enabled devices, opening a dropdown adds empty mouseover h
   

 
 
-    
+    
 
 
 
@@ -2387,12 +2388,12 @@ On touch-enabled devices, opening a dropdown adds empty mouseover h
 
 
 
 
 
-
+    
   

 
   
diff --git a/docs/5.2/components/list-group/index.html b/docs/5.2/components/list-group/index.html
index e0adee3321..cf08e89fed 100644
--- a/docs/5.2/components/list-group/index.html
+++ b/docs/5.2/components/list-group/index.html
@@ -18,7 +18,7 @@
 
 
 
-
+
 
 
 
@@ -31,23 +31,21 @@
 
 
 
-
-
+
 
 
 
 
-
+
 
-
 
 
 
 
-
 
 
 
+
 
 
 
@@ -145,6 +143,7 @@
 
     

   

 
 
-
+    
   

     

-
+      
 
       

-
+        
 
         
Basic example 

 
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.

@@ -1365,42 +1357,44 @@
   <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
 </div>

Methods

-

constructor

-

Activates a list item element and content container. Tab should have either a data-bs-target or an href targeting a container node in the DOM.

-
<div class="list-group" id="myList" role="tablist">
-  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
-  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
-  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
-  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
-</div>
-
-<div class="tab-content">
-  <div class="tab-pane active" id="home" role="tabpanel">...</div>
-  <div class="tab-pane" id="profile" role="tabpanel">...</div>
-  <div class="tab-pane" id="messages" role="tabpanel">...</div>
-  <div class="tab-pane" id="settings" role="tabpanel">...</div>
-</div>
-
-<script>
-  const firstTabEl = document.querySelector('#myTab a:last-child')
-  const firstTab = new bootstrap.Tab(firstTabEl)
-
-  firstTab.show()
-</script>
-

show

-

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. Returns to the caller before the tab pane has actually been shown (for example, before the shown.bs.tab event occurs).

-
const tab = new bootstrap.Tab('#someListItem')
-
-tab.show()
-

dispose

-

Destroys an element’s tab.

-

getInstance

-

Static method which allows you to get the tab instance associated with a DOM element

-
const tab = bootstrap.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance
-

getOrCreateInstance

-

Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialized

-
const tab = bootstrap.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance
-

Events

+
+

Asynchronous methods and transitions

+

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

+

See our JavaScript documentation for more information.

+ +
+ +

Activates your content as a tab element.

+

You can create a tab instance with the constructor, for example:

+
const bsTab = new bootstrap.Tab('#myTab')
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
disposeDestroys an element’s tab.
getInstanceStatic method which allows you to get the tab instance associated with a DOM element, you can use it like this: bootstrap.Tab.getInstance(element).
getOrCreateInstanceStatic method which returns a tab instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: bootstrap.Tab.getOrCreateInstance(element).
showSelects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.bs.tab event occurs).
+ +

Events

When showing a new tab, the events fire in the following order:

  1. hide.bs.tab (on the current active tab)
    2. @@ -1408,7 +1402,7 @@
  2. hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
  3. shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)
-

If no tab was already active, the hide.bs.tab and hidden.bs.tab events will not be fired.

+

If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.

@@ -1460,7 +1454,7 @@
@@ -1509,7 +1503,7 @@
- + @@ -1518,12 +1512,12 @@ - +
diff --git a/docs/5.2/components/modal/index.html b/docs/5.2/components/modal/index.html index ea4ff544a4..e116343a8a 100644 --- a/docs/5.2/components/modal/index.html +++ b/docs/5.2/components/modal/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

How it works

Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.

@@ -1541,7 +1541,7 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f
- + @@ -1604,7 +1604,7 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f
@@ -1653,7 +1653,7 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f
- + @@ -1662,12 +1662,12 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f - +
diff --git a/docs/5.2/components/navbar/index.html b/docs/5.2/components/navbar/index.html index 59dea16a64..322bf32260 100644 --- a/docs/5.2/components/navbar/index.html +++ b/docs/5.2/components/navbar/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

How it works

Here’s what you need to know before getting started with the navbar:

@@ -693,7 +693,7 @@ The animation effect of this component is dependent on the prefers-reduced @@ -710,7 +710,7 @@ The animation effect of this component is dependent on the prefers-reduced 
<nav class="navbar bg-light">
   <div class="container">
     <a class="navbar-brand" href="#">
-      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
+      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
     </a>
   </div>
 </nav>
@@ -721,7 +721,7 @@ The animation effect of this component is dependent on the prefers-reduced - +
- +

Base nav

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.

@@ -1434,51 +1426,37 @@ The tab JavaScript plugin does not support tabbed interfaces th
-

constructor

-

Activates a tab element and content container. Tab should have either a data-bs-target or, if using a link, an href attribute, targeting a container node in the DOM.

-
<ul class="nav nav-tabs" id="myTab" role="tablist">
-  <li class="nav-item" role="presentation">
-    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
-  </li>
-  <li class="nav-item" role="presentation">
-    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
-  </li>
-  <li class="nav-item" role="presentation">
-    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
-  </li>
-  <li class="nav-item" role="presentation">
-    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
-  </li>
-</ul>
-
-<div class="tab-content">
-  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
-  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
-  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
-  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
-</div>
-
-<script>
-  const firstTabEl = document.querySelector('#myTab li:last-child button')
-  const firstTab = new bootstrap.Tab(firstTabEl)
-
-  firstTab.show()
-</script>
-

show

-

Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.bs.tab event occurs).

-
const someTabTriggerEl = document.querySelector('#someTabTrigger')
-const tab = new bootstrap.Tab(someTabTriggerEl)
-
-tab.show()
-

dispose

-

Destroys an element’s tab.

-

getInstance

-

Static method which allows you to get the tab instance associated with a DOM element

-
const tab = bootstrap.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance
-

getOrCreateInstance

-

Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialized

-
const tab = bootstrap.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance
-

Events

+

Activates your content as a tab element.

+

You can create a tab instance with the constructor, for example:

+
const bsTab = new bootstrap.Tab('#myTab')
+
showManually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property). (i.e. const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property). (i.e. const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle
+ + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
disposeDestroys an element’s tab.
getInstanceStatic method which allows you to get the tab instance associated with a DOM element, you can use it like this: bootstrap.Tab.getInstance(element).
getOrCreateInstanceStatic method which returns a tab instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: bootstrap.Tab.getOrCreateInstance(element).
showSelects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.bs.tab event occurs).
+ +

Events

When showing a new tab, the events fire in the following order:

  1. hide.bs.tab (on the current active tab)
    2. @@ -1536,7 +1514,7 @@ The tab JavaScript plugin does not support tabbed interfaces th
@@ -1585,7 +1563,7 @@ The tab JavaScript plugin does not support tabbed interfaces th
- + @@ -1594,12 +1572,12 @@ The tab JavaScript plugin does not support tabbed interfaces th - +
diff --git a/docs/5.2/components/offcanvas/index.html b/docs/5.2/components/offcanvas/index.html index 660a7d03f3..5f5eaeb081 100644 --- a/docs/5.2/components/offcanvas/index.html +++ b/docs/5.2/components/offcanvas/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

How it works

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and data attributes are used to invoke our JavaScript.

@@ -655,38 +655,6 @@ The animation effect of this component is dependent on the prefers-reduced </div> </div>
-

Dark offcanvas

-

Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add .text-bg-dark to the .offcanvas and .btn-close-white to .btn-close for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding .dropdown-menu-dark to .dropdown-menu.

-
-
-
-
Offcanvas
- -
-
-

Place offcanvas content here.

-
-
-
- html -
- - -
- 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
-  <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
-    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
-  </div>
-  <div class="offcanvas-body">
-    <p>Place offcanvas content here.</p>
-  </div>
-</div>
-

Body scrolling

Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to enable <body> scrolling.

@@ -803,8 +771,43 @@ The animation effect of this component is dependent on the prefers-reduced </div> </div>
+

Dark offcanvas

+Added in v5.2.0 + +

Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add .text-bg-dark to the .offcanvas and .btn-close-white to .btn-close for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding .dropdown-menu-dark to .dropdown-menu.

+
+
+
+
Offcanvas
+ +
+
+

Place offcanvas content here.

+
+
+
+ html +
+ + +
+ 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
+    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <p>Place offcanvas content here.</p>
+  </div>
+</div>
+

Responsive

-

Added in v5.2.0

+Added in v5.2.0 +

Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, .offcanvas-lg hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.

@@ -968,9 +971,11 @@ The animation effect of this component is dependent on the prefers-reduced

Since the offcanvas panel is conceptually a modal dialog, be sure to add aria-labelledby="..."—referencing the offcanvas title—to .offcanvas. Note that you don’t need to add role="dialog" since we already add it via JavaScript.

CSS

Variables

-

Added in v5.2.0

+Added in v5.2.0 +

As part of Bootstrap’s evolving CSS variables approach, offcanvas now uses local CSS variables on .offcanvas for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

-
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
+
  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
+  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
   --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
   --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
   --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
@@ -1046,13 +1051,13 @@ While both ways to dismiss an offcanvas are supported, keep in mind that dismiss
 keyboard
 boolean
 true
-Closes the offcanvas when escape key is pressed
+Closes the offcanvas when escape key is pressed.
 
 
 scroll
 boolean
 false
-Allow body scrolling while offcanvas is open
+Allow body scrolling while offcanvas is open.
 
 
 

@@ -1078,11 +1083,11 @@ While both ways to dismiss an offcanvas are supported, keep in mind that dismiss
 
 
 getInstance
-Static method which allows you to get the offcanvas instance associated with a DOM element
+Static method which allows you to get the offcanvas instance associated with a DOM element.
 
 
 getOrCreateInstance
-Static method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn’t initialized
+Static method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn’t initialized.
 
 
 hide
@@ -1153,7 +1158,7 @@ While both ways to dismiss an offcanvas are supported, keep in mind that dismiss
@@ -1202,7 +1207,7 @@ While both ways to dismiss an offcanvas are supported, keep in mind that dismiss
- + @@ -1211,12 +1216,12 @@ While both ways to dismiss an offcanvas are supported, keep in mind that dismiss - +
diff --git a/docs/5.2/components/pagination/index.html b/docs/5.2/components/pagination/index.html index 49119c5694..43134936c1 100644 --- a/docs/5.2/components/pagination/index.html +++ b/docs/5.2/components/pagination/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Overview

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

@@ -912,7 +912,7 @@
@@ -961,7 +961,7 @@
- + @@ -970,12 +970,12 @@ - +
diff --git a/docs/5.2/components/placeholders/index.html b/docs/5.2/components/placeholders/index.html index 1bf7e36400..4d203341e3 100644 --- a/docs/5.2/components/placeholders/index.html +++ b/docs/5.2/components/placeholders/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

About

Placeholders can be used to enhance the experience of your application. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.

@@ -728,7 +728,7 @@ The use of aria-hidden="true" only indicates that the ele
@@ -777,7 +777,7 @@ The use of aria-hidden="true" only indicates that the ele
- + @@ -786,12 +786,12 @@ The use of aria-hidden="true" only indicates that the ele - +
diff --git a/docs/5.2/components/popovers/index.html b/docs/5.2/components/popovers/index.html index e820f6ec43..cc020dd844 100644 --- a/docs/5.2/components/popovers/index.html +++ b/docs/5.2/components/popovers/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Overview

Things to know when using the popover plugin:

    -
  • Popovers rely on the third party library Popper for positioning. You must include popper.min.js before bootstrap.js, or use one bootstrap.bundle.min.js which contains Popper.
    • +
  • Popovers rely on the third party library Popper for positioning. You must include popper.min.js before bootstrap.js, or use one bootstrap.bundle.min.js which contains Popper.
  • Popovers require the popover plugin as a dependency.
  • Popovers are opt-in for performance reasons, so you must initialize them yourself.
  • Zero-length title and content values will never show a popover.
    • @@ -620,6 +620,10 @@ Feel free to use either title or data-bs-title in your 
    const popover = new bootstrap.Popover('.example-popover', {
   container: 'body'
 })
+

    Another situation where you’ll want to set an explicit custom container are popovers inside a modal dialog, to make sure that the popover itself is appended to the modal. This is particularly important for popovers that contain interactive elements – modal dialogs will trap focus, so unless the popover is a child element of the modal, users won’t be able to focus or activate these interactive elements.

    +
    const popover = new bootstrap.Popover('.example-popover', {
+  container: '.modal-body'
+})

    Custom popovers

    Added in v5.2.0 @@ -742,7 +746,7 @@ Feel free to use either title or data-bs-title in your $popover-header-font-size: $font-size-base; $popover-header-bg: shade-color($popover-bg, 6%); -$popover-header-color: var(--#{$prefix}heading-color); +$popover-header-color: $headings-color; $popover-header-padding-y: .5rem; $popover-header-padding-x: $spacer; @@ -793,7 +797,7 @@ Note that for security reasons the sanitize, sanitizeFnanimation boolean true -Apply a CSS fade transition to the popover +Apply a CSS fade transition to the popover. boundary @@ -941,7 +945,7 @@ Note that for security reasons the sanitize, sanitizeFn getOrCreateInstance -Static method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn’t initialized +Static method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn’t initialized. hide @@ -1035,7 +1039,7 @@ The setContent method accepts an object argument, wher
@@ -1084,7 +1088,7 @@ The setContent method accepts an object argument, wher
- + @@ -1093,12 +1097,12 @@ The setContent method accepts an object argument, wher - +
diff --git a/docs/5.2/components/progress/index.html b/docs/5.2/components/progress/index.html index a4f52ae4eb..53f71291cb 100644 --- a/docs/5.2/components/progress/index.html +++ b/docs/5.2/components/progress/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

@@ -811,7 +811,7 @@
@@ -860,7 +860,7 @@
- + @@ -869,12 +869,12 @@ - +
diff --git a/docs/5.2/components/scrollspy/index.html b/docs/5.2/components/scrollspy/index.html index 431d7bd90f..d569b57841 100644 --- a/docs/5.2/components/scrollspy/index.html +++ b/docs/5.2/components/scrollspy/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

How it works

Scrollspy toggles the .active class on anchor (<a>) elements when the element with the id referenced by the anchor’s href is scrolled into view. Scrollspy is best used in conjunction with a Bootstrap nav component or list group, but it will also work with any anchor elements in the current page. Here’s how it works.

@@ -862,7 +862,7 @@ rootMargin string -0px 0px -40% +0px 0px -25% Intersection Observer rootMargin valid units, when calculating scroll position. @@ -873,10 +873,16 @@ target -string | jQuery object | DOM element - +string, DOM element +null Specifies element to apply Scrollspy plugin. + +threshold +array +[0.1, 0.5, 1] +IntersectionObserver threshold valid input, when calculating scroll position. +
@@ -902,7 +908,7 @@ To keep backwards compatibility, we will continue to parse a given offset< getInstance -Static method to get the scrollspy instance associated with a DOM element +Static method to get the scrollspy instance associated with a DOM element. getOrCreateInstance @@ -957,7 +963,7 @@ To keep backwards compatibility, we will continue to parse a given offset<
@@ -1006,7 +1012,7 @@ To keep backwards compatibility, we will continue to parse a given offset<
- + @@ -1015,12 +1021,12 @@ To keep backwards compatibility, we will continue to parse a given offset< - +
diff --git a/docs/5.2/components/spinners/index.html b/docs/5.2/components/spinners/index.html index c25b95eb6f..d110aa2445 100644 --- a/docs/5.2/components/spinners/index.html +++ b/docs/5.2/components/spinners/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

About

Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.

@@ -995,7 +995,7 @@ The animation effect of this component is dependent on the prefers-reduced
@@ -1044,7 +1044,7 @@ The animation effect of this component is dependent on the prefers-reduced
- + @@ -1053,12 +1053,12 @@ The animation effect of this component is dependent on the prefers-reduced - +
diff --git a/docs/5.2/components/toasts/index.html b/docs/5.2/components/toasts/index.html index 3579e0066e..389ac13513 100644 --- a/docs/5.2/components/toasts/index.html +++ b/docs/5.2/components/toasts/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

Overview

@@ -1073,7 +1073,8 @@ Previously, our scripts dynamically added the .hide class to comple Added in v5.2.0

As part of Bootstrap’s evolving CSS variables approach, toasts now use local CSS variables on .toast for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

-
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
+
  --#{$prefix}toast-zindex: #{$zindex-toast};
+  --#{$prefix}toast-padding-x: #{$toast-padding-x};
   --#{$prefix}toast-padding-y: #{$toast-padding-y};
   --#{$prefix}toast-spacing: #{$toast-spacing};
   --#{$prefix}toast-max-width: #{$toast-max-width};
@@ -1132,19 +1133,19 @@ Previously, our scripts dynamically added the .hide class to comple
 animation
 boolean
 true
-Apply a CSS fade transition to the toast
+Apply a CSS fade transition to the toast.
 
 
 autohide
 boolean
 true
-Automatically hide the toast after the delay
+Automatically hide the toast after the delay.
 
 
 delay
 number
 5000
-Delay in milliseconds before hiding the toast
+Delay in milliseconds before hiding the toast.
 
 
 

@@ -1171,11 +1172,11 @@ Previously, our scripts dynamically added the .hide class to comple
 
 
 getInstance
-Static method which allows you to get the scrollspy instance associated with a DOM element. 
 For example: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl) Returns a Bootstrap toast instance
+Static method which allows you to get the toast instance associated with a DOM element. 
 For example: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl) Returns a Bootstrap toast instance.
 
 
 getOrCreateInstance
-Static method which allows you to get the scrollspy instance associated with a DOM element, or create a new one, in case it wasn’t initialized.  
const myToastEl = document.getElementById('myToastEl')  const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) Returns a Bootstrap toast instance
+Static method which allows you to get the toast instance associated with a DOM element, or create a new one, in case it wasn’t initialized. 
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) Returns a Bootstrap toast instance.
 
 
 hide
@@ -1241,7 +1242,7 @@ Previously, our scripts dynamically added the .hide class to comple
@@ -1290,7 +1291,7 @@ Previously, our scripts dynamically added the .hide class to comple
- + @@ -1299,12 +1300,12 @@ Previously, our scripts dynamically added the .hide class to comple - +
diff --git a/docs/5.2/components/tooltips/index.html b/docs/5.2/components/tooltips/index.html index 37b7000dfd..ef679cb25f 100644 --- a/docs/5.2/components/tooltips/index.html +++ b/docs/5.2/components/tooltips/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Overview

Things to know when using the tooltip plugin:

    -
  • Tooltips rely on the third party library Popper for positioning. You must include popper.min.js before bootstrap.js, or use one bootstrap.bundle.min.js which contains Popper.
    • +
  • Tooltips rely on the third party library Popper for positioning. You must include popper.min.js before bootstrap.js, or use one bootstrap.bundle.min.js which contains Popper.
  • Tooltips are opt-in for performance reasons, so you must initialize them yourself.
  • Tooltips with zero-length titles are never displayed.
  • Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc).
    • @@ -761,7 +761,7 @@ Note that for security reasons the sanitize, sanitizeFnanimation boolean true -Apply a CSS fade transition to the tooltip +Apply a CSS fade transition to the tooltip. boundary @@ -789,9 +789,9 @@ Note that for security reasons the sanitize, sanitizeFn fallbackPlacements -string, array +array ['top', 'right', 'bottom', 'left'] -Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper’s [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements. +Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper’s behavior docs. html @@ -801,7 +801,7 @@ Note that for security reasons the sanitize, sanitizeFn offset -number, string, function +array, string, function [0, 0] Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: data-bs-offset="10,20". When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: skidding, distance. For more information refer to Popper’s offset docs. @@ -899,11 +899,11 @@ Note that for security reasons the sanitize, sanitizeFn getInstance -Static method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn’t initialized +Static method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn’t initialized. getOrCreateInstance -Static method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn’t initialized +Static method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn’t initialized. hide @@ -997,7 +997,7 @@ The setContent method accepts an object argument, wher
@@ -1046,7 +1046,7 @@ The setContent method accepts an object argument, wher
- + @@ -1055,12 +1055,12 @@ The setContent method accepts an object argument, wher - +
diff --git a/docs/5.2/content/figures/index.html b/docs/5.2/content/figures/index.html index 8e059abeb3..c166c27c76 100644 --- a/docs/5.2/content/figures/index.html +++ b/docs/5.2/content/figures/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>.

Use the included .figure, .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive.

@@ -572,7 +572,7 @@
@@ -621,7 +621,7 @@
- + @@ -630,12 +630,12 @@ - +
diff --git a/docs/5.2/content/images/index.html b/docs/5.2/content/images/index.html index 8646aeb184..0a3a9c5b75 100644 --- a/docs/5.2/content/images/index.html +++ b/docs/5.2/content/images/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Responsive images

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.

@@ -630,7 +630,7 @@
@@ -679,7 +679,7 @@
- + @@ -688,12 +688,12 @@ - +
diff --git a/docs/5.2/content/reboot/index.html b/docs/5.2/content/reboot/index.html index 5b7e746955..604a2dc073 100644 --- a/docs/5.2/content/reboot/index.html +++ b/docs/5.2/content/reboot/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Approach

Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <table> styles for a simpler baseline and later provide .table, .table-bordered, and more.

@@ -1093,7 +1093,7 @@ To edit settings, press ctrl + ,
@@ -1142,7 +1142,7 @@ To edit settings, press ctrl + ,
- + @@ -1151,12 +1151,12 @@ To edit settings, press ctrl + , - +
diff --git a/docs/5.2/content/tables/index.html b/docs/5.2/content/tables/index.html index 1b81b62047..82db2c456a 100644 --- a/docs/5.2/content/tables/index.html +++ b/docs/5.2/content/tables/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Overview

Due to the widespread use of <table> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are opt-in. Add the base class .table to any <table>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.

@@ -622,7 +622,7 @@ Cell Cell - + Primary Cell @@ -1737,7 +1737,7 @@ @twitter - +
@@ -2347,7 +2347,7 @@
@@ -2396,7 +2396,7 @@
- + @@ -2405,12 +2405,12 @@ - +
diff --git a/docs/5.2/content/typography/index.html b/docs/5.2/content/typography/index.html index 5300f0788f..5cf1524505 100644 --- a/docs/5.2/content/typography/index.html +++ b/docs/5.2/content/typography/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Global settings

Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.

@@ -1057,7 +1057,7 @@
@@ -1106,7 +1106,7 @@
- + @@ -1115,12 +1115,12 @@ - +
diff --git a/docs/5.2/customize/color/index.html b/docs/5.2/customize/color/index.html index 5e8a198ac6..35b226aa29 100644 --- a/docs/5.2/customize/color/index.html +++ b/docs/5.2/customize/color/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss file.

- +
Primary
- +
Secondary
- +
Success
- +
Danger
- +
Warning
- +
Info
- +
Light
- +
Dark
- +

All these colors are available as a Sass map, $theme-colors.

$theme-colors: (
@@ -566,265 +566,265 @@
 
All Bootstrap colors are available as Sass variables and a Sass map in scss/_variables.scss file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a theme palette.

 
Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.

 

-
+  
     

       

         $blue
         #0d6efd
       

-
+      
       
$blue-100

-
+      
       
$blue-200

-
+      
       
$blue-300

-
+      
       
$blue-400

-
+      
       
$blue-500

-
+      
       
$blue-600

-
+      
       
$blue-700

-
+      
       
$blue-800

-
+      
       
$blue-900

-
+      
     

-
+    
     

       

         $indigo
         #6610f2
       

-
+      
       
$indigo-100

-
+      
       
$indigo-200

-
+      
       
$indigo-300

-
+      
       
$indigo-400

-
+      
       
$indigo-500

-
+      
       
$indigo-600

-
+      
       
$indigo-700

-
+      
       
$indigo-800

-
+      
       
$indigo-900

-
+      
     

-
+    
     

       

         $purple
         #6f42c1
       

-
+      
       
$purple-100

-
+      
       
$purple-200

-
+      
       
$purple-300

-
+      
       
$purple-400

-
+      
       
$purple-500

-
+      
       
$purple-600

-
+      
       
$purple-700

-
+      
       
$purple-800

-
+      
       
$purple-900

-
+      
     

-
+    
     

       

         $pink
         #d63384
       

-
+      
       
$pink-100

-
+      
       
$pink-200

-
+      
       
$pink-300

-
+      
       
$pink-400

-
+      
       
$pink-500

-
+      
       
$pink-600

-
+      
       
$pink-700

-
+      
       
$pink-800

-
+      
       
$pink-900

-
+      
     

-
+    
     

       

         $red
         #dc3545
       

-
+      
       
$red-100

-
+      
       
$red-200

-
+      
       
$red-300

-
+      
       
$red-400

-
+      
       
$red-500

-
+      
       
$red-600

-
+      
       
$red-700

-
+      
       
$red-800

-
+      
       
$red-900

-
+      
     

-
+    
     

       

         $orange
         #fd7e14
       

-
+      
       
$orange-100

-
+      
       
$orange-200

-
+      
       
$orange-300

-
+      
       
$orange-400

-
+      
       
$orange-500

-
+      
       
$orange-600

-
+      
       
$orange-700

-
+      
       
$orange-800

-
+      
       
$orange-900

-
+      
     

-
+    
     

       

         $yellow
         #ffc107
       

-
+      
       
$yellow-100

-
+      
       
$yellow-200

-
+      
       
$yellow-300

-
+      
       
$yellow-400

-
+      
       
$yellow-500

-
+      
       
$yellow-600

-
+      
       
$yellow-700

-
+      
       
$yellow-800

-
+      
       
$yellow-900

-
+      
     

-
+    
     

       

         $green
         #198754
       

-
+      
       
$green-100

-
+      
       
$green-200

-
+      
       
$green-300

-
+      
       
$green-400

-
+      
       
$green-500

-
+      
       
$green-600

-
+      
       
$green-700

-
+      
       
$green-800

-
+      
       
$green-900

-
+      
     

-
+    
     

       

         $teal
         #20c997
       

-
+      
       
$teal-100

-
+      
       
$teal-200

-
+      
       
$teal-300

-
+      
       
$teal-400

-
+      
       
$teal-500

-
+      
       
$teal-600

-
+      
       
$teal-700

-
+      
       
$teal-800

-
+      
       
$teal-900

-
+      
     

-
+    
     

       

         $cyan
         #0dcaf0
       

-
+      
       
$cyan-100

-
+      
       
$cyan-200

-
+      
       
$cyan-300

-
+      
       
$cyan-400

-
+      
       
$cyan-500

-
+      
       
$cyan-600

-
+      
       
$cyan-700

-
+      
       
$cyan-800

-
+      
       
$cyan-900

-
+      
     

     

     

@@ -832,24 +832,24 @@
       #adb5bd
     

     
$gray-100

-
+  
     
$gray-200

-
+  
     
$gray-300

-
+  
     
$gray-400

-
+  
     
$gray-500

-
+  
     
$gray-600

-
+  
     
$gray-700

-
+  
     
$gray-800

-
+  
     
$gray-900

   

-
+  
   

     

       $black
@@ -953,7 +953,7 @@
         
       

       

@@ -1002,7 +1002,7 @@
   

 
 
-    
+    
 
 
 
@@ -1011,12 +1011,12 @@
 
 
 
 
 
-
+    
   

 
   
diff --git a/docs/5.2/customize/components/index.html b/docs/5.2/customize/components/index.html
index 80ca7510df..c5d5aa0052 100644
--- a/docs/5.2/customize/components/index.html
+++ b/docs/5.2/customize/components/index.html
@@ -18,7 +18,7 @@
 
 
 
-
+
 
 
 
@@ -31,23 +31,21 @@
 
 
 
-
-
+
 
 
 
 
-
+
 
-
 
 
 
 
-
 
 
 
+
 
 
 
@@ -145,6 +143,7 @@
 
     

   

 
 
-
+    
   

     

-
+      
 
       

-
+        
 
         
Base classes 

 
Bootstrap’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like .btn, and then group individual styles for each variant into modifier classes, like .btn-primary or .btn-success.

@@ -627,7 +627,7 @@
         
       

       

@@ -676,7 +676,7 @@
   

 
 
-    
+    
 
 
 
@@ -685,12 +685,12 @@
 
 
 
 
 
-
+    
   

 
   
diff --git a/docs/5.2/customize/css-variables/index.html b/docs/5.2/customize/css-variables/index.html
index d095e61565..dffa33e1f8 100644
--- a/docs/5.2/customize/css-variables/index.html
+++ b/docs/5.2/customize/css-variables/index.html
@@ -18,7 +18,7 @@
 
 
 
-
+
 
 
 
@@ -31,23 +31,21 @@
 
 
 
-
-
+
 
 
 
 
-
+
 
-
 
 
 
 
-
 
 
 
+
 
 
 
@@ -145,6 +143,7 @@
 
     

   

 
 
-
+    
   

     

-
+      
 
       

-
+        
 
         
Bootstrap includes many CSS custom properties (variables) in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s inspector, a code sandbox, or general prototyping.

 
All our custom properties are prefixed with bs- to avoid conflicts with third party CSS.

@@ -611,7 +611,7 @@
         
       

       

@@ -660,7 +660,7 @@
   

 
 
-    
+    
 
 
 
@@ -669,12 +669,12 @@
 
 
 
 
 
-
+    
   

 
   
diff --git a/docs/5.2/customize/optimize/index.html b/docs/5.2/customize/optimize/index.html
index fb505d105a..eb744668d2 100644
--- a/docs/5.2/customize/optimize/index.html
+++ b/docs/5.2/customize/optimize/index.html
@@ -18,7 +18,7 @@
 
 
 
-
+
 
 
 
@@ -31,23 +31,21 @@
 
 
 
-
-
+
 
 
 
 
-
+
 
-
 
 
 
 
-
 
 
 
+
 
 
 
@@ -145,6 +143,7 @@
 
     

   

 
 
-
+    
   

     

-
+      
 
       

-
+        
 
         
Lean Sass imports 

 
When using Sass in your asset pipeline, make sure you optimize Bootstrap by only @importing the components you need. Your largest optimizations will likely come from the Layout & Components section of our bootstrap.scss.

@@ -627,7 +627,7 @@
         
       

       

@@ -676,7 +676,7 @@
   

 
 
-    
+    
 
 
 
@@ -685,12 +685,12 @@
 
 
 
 
 
-
+    
   

 
   
diff --git a/docs/5.2/customize/options/index.html b/docs/5.2/customize/options/index.html
index e690694170..f6f487d578 100644
--- a/docs/5.2/customize/options/index.html
+++ b/docs/5.2/customize/options/index.html
@@ -18,7 +18,7 @@
 
 
 
-
+
 
 
 
@@ -31,23 +31,21 @@
 
 
 
-
-
+
 
 
 
 
-
+
 
-
 
 
 
 
-
 
 
 
+
 
 
 
@@ -145,6 +143,7 @@
 
     

   

 
 
-
+    
   

     

+          

+            
+            
+          

           

             
             
@@ -568,7 +577,7 @@
           
         

         

-          
             
             
             
@@ -1862,7 +1871,7 @@
 

 
 
-    
+    
 
       
   
diff --git a/docs/5.2/examples/cheatsheet/index.html b/docs/5.2/examples/cheatsheet/index.html
index 0fd90d003a..fb7a4b2317 100644
--- a/docs/5.2/examples/cheatsheet/index.html
+++ b/docs/5.2/examples/cheatsheet/index.html
@@ -14,7 +14,7 @@
 
     
 
-
+
 
     
 
@@ -465,6 +465,15 @@
             
             
           

+          

+            
+            
+          

           

             
             
@@ -568,7 +577,7 @@
           
         

         

-          
             
             
             
@@ -1847,7 +1856,7 @@
 

 
 
-    
+    
 
       
   
diff --git a/docs/5.2/examples/checkout-rtl/index.html b/docs/5.2/examples/checkout-rtl/index.html
index d1e88ed5bf..5f8a329f07 100644
--- a/docs/5.2/examples/checkout-rtl/index.html
+++ b/docs/5.2/examples/checkout-rtl/index.html
@@ -14,7 +14,7 @@
 
     
 
-
+
 
     
 
@@ -308,7 +308,7 @@
 

 
 
-    
+    
 
       
   
diff --git a/docs/5.2/examples/checkout/index.html b/docs/5.2/examples/checkout/index.html
index c10213dd93..7f06c08e8b 100644
--- a/docs/5.2/examples/checkout/index.html
+++ b/docs/5.2/examples/checkout/index.html
@@ -14,7 +14,7 @@
 
     
 
-
+
 
     
 
@@ -309,7 +309,7 @@
- + diff --git a/docs/5.2/examples/cover/index.html b/docs/5.2/examples/cover/index.html index bd398086be..c1f660234f 100644 --- a/docs/5.2/examples/cover/index.html +++ b/docs/5.2/examples/cover/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/5.2/examples/dashboard-rtl/index.html b/docs/5.2/examples/dashboard-rtl/index.html index 2e5b63c02a..e0d3f7b35c 100644 --- a/docs/5.2/examples/dashboard-rtl/index.html +++ b/docs/5.2/examples/dashboard-rtl/index.html @@ -14,7 +14,7 @@ - + @@ -326,7 +326,7 @@
- + diff --git a/docs/5.2/examples/dashboard/index.html b/docs/5.2/examples/dashboard/index.html index 8255120880..4e610529d9 100644 --- a/docs/5.2/examples/dashboard/index.html +++ b/docs/5.2/examples/dashboard/index.html @@ -14,7 +14,7 @@ - + @@ -326,7 +326,7 @@
- + diff --git a/docs/5.2/examples/dropdowns/index.html b/docs/5.2/examples/dropdowns/index.html index 769de86d6b..e9f7ae0044 100644 --- a/docs/5.2/examples/dropdowns/index.html +++ b/docs/5.2/examples/dropdowns/index.html @@ -14,7 +14,7 @@ - + @@ -417,7 +417,7 @@ - + diff --git a/docs/5.2/examples/features/features.css b/docs/5.2/examples/features/features.css index 619222364d..b5d658f6b4 100644 --- a/docs/5.2/examples/features/features.css +++ b/docs/5.2/examples/features/features.css @@ -29,3 +29,8 @@ background-position: center center; background-size: cover; } + +.feature-icon-small { + width: 3rem; + height: 3rem; +} diff --git a/docs/5.2/examples/features/index.html b/docs/5.2/examples/features/index.html index 948108c40d..7c84f9838f 100644 --- a/docs/5.2/examples/features/index.html +++ b/docs/5.2/examples/features/index.html @@ -14,7 +14,7 @@ - + @@ -153,7 +153,7 @@
-

Featured title

+

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

 Call to action @@ -164,7 +164,7 @@
-

Featured title

+

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

 Call to action @@ -175,7 +175,7 @@
-

Featured title

+

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

 Call to action @@ -195,7 +195,7 @@
-

Featured title

+

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

 Primary button @@ -238,7 +238,7 @@
-

Short title, long jacket

+

Short title, long jacket
@@ -514,7 +515,7 @@
@@ -563,7 +564,7 @@
- + @@ -572,12 +573,12 @@ - +
diff --git a/docs/5.2/getting-started/browsers-devices/index.html b/docs/5.2/getting-started/browsers-devices/index.html index f3b3b0faf6..505054dcd1 100644 --- a/docs/5.2/getting-started/browsers-devices/index.html +++ b/docs/5.2/getting-started/browsers-devices/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Supported browsers

Bootstrap supports the latest, stable releases of all major browsers and platforms.

Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.

-

You can find our supported range of browsers and their versions in our .browserslistrc file:

+

You can find our supported range of browsers and their versions in our .browserslistrc file:

# https://github.com/browserslist/browserslist#readme
 
 >= 0.5%
@@ -553,7 +553,7 @@ not Explorer <= 11
 v6.0+
 
 
-Windows
+iOS
 Supported
 Supported
 Supported
@@ -629,7 +629,7 @@ not Explorer <= 11
@@ -678,7 +678,7 @@ not Explorer <= 11
- + @@ -687,12 +687,12 @@ not Explorer <= 11 - +
diff --git a/docs/5.2/getting-started/contents/index.html b/docs/5.2/getting-started/contents/index.html index a0a0c1f472..49a182e3fe 100644 --- a/docs/5.2/getting-started/contents/index.html +++ b/docs/5.2/getting-started/contents/index.html @@ -3,7 +3,7 @@ - + @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - - + + - - + - + @@ -145,6 +143,7 @@
- +
- +
- +
+ - -

Precompiled Bootstrap

+

Compiled Bootstrap

Once downloaded, unzip the compressed folder and you’ll see something like this:

bootstrap/
@@ -554,8 +557,8 @@
     ├── bootstrap.js.map
     ├── bootstrap.min.js
     └── bootstrap.min.js.map
-

This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). Source maps (bootstrap.*.map) are available for use with certain browsers’ developer tools. Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper.

-

CSS files

+

This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). Source maps (bootstrap.*.map) are available for use with certain browsers’ developer tools. Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper.

+

CSS files

Bootstrap includes a handful of options for including some or all of our compiled CSS.

@@ -599,7 +602,7 @@
-

JS files

+

JS files

Similarly, we have options for including some or all of our compiled JavaScript.

@@ -621,7 +624,7 @@

Bootstrap source code

-

The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:

+

The Bootstrap source code download includes the compiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:

bootstrap/
 ├── dist/
 │   ├── css/
@@ -633,7 +636,8 @@
 │              └── examples/
 ├── js/
 └── scss/
-

The scss/ and js/ are the source code for our CSS and JavaScript. The dist/ folder includes everything listed in the precompiled download section above. The site/docs/ folder includes the source code for our documentation, and examples/ of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.

+

The scss/ and js/ are the source code for our CSS and JavaScript. The dist/ folder includes everything listed in the compiled download section above. The site/content/docs/ folder includes the source code for our hosted documentation, including our live examples of Bootstrap usage.

+

Beyond that, any other included file provides support for packages, license information, and development.

@@ -651,7 +655,7 @@
@@ -700,7 +704,7 @@
- + @@ -709,12 +713,12 @@ - +
diff --git a/docs/5.2/getting-started/contribute/index.html b/docs/5.2/getting-started/contribute/index.html index 8425e26f57..b81d70cb81 100644 --- a/docs/5.2/getting-started/contribute/index.html +++ b/docs/5.2/getting-started/contribute/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Tooling setup

-

Bootstrap uses npm scripts to build the documentation and compile source files. Our package.json houses these scripts for compiling code, running tests, and more. These aren’t intended for use outside our repository and documentation.

+

Bootstrap uses npm scripts to build the documentation and compile source files. Our package.json houses these scripts for compiling code, running tests, and more. These aren’t intended for use outside our repository and documentation.

To use our build system and run our documentation locally, you’ll need a copy of Bootstrap’s source files and Node. Follow these steps and you should be ready to rock:

  1. Download and install Node.js, which we use to manage our dependencies.
    2. -
  2. Either download Bootstrap’s sources or fork Bootstrap’s repository.
    3. -
  3. Navigate to the root /bootstrap directory and run npm install to install our local dependencies listed in package.json.
    4. +
  4. Either download Bootstrap’s sources or fork Bootstrap’s repository.
    5. +
  5. Navigate to the root /bootstrap directory and run npm install to install our local dependencies listed in package.json.

When completed, you’ll be able to run the various commands provided from the command line.

Using npm scripts

-

Our package.json includes numerous tasks for developing the project. Run npm run to see all the npm scripts in your terminal. Primary tasks include:

+

Our package.json includes numerous tasks for developing the project. Run npm run to see all the npm scripts in your terminal. Primary tasks include:

@@ -554,7 +554,7 @@

Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don’t lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding.

Autoprefixer

Bootstrap uses Autoprefixer (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.

-

We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See .browserslistrc for details.

+

We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See .browserslistrc for details.

RTLCSS

Bootstrap uses RTLCSS to process compiled CSS and convert them to RTL – basically replacing horizontal direction aware properties (e.g. padding-left) with their opposite. It allows us only write our CSS a single time and make minor tweaks using RTLCSS control and value directives.

Local documentation

@@ -584,7 +584,7 @@
@@ -633,7 +633,7 @@
- + @@ -642,12 +642,12 @@ - +
diff --git a/docs/5.2/getting-started/download/index.html b/docs/5.2/getting-started/download/index.html index 20f955f030..deeae8b02c 100644 --- a/docs/5.2/getting-started/download/index.html +++ b/docs/5.2/getting-started/download/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
- +
- +
- +

Compiled CSS and JS

-

Download ready-to-use compiled code for Bootstrap v5.2.0 to easily drop into your project, which includes:

+

Download ready-to-use compiled code for Bootstrap v5.2.1 to easily drop into your project, which includes:

This doesn’t include documentation, source files, or any optional JavaScript dependencies like Popper.

-

Download

+

Download

Source files

Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:

    @@ -528,28 +528,28 @@
  • Autoprefixer for CSS vendor prefixing

Should you require our full set of build tools, they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.

-

Download source

+

Download source

Examples

If you want to download and examine our examples, you can grab the already built examples:

-

Download Examples

+

Download Examples

CDN via jsDelivr

Skip the download with jsDelivr to deliver cached version of Bootstrap’s compiled CSS and JS to your project.

-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
 
If you’re using our compiled JavaScript and prefer to include Popper separately, add Popper before our JS, via a CDN preferably.

-
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
 
Package managers 

 
Pull in Bootstrap’s source files into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will require a Sass compiler and Autoprefixer for a setup that matches our official compiled versions.

 
npm 

 
Install Bootstrap in your Node.js powered apps with the npm package:

-
npm install bootstrap@5.2.0
+
npm install bootstrap@5.2.1
 
const bootstrap = require('bootstrap') or import bootstrap from 'bootstrap' will load all of Bootstrap’s plugins onto a bootstrap object.
 The bootstrap module itself exports all of our plugins. You can manually load Bootstrap’s plugins individually by loading the /js/dist/*.js files under the package’s top-level directory.

 
Bootstrap’s package.json contains some additional metadata under the following keys:

 
    
 
  • sass - path to Bootstrap’s main Sass source file
    • 
-
  • style - path to Bootstrap’s non-minified CSS that’s been precompiled using the default settings (no customization)
    • 
+
  • style - path to Bootstrap’s non-minified CSS that’s been compiled using the default settings (no customization)
    • 
 

 

 Get started with Bootstrap via npm with our starter project! Head to the twbs/bootstrap-npm-starter template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons.
@@ -557,16 +557,16 @@ The bootstrap module itself exports all of our plugins. You can man
 
 
yarn 

 
Install Bootstrap in your Node.js powered apps with the yarn package:

-
yarn add bootstrap@5.2.0
+
yarn add bootstrap@5.2.1
 
RubyGems 

 
Install Bootstrap in your Ruby apps using Bundler (recommended) and RubyGems by adding the following line to your Gemfile:

-
gem 'bootstrap', '~> 5.2.0'
+
gem 'bootstrap', '~> 5.2.1'
 
Alternatively, if you’re not using Bundler, you can install the gem by running this command:

-
gem install bootstrap -v 5.2.0
+
gem install bootstrap -v 5.2.1
 
See the gem’s README for further details.

 
Composer 

 
You can also install and manage Bootstrap’s Sass and JavaScript using Composer:

-
composer require twbs/bootstrap:5.2.0
+
composer require twbs/bootstrap:5.2.1
 
NuGet 

 
If you develop in .NET Framework, you can also install and manage Bootstrap’s CSS or Sass and JavaScript using NuGet. Newer projects should use libman or another method as NuGet is designed for compiled code, not frontend assets.

 
Install-Package bootstrap
@@ -588,7 +588,7 @@ The bootstrap module itself exports all of our plugins. You can man
         
       

       

@@ -637,7 +637,7 @@ The bootstrap module itself exports all of our plugins. You can man
   

 
 
-    
+    
 
 
 
@@ -646,12 +646,12 @@ The bootstrap module itself exports all of our plugins. You can man
 
 
 
 
 
-
+    
   

 
   
diff --git a/docs/5.2/getting-started/introduction/index.html b/docs/5.2/getting-started/introduction/index.html
index 74fcf80f7f..c33055cd7d 100644
--- a/docs/5.2/getting-started/introduction/index.html
+++ b/docs/5.2/getting-started/introduction/index.html
@@ -18,7 +18,7 @@
 
 
 
-
+
 
 
 
@@ -31,23 +31,21 @@
 
 
 
-
-
+
 
 
 
 
-
+
 
-
 
 
 
 
-
 
 
 
+
 
 
 
@@ -145,6 +143,7 @@
 
     

   

 
 
-
+    
   

     

-
+      
 
       

-
+        
 
         
Quick start 

 
Get started by including Bootstrap’s production-ready CSS and JavaScript via CDN without the need for any build steps. See it in practice with this Bootstrap CodePen demo.

@@ -539,16 +539,16 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Bootstrap demo</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
   </head>
   <body>
     <h1>Hello, world!</h1>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
   </body>
 </html>
 
You can also include Popper and our JS separately. If you don’t plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.

-
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
 

 
  • 
 
    Hello, world! Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own layout, adding dozens of components, and utilizing our official examples.
    
@@ -566,11 +566,11 @@
    • - + - +
    CSShttps://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css
    JShttps://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.jshttps://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js
    @@ -582,7 +582,7 @@

    Read a bit more about some important global environment settings that Bootstrap utilizes.

  • -

    Read about what’s included in Bootstrap in our contents section and the list of components that require JavaScript below.

    +

    Read about what’s included in Bootstrap in our contents section and the list of components that require JavaScript below.

  • Need a little more power? Consider building with Bootstrap by including the source files via package manager.

    @@ -634,9 +634,10 @@

    Reboot

    For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

    Community

    -

    Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

    +

    Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.

    • Read and subscribe to The Official Bootstrap Blog.
      • +
    • Ask and explore our GitHub Discussions.
    • Chat with fellow Bootstrappers in IRC. On the irc.libera.chat server, in the #bootstrap channel.
    • Implementation help may be found at Stack Overflow (tagged bootstrap-5).
    • Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.
      • @@ -659,7 +660,7 @@
    • @@ -708,7 +709,7 @@
    - + @@ -717,12 +718,12 @@ - +
    diff --git a/docs/5.2/getting-started/javascript/index.html b/docs/5.2/getting-started/javascript/index.html index 0e962945da..d038574265 100644 --- a/docs/5.2/getting-started/javascript/index.html +++ b/docs/5.2/getting-started/javascript/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
    - +
    - +
    - +

    Individual or compiled

    Plugins can be included individually (using Bootstrap’s individual js/dist/*.js), or all at once using bootstrap.js or the minified bootstrap.min.js (don’t include both).

    @@ -561,7 +561,7 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> <title>Hello, modularity!</title> </head> <body> @@ -572,8 +572,8 @@ <script type="importmap"> { "imports": { - "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js", - "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.esm.min.js" + "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js", + "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.esm.min.js" } } </script> @@ -791,7 +791,7 @@
    @@ -840,7 +840,7 @@
    - + @@ -849,12 +849,12 @@ - +
    diff --git a/docs/5.2/getting-started/parcel/index.html b/docs/5.2/getting-started/parcel/index.html index 1bab43cd7b..5ddf28c295 100644 --- a/docs/5.2/getting-started/parcel/index.html +++ b/docs/5.2/getting-started/parcel/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
    - +
    - +
    - +
    @@ -631,7 +631,7 @@
    @@ -680,7 +680,7 @@
    - + @@ -689,12 +689,12 @@ - +
    diff --git a/docs/5.2/getting-started/rfs/index.html b/docs/5.2/getting-started/rfs/index.html index 18629e7a30..70ad199edb 100644 --- a/docs/5.2/getting-started/rfs/index.html +++ b/docs/5.2/getting-started/rfs/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
    - +
    - +
    - +

    What is RFS?

    Bootstrap’s side project RFS is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like margin, padding, border-radius, or even box-shadow.

    @@ -573,7 +573,7 @@
    @@ -622,7 +622,7 @@
    - + @@ -631,12 +631,12 @@ - +
    diff --git a/docs/5.2/getting-started/rtl/index.html b/docs/5.2/getting-started/rtl/index.html index e141a6ddfb..fb07842082 100644 --- a/docs/5.2/getting-started/rtl/index.html +++ b/docs/5.2/getting-started/rtl/index.html @@ -18,7 +18,7 @@ - + @@ -31,23 +31,21 @@ - - + - + - - + @@ -145,6 +143,7 @@
    - +
    - +
    - +

    Get familiar

    We recommend getting familiar with Bootstrap first by reading through our Getting Started Introduction page. Once you’ve run through it, continue reading here for how to enable RTL.

    You may also want to read up on the RTLCSS project, as it powers our approach to RTL.

    Experimental feature

    -

    The RTL feature is still experimental and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? Open an issue, we’d love to get your insights. +

    The RTL feature is still experimental and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? Open an issue, we’d love to get your insights.

    Required HTML

    @@ -532,7 +532,7 @@
  • Add an appropriate lang attribute, like lang="ar", on the <html> element.

    • From there, you’ll need to include an RTL version of our CSS. For example, here’s the stylesheet for our compiled and minified CSS with RTL enabled:

    -
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.rtl.min.css" integrity="sha384-+4j30LffJ4tgIMrq9CwHvn0NjEvmuDCOfk6Rpg2xg7zgOxWWtLtozDEEVvBPgHqE" crossorigin="anonymous">
+
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.rtl.min.css" integrity="sha384-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" crossorigin="anonymous">
 
    Starter template 
    
 
    You can see the above requirements reflected in this modified RTL starter template.
    
 
    <!doctype html>
@@ -543,7 +543,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.rtl.min.css" integrity="sha384-+4j30LffJ4tgIMrq9CwHvn0NjEvmuDCOfk6Rpg2xg7zgOxWWtLtozDEEVvBPgHqE" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.rtl.min.css" integrity="sha384-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" crossorigin="anonymous">
 
     <title>مرحبًا بالعالم!</title>
   </head>
@@ -553,12 +553,12 @@
     <!-- Optional JavaScript; choose one of the two! -->
 
     <!-- Option 1: Bootstrap Bundle with Popper -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
 
     <!-- Option 2: Separate Popper and Bootstrap JS -->
     <!--
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
     -->
   </body>
 </html>
@@ -669,7 +669,7 @@
         
       
    
       
    
@@ -718,7 +718,7 @@
   
    
 
 
-    
+    
 
 
 
@@ -727,12 +727,12 @@
 
 
 
 
 
-
+    
   
    
 
   
diff --git a/docs/5.2/getting-started/vite/index.html b/docs/5.2/getting-started/vite/index.html
index 53f1d5ed97..6ea5552999 100644
--- a/docs/5.2/getting-started/vite/index.html
+++ b/docs/5.2/getting-started/vite/index.html
@@ -18,7 +18,7 @@
 
 
 
-
+
 
 
 
@@ -31,23 +31,21 @@
 
 
 
-
-
+
 
 
 
 
-
+
 
-
 
 
 
 
-
 
 
 
+
 
 
 
@@ -145,6 +143,7 @@
 
     
    
   
    
 
 
-
+    
   
    
     
    
-
+      
 
       
    
-
+        
 
         
 
    
@@ -667,7 +667,7 @@
         
       
    
       
    
@@ -716,7 +716,7 @@
   
    
 
 
-    
+    
 
 
 
@@ -725,12 +725,12 @@
 
 
 
 
 
-
+    
   
    
 
   
diff --git a/docs/5.2/getting-started/webpack/index.html b/docs/5.2/getting-started/webpack/index.html
index 1d39b61fcb..42f8833548 100644
--- a/docs/5.2/getting-started/webpack/index.html
+++ b/docs/5.2/getting-started/webpack/index.html
@@ -18,7 +18,7 @@
 
 
 
-
+
 
 
 
@@ -31,23 +31,21 @@
 
 
 
-
-
+
 
 
 
 
-
+
 
-
 
 
 
 
-
 
 
 
+
 
 
 
@@ -145,6 +143,7 @@
 
     
    
   
    
 
 
-
+    
   
    
     
    
-
+      
 
       
    
-
+        
 
         
 
    
@@ -682,6 +688,69 @@
 
    Now you can start adding any Bootstrap components you want to use. Be sure to check out the complete Webpack example project for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap’s CSS and JS that you need.
    
 
 
+
    Production optimizations 
    
+
    Depending on your setup, you may want to implement some additional security and speed optimizations useful for running the project in production. Note that these optimizations are not applied on the Webpack example project and are up to you to implement.
    
+
    Extracting CSS 
    
+
    The style-loader we configured above conveniently emits CSS into the bundle so that manually loading a CSS file in dist/index.html isn’t necessary. This approach may not work with a strict Content Security Policy, however, and it may become a bottleneck in your application due to the large bundle size.
    
+
    To separate the CSS so that we can load it directly from dist/index.html, use the mini-css-extract-loader Webpack plugin.
    
+
    First, install the plugin:
    
+
    npm install --save-dev mini-css-extract-plugin
+
    Then instantiate and use the plugin in the Webpack configuration:
    
+
    --- a/webpack/webpack.config.js
++++ b/webpack/webpack.config.js
+@@ -1,8 +1,10 @@
++const miniCssExtractPlugin = require('mini-css-extract-plugin')
+ const path = require('path')
+ 
+ module.exports = {
+   mode: 'development',
+   entry: './src/js/main.js',
++  plugins: [new miniCssExtractPlugin()],
+   output: {
+     filename: "main.js",
+     path: path.resolve(__dirname, "dist"),
+@@ -18,8 +20,8 @@ module.exports = {
+         test: /\.(scss)$/,
+         use: [
+           {
+-            // Adds CSS to the DOM by injecting a `<style>` tag
+-            loader: 'style-loader'
++            // Extracts CSS for each JS file that includes CSS
++            loader: miniCssExtractPlugin.loader
+           },
+           {
+
    After running npm run build again, there will be a new file dist/main.css, which will contain all of the CSS imported by src/js/main.js. If you view dist/index.html in your browser now, the style will be missing, as it is now in dist/main.css. You can include the generated CSS in dist/index.html like this:
    
+
    --- a/webpack/dist/index.html
++++ b/webpack/dist/index.html
+@@ -3,6 +3,7 @@
+   <head>
+     <meta charset="utf-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1">
++    <link rel="stylesheet" href="./main.css">
+     <title>Bootstrap w/ Webpack</title>
+   </head>
+   <body>
+
    Extracting SVG files 
    
+
    Bootstrap’s CSS includes multiple references to SVG files via inline data: URIs. If you define a Content Security Policy for your project that blocks data: URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack’s asset modules feature.
    
+
    Configure Webpack to extract inline SVG files like this:
    
+
    --- a/webpack/webpack.config.js
++++ b/webpack/webpack.config.js
+@@ -16,6 +16,14 @@ module.exports = {
+   },
+   module: {
+     rules: [
++      {
++        mimetype: 'image/svg+xml',
++        scheme: 'data',
++        type: 'asset/resource',
++        generator: {
++          filename: 'icons/[hash].svg'
++        }
++      },
+       {
+         test: /\.(scss)$/,
+         use: [
+
    After running npm run build again, you’ll find the SVG files extracted into dist/icons and properly referenced from CSS.
    
 
    
 
    See something wrong or out of date here? Please open an issue on GitHub. Need help troubleshooting? Search or start a discussion on GitHub.
 
@@ -701,7 +770,7 @@
         
    
       
    
       
    
@@ -750,7 +819,7 @@
   
    
 
 
-    
+    
 
 
 
@@ -759,12 +828,12 @@
 
 
 
 
 
-
+    
   
    
 
   
diff --git a/docs/5.2/helpers/clearfix/index.html b/docs/5.2/helpers/clearfix/index.html
index 5e8366ed30..c5925dc613 100644
--- a/docs/5.2/helpers/clearfix/index.html
+++ b/docs/5.2/helpers/clearfix/index.html
@@ -18,7 +18,7 @@
 
 
 
-
+
 
 
 
@@ -31,23 +31,21 @@
 
 
 
-
-
+
 
 
 
 
-
+
 
-
 
 
 
 
-
 
 
 
+
 
 
 
@@ -145,6 +143,7 @@
 
     
    
   
    
 
 
-
+