| Browser(s) | -Summary of bug | -Upstream bug(s) | -Bootstrap issue(s) | -
|---|---|---|---|
| {{ bug.browser }} | -{{ bug.summary | markdownify | bugify }} | -{{ bug.upstream_bug | bugify }} | -{{ bug.origin | bugify }} | -
| Browser(s) | +Summary of bug | +Upstream bug(s) | +Bootstrap issue(s) | +
|---|---|---|---|
| {{ bug.browser }} | +{{ bug.summary | markdownify | bugify }} | +{{ bug.upstream_bug | bugify }} | +{{ bug.origin | bugify }} | +
| Browser(s) | -Summary of feature | -Upstream issue(s) | -Bootstrap issue(s) | -
|---|---|---|---|
| {{ feat.browser }} | -{{ feat.summary | markdownify | bugify }} | -{{ feat.upstream_bug | bugify }} | -{{ feat.origin | bugify }} | -
| Browser(s) | +Summary of feature | +Upstream issue(s) | +Bootstrap issue(s) | +
|---|---|---|---|
| {{ feat.browser }} | +{{ feat.summary | markdownify | bugify }} | +{{ feat.upstream_bug | bugify }} | +{{ feat.origin | bugify }} | +
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| interval | -number | -5000 | -The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. | -
| keyboard | -boolean | -true | -Whether the carousel should react to keyboard events. | -
| pause | -string | null | -"hover" | -If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to null, hovering over the carousel won't pause it. |
-
| ride | -string | -false | -Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load. | -
| wrap | -boolean | -true | -Whether the carousel should cycle continuously or have hard stops. | -
| Name | +Type | +Default | +Description | +
|---|---|---|---|
| interval | +number | +5000 | +The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. | +
| keyboard | +boolean | +true | +Whether the carousel should react to keyboard events. | +
| pause | +string | null | +"hover" | +If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to null, hovering over the carousel won't pause it. |
+
| ride | +string | +false | +Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load. | +
| wrap | +boolean | +true | +Whether the carousel should cycle continuously or have hard stops. | +
| Event Type | -Description | -
|---|---|
| slide.bs.carousel | -This event fires immediately when the slide instance method is invoked. |
-
| slid.bs.carousel | -This event is fired when the carousel has completed its slide transition. | -
| Event Type | +Description | +
|---|---|
| slide.bs.carousel | +This event fires immediately when the slide instance method is invoked. |
+
| slid.bs.carousel | +This event is fired when the carousel has completed its slide transition. | +
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| parent | -selector | -false | -If a selector 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 panel class) |
-
| toggle | -boolean | -true | -Toggles the collapsible element on invocation | -
| Name | +Type | +Default | +Description | +
|---|---|---|---|
| parent | +selector | +false | +If a selector 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 panel class) |
+
| toggle | +boolean | +true | +Toggles the collapsible element on invocation | +
| Event Type | -Description | -
|---|---|
| show.bs.collapse | -This event fires immediately when the show instance method is called. |
-
| shown.bs.collapse | -This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). | -
| hide.bs.collapse | -
- This event is fired immediately when the hide method has been called.
- |
-
| hidden.bs.collapse | -This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). | -
| Event Type | +Description | +
|---|---|
| show.bs.collapse | +This event fires immediately when the show instance method is called. |
+
| shown.bs.collapse | +This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). | +
| hide.bs.collapse | +
+ This event is fired immediately when the hide method has been called.
+ |
+
| hidden.bs.collapse | +This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). | +
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| backdrop | -boolean or the string 'static' |
- true | -Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
-
| keyboard | -boolean | -true | -Closes the modal when escape key is pressed | -
| focus | -boolean | -true | -Puts the focus on the modal when initialized. | -
| show | -boolean | -true | -Shows the modal when initialized. | -
| Name | +Type | +Default | +Description | +
|---|---|---|---|
| backdrop | +boolean or the string 'static' |
+ true | +Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
+
| keyboard | +boolean | +true | +Closes the modal when escape key is pressed | +
| focus | +boolean | +true | +Puts the focus on the modal when initialized. | +
| show | +boolean | +true | +Shows the modal when initialized. | +
| Event Type | -Description | -
|---|---|
| show.bs.modal | -This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
-
| shown.bs.modal | -This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
-
| hide.bs.modal | -This event is fired immediately when the hide instance method has been called. |
-
| hidden.bs.modal | -This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). | -
| Event Type | +Description | +
|---|---|
| show.bs.modal | +This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
+
| shown.bs.modal | +This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
+
| hide.bs.modal | +This event is fired immediately when the hide instance method has been called. |
+
| hidden.bs.modal | +This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). | +
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| animation | -boolean | -true | -Apply a CSS fade transition to the popover | -
| container | -string | false | -false | -
- Appends the popover to a specific element. Example: |
-
| content | -string | element | function | -'' | -
- Default content value if If a function is given, it will be called with its |
-
| delay | -number | object | -0 | -
- Delay showing and hiding the popover (ms) - does not apply to manual trigger type -If a number is supplied, delay is applied to both hide/show -Object structure is: |
-
| html | -boolean | -false | -Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
-
| placement | -string | function | -'right' | -
- How to position the popover - top | bottom | left | right. -When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The |
-
| selector | -string | -false | -If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. | -
| template | -string | -'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
-
- Base HTML to use when creating the popover. -The popover's The popover's
The outermost wrapper element should have the |
-
| title | -string | element | function | -'' | -
- Default title value if If a function is given, it will be called with its |
-
| trigger | -string | -'click' | -How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger. | -
| constraints | -Array | -'hover focus' | -An array of constraints - passed through to Tether. For more information refer to Tether's constraint docs. | -
| offset | -string | -'0 0' | -Offset of the popover relative to its target. For more information refer to Tether's offset docs. | -
| Name | +Type | +Default | +Description | +
|---|---|---|---|
| animation | +boolean | +true | +Apply a CSS fade transition to the popover | +
| container | +string | false | +false | +
+ Appends the popover to a specific element. Example: |
+
| content | +string | element | function | +'' | +
+ Default content value if If a function is given, it will be called with its |
+
| delay | +number | object | +0 | +
+ Delay showing and hiding the popover (ms) - does not apply to manual trigger type +If a number is supplied, delay is applied to both hide/show +Object structure is: |
+
| html | +boolean | +false | +Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
+
| placement | +string | function | +'right' | +
+ How to position the popover - top | bottom | left | right. +When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The |
+
| selector | +string | +false | +If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. | +
| template | +string | +'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
+
+ Base HTML to use when creating the popover. +The popover's The popover's
The outermost wrapper element should have the |
+
| title | +string | element | function | +'' | +
+ Default title value if If a function is given, it will be called with its |
+
| trigger | +string | +'click' | +How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger. | +
| constraints | +Array | +'hover focus' | +An array of constraints - passed through to Tether. For more information refer to Tether's constraint docs. | +
| offset | +string | +'0 0' | +Offset of the popover relative to its target. For more information refer to Tether's offset docs. | +
| Event Type | -Description | -
|---|---|
| show.bs.popover | -This event fires immediately when the show instance method is called. |
-
| shown.bs.popover | -This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). | -
| hide.bs.popover | -This event is fired immediately when the hide instance method has been called. |
-
| hidden.bs.popover | -This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). | -
| Event Type | +Description | +
|---|---|
| show.bs.popover | +This event fires immediately when the show instance method is called. |
+
| shown.bs.popover | +This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). | +
| hide.bs.popover | +This event is fired immediately when the hide instance method has been called. |
+
| hidden.bs.popover | +This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). | +
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| offset | -number | -10 | -Pixels to offset from top when calculating position of scroll. | -
| Name | +Type | +Default | +Description | +
|---|---|---|---|
| offset | +number | +10 | +Pixels to offset from top when calculating position of scroll. | +
| Event Type | -Description | -
|---|---|
| activate.bs.scrollspy | -This event fires whenever a new item becomes activated by the scrollspy. | -
| Event Type | +Description | +
|---|---|
| activate.bs.scrollspy | +This event fires whenever a new item becomes activated by the scrollspy. | +
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| animation | -boolean | -true | -Apply a CSS fade transition to the tooltip | -
| container | -string | element | false | -false | -
- Appends the tooltip to a specific element. Example: |
-
| delay | -number | object | -0 | -
- Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type -If a number is supplied, delay is applied to both hide/show -Object structure is: |
-
| html | -boolean | -false | -
- Allow HTML in the tooltip. -If true, HTML tags in the tooltip's Use text if you're worried about XSS attacks. - |
-
| placement | -string | function | -'top' | -
- How to position the tooltip - top | bottom | left | right. -When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The |
-
| selector | -string | -false | -If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. | -
| template | -string | -'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
-
- Base HTML to use when creating the tooltip. -The tooltip's
The outermost wrapper element should have the |
-
| title | -string | element | function | -'' | -
- Default title value if If a function is given, it will be called with its |
-
| trigger | -string | -'hover focus' | -How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger. | -
| constraints | -Array | -[] | -An array of constraints - passed through to Tether. For more information refer to Tether's constraint docs. | -
| offset | -string | -'0 0' | -Offset of the popover relative to its target. For more information refer to Tether's offset docs. | -
| Name | +Type | +Default | +Description | +
|---|---|---|---|
| animation | +boolean | +true | +Apply a CSS fade transition to the tooltip | +
| container | +string | element | false | +false | +
+ Appends the tooltip to a specific element. Example: |
+
| delay | +number | object | +0 | +
+ Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type +If a number is supplied, delay is applied to both hide/show +Object structure is: |
+
| html | +boolean | +false | +
+ Allow HTML in the tooltip. +If true, HTML tags in the tooltip's Use text if you're worried about XSS attacks. + |
+
| placement | +string | function | +'top' | +
+ How to position the tooltip - top | bottom | left | right. +When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The |
+
| selector | +string | +false | +If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. | +
| template | +string | +'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
+
+ Base HTML to use when creating the tooltip. +The tooltip's
The outermost wrapper element should have the |
+
| title | +string | element | function | +'' | +
+ Default title value if If a function is given, it will be called with its |
+
| trigger | +string | +'hover focus' | +How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger. | +
| constraints | +Array | +[] | +An array of constraints - passed through to Tether. For more information refer to Tether's constraint docs. | +
| offset | +string | +'0 0' | +Offset of the popover relative to its target. For more information refer to Tether's offset docs. | +
| Event Type | -Description | -
|---|---|
| show.bs.tooltip | -This event fires immediately when the show instance method is called. |
-
| shown.bs.tooltip | -This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). | -
| hide.bs.tooltip | -This event is fired immediately when the hide instance method has been called. |
-
| hidden.bs.tooltip | -This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). | -
| Event Type | +Description | +
|---|---|
| show.bs.tooltip | +This event fires immediately when the show instance method is called. |
+
| shown.bs.tooltip | +This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). | +
| hide.bs.tooltip | +This event is fired immediately when the hide instance method has been called. |
+
| hidden.bs.tooltip | +This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). | +
| - | Chrome | -Firefox | -Safari | -Android Browser & WebView | -Microsoft Edge | -
|---|---|---|---|---|---|
| Android | -Supported | -Supported | -N/A | -Android v5.0+ supported | -N/A | -
| iOS | -Supported | -Supported | -Supported | -N/A | -N/A | -
| Windows 10 Mobile | -N/A | -N/A | -N/A | -N/A | -Supported | -
| + | Chrome | +Firefox | +Safari | +Android Browser & WebView | +Microsoft Edge | +
|---|---|---|---|---|---|
| Android | +Supported | +Supported | +N/A | +Android v5.0+ supported | +N/A | +
| iOS | +Supported | +Supported | +Supported | +N/A | +N/A | +
| Windows 10 Mobile | +N/A | +N/A | +N/A | +N/A | +Supported | +
| - | Chrome | -Firefox | -Internet Explorer | -Microsoft Edge | -Opera | -Safari | -
|---|---|---|---|---|---|---|
| Mac | -Supported | -Supported | -N/A | -N/A | -Supported | -Supported | -
| Windows | -Supported | -Supported | -Supported, IE10+ | -Supported | -Supported | -Not supported | -
| + | Chrome | +Firefox | +Internet Explorer | +Microsoft Edge | +Opera | +Safari | +
|---|---|---|---|---|---|---|
| Mac | +Supported | +Supported | +N/A | +N/A | +Supported | +Supported | +
| Windows | +Supported | +Supported | +Supported, IE10+ | +Supported | +Supported | +Not supported | +
| - |
- Extra small - <576px - |
-
- Small - ≥576px - |
-
- Medium - ≥768px - |
-
- Large - ≥992px - |
-
- Extra large - ≥1200px - |
-
|---|---|---|---|---|---|
| Grid behavior | -Horizontal at all times | -Collapsed to start, horizontal above breakpoints | -|||
| Max container width | -None (auto) | -540px | -720px | -960px | -1140px | -
| Class prefix | -.col- |
- .col-sm- |
- .col-md- |
- .col-lg- |
- .col-xl- |
-
| # of columns | -12 | -||||
| Gutter width | -30px (15px on each side of a column) | -||||
| Nestable | -Yes | -||||
| Offsets | -Yes | -||||
| Column ordering | -Yes | -||||
| + |
+ Extra small + <576px + |
+
+ Small + ≥576px + |
+
+ Medium + ≥768px + |
+
+ Large + ≥992px + |
+
+ Extra large + ≥1200px + |
+
|---|---|---|---|---|---|
| Grid behavior | +Horizontal at all times | +Collapsed to start, horizontal above breakpoints | +|||
| Max container width | +None (auto) | +540px | +720px | +960px | +1140px | +
| Class prefix | +.col- |
+ .col-sm- |
+ .col-md- |
+ .col-lg- |
+ .col-xl- |
+
| # of columns | +12 | +||||
| Gutter width | +30px (15px on each side of a column) | +||||
| Nestable | +Yes | +||||
| Offsets | +Yes | +||||
| Column ordering | +Yes | +||||
| - | - Extra small devices - Portrait phones (<544px) - | -- Small devices - Landscape phones (≥544px - <768px) - | -- Medium devices - Tablets (≥768px - <992px) - | -- Large devices - Desktops (≥992px - <1200px) - | -- Extra large devices - Desktops (≥1200px) - | -
|---|---|---|---|---|---|
.hidden-xs-down |
- Hidden | -Visible | -Visible | -Visible | -Visible | -
.hidden-sm-down |
- Hidden | -Hidden | -Visible | -Visible | -Visible | -
.hidden-md-down |
- Hidden | -Hidden | -Hidden | -Visible | -Visible | -
.hidden-lg-down |
- Hidden | -Hidden | -Hidden | -Hidden | -Visible | -
.hidden-xl-down |
- Hidden | -Hidden | -Hidden | -Hidden | -Hidden | -
.hidden-xs-up |
- Hidden | -Hidden | -Hidden | -Hidden | -Hidden | -
.hidden-sm-up |
- Visible | -Hidden | -Hidden | -Hidden | -Hidden | -
.hidden-md-up |
- Visible | -Visible | -Hidden | -Hidden | -Hidden | -
.hidden-lg-up |
- Visible | -Visible | -Visible | -Hidden | -Hidden | -
.hidden-xl-up |
- Visible | -Visible | -Visible | -Visible | -Hidden | -
| + | + Extra small devices + Portrait phones (<544px) + | ++ Small devices + Landscape phones (≥544px - <768px) + | ++ Medium devices + Tablets (≥768px - <992px) + | ++ Large devices + Desktops (≥992px - <1200px) + | ++ Extra large devices + Desktops (≥1200px) + | +
|---|---|---|---|---|---|
.hidden-xs-down |
+ Hidden | +Visible | +Visible | +Visible | +Visible | +
.hidden-sm-down |
+ Hidden | +Hidden | +Visible | +Visible | +Visible | +
.hidden-md-down |
+ Hidden | +Hidden | +Hidden | +Visible | +Visible | +
.hidden-lg-down |
+ Hidden | +Hidden | +Hidden | +Hidden | +Visible | +
.hidden-xl-down |
+ Hidden | +Hidden | +Hidden | +Hidden | +Hidden | +
.hidden-xs-up |
+ Hidden | +Hidden | +Hidden | +Hidden | +Hidden | +
.hidden-sm-up |
+ Visible | +Hidden | +Hidden | +Hidden | +Hidden | +
.hidden-md-up |
+ Visible | +Visible | +Hidden | +Hidden | +Hidden | +
.hidden-lg-up |
+ Visible | +Visible | +Visible | +Hidden | +Hidden | +
.hidden-xl-up |
+ Visible | +Visible | +Visible | +Visible | +Hidden | +
Similar to the regular responsive classes, use these for toggling content for print.
-| Class | -Browser | -|
|---|---|---|
.visible-print-block |
- Hidden | -Visible (as display: block) |
-
.visible-print-inline |
- Hidden | -Visible (as display: inline) |
-
.visible-print-inline-block |
- Hidden | -Visible (as display: inline-block) |
-
.hidden-print |
- Visible | -Hidden | -
| Class | +Browser | +|
|---|---|---|
.visible-print-block |
+ Hidden | +Visible (as display: block) |
+
.visible-print-inline |
+ Hidden | +Visible (as display: inline) |
+
.visible-print-inline-block |
+ Hidden | +Visible (as display: inline-block) |
+
.hidden-print |
+ Visible | +Hidden | +