* Fix Sass compilation when `$color-mode-type` is set to `media-query`
* Update mixin names, fix docs color modes for using media queries by using mixin
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Instantiate/initialize all non-autoplaying carousels in docs pages
* Rewrite/reorganise carousel docs page
* start with static/non-autoplaying examples
* explicitly mention that carousels currently need to be manually initialized
* split out and explain autoplaying and the weird "autoplay after first interaction" behaviour, as well as the pause on hover/focus
* Add callout about autoplaying and accessibility
* Don't have the dark variant example autoplay
* Add "autoplaying" to cspell custom dictionary
* Tweal wording, move Page Visibility API to autoplay section
* Tweak explanation for methods, add line break in js code for consistency with last code block on the page
* Tweak method descriptions
* Tweak headings (plural "carousels")
* Move some paragraphs out of intro and into basic example, reword the nested and accessibility paragraph
* Tweak warning about `.active` slide
* Tweak callout wording
* Further prose tweaks
move the sentence about not double-initialising autoplaying carousels to the callout right at the top
instead of talking about `data-bs...` attributes, talk about the "option" instead, as authors may be setting these not via data attributes, but at instatiation time with options in the constructor
remove the incorrect statement about pausing when keyboard focus is in the carousel
* Instantiate/initialize all non-autoplaying carousels in docs pages
* Rewrite/reorganise carousel docs page
* start with static/non-autoplaying examples
* explicitly mention that carousels currently need to be manually initialized
* split out and explain autoplaying and the weird "autoplay after first interaction" behaviour, as well as the pause on hover/focus
* Add callout about autoplaying and accessibility
* Don't have the dark variant example autoplay
* Add "autoplaying" to cspell custom dictionary
* Tweal wording, move Page Visibility API to autoplay section
* Tweak explanation for methods, add line break in js code for consistency with last code block on the page
* Tweak method descriptions
* Tweak headings (plural "carousels")
* Move some paragraphs out of intro and into basic example, reword the nested and accessibility paragraph
* Tweak warning about `.active` slide
* Tweak callout wording
* Further prose tweaks
move the sentence about not double-initialising autoplaying carousels to the callout right at the top
instead of talking about `data-bs...` attributes, talk about the "option" instead, as authors may be setting these not via data attributes, but at instatiation time with options in the constructor
remove the incorrect statement about pausing when keyboard focus is in the carousel
* Fix relative link
* Update site/assets/js/snippets.js
Co-authored-by: GeoSot <geo.sotis@gmail.com>
* Fix snippet.js
* Tweak content organisation just a bit
Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Rework progress bar markup and styles
Logically moves the various `role` and `aria-` attributes to the `.progress` element itself, leaving the `.progress-bar` to be used purely for the visual presentation. This fixes the problem #36736 that in certain browser/AT combinations, zero-value/zero-width progress bars are completely ignored and not announced.
For multiple/stacked progress bars, this PR introduces a new wrapper and class `.progress-stacked`, to accommodate for the fact that with the more logical structure above, we need full `.progress` elements with child `.progress-bar` elements, and can't get away with the fudge we had before of having a single `.progress` with multiple `.progress-bar`s.
Note that the old markup structures still work with this change, so this could be considered a non-breaking change - though one we definitely want to highlight as it's more accessible (as it now guarantees that zero-value/zero-width progress bars, whether on their own or as part of a multi/stacked bar, are actually announced)
* Add a note about progress bar change in migration guide
* Add notes with old markup examples and explanation
* Fix bundlewatch
* Update site/content/docs/5.2/components/progress.md
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Reintroduce deleted styles
Turns out they're needed for correct positioning of text inside progress bar
* Move changes in markup to Migrationg guide, link to that from top of progress page, rewrite some content
* Fix typo in callout
* Clarify "Sizing" section
* Remove redundant "now"
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
These classes have existed since 5.1 but weren't previously documented.
Specifically:
* .text-black
* .bg-black
* .bg-black.bg-gradient
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Add dark mode to docs
* Minor fix: missing space indentation
* Minor fix: revert utilities/z-index added-in modification
* Remove prev: and next: from doc because extracted to another PR
* Use .bg-body-tertiary in all Utilities > Overflow examples
* fix example
* Fix up spacing examples
* Update box-shadow Sass variables and utilities to auto-adjust to color modes
* Remove unused docs class
* Refactor form styles to use CSS variable for background images on .form-check and .form-switch
* Fix docs selector
* Rename shortcut for clarity
* Heading consistency
* Reintroduce missing 4th grid item in Utilities > Spacing example
* Fix bundlewatch
* .bd-callout* rendering is OK so removing comments in the code
* Update scss/_utilities.scss
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Fix gutters example styling
* Fix text colors on background utils docs
* redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken
* fix some color utils examples
* Deprecate mixin notice
* Deprecate notice for list-group-item-variant() mixin
* Revamp new link CSS vars
* Use map-keys in some each Sass files
* Remove list-group-item-variant mixin ref in sass loop desc
* Display CSS vars scoped to our built-in dark mode
* Revert previous commit
* Fix list group variant link
* Fix typo
* Remove imports of alert/list-group mixins in scss/_mixins.scss
* Small formatting + comments removal in scss/_content.scss
* Fix alert links colors
* fix dropdown border-radius mixin
* fix link color and underline again, this time using CSS var override for color var and fallback value for the underline
* fix colors on docs navbar for dark mode
* remove two changes
* missing ref
* another link underline fix, just use sass vars for link decoration for now
* missing color bg docs, plus move dropdown override to scss
* more changes from review
* fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin
* Few fixes around type
- Restored CSS variable for color on headings, this time with a fallback value
- In conjunction, restored and wrapped the default CSS var with a null value check
- Split headings and paragraphs docs in Reboot, elaborated on them
* Restyle custom details > summary element in docs
* Rewrite some migration docs
* fix form checks
* Fix up some navbar styling, tweak docs callout
* Fix select images, mostly for validation styling
* Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs
* Update site/content/docs/5.2/components/scrollspy.md
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Apply suggestions from code review
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* mention form control css vars in migration guide
* Tweak grid and flex docs background examples
* clarify some docs
* fix some more things
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Grid Gap Updates
- added column-gap
- added row-gap
* Grid Gap Updates
* Bundlewatch update
* Apply suggestions from code review
Co-authored-by: Daniel O <dobiekwe@byteworks.com.ng>
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Update input-group.md with form text example
This updated example shows where to correctly put form text (i.e. not inside the input group).
* Fix markup
* Update input-group.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Expand dropdown explanation for use of `<a>`, use `<button>`s for modal examples
* Remove redundant `role="button"` from collapse test `<button>` elements
* Tweak language
* Tweak collapse prose
* Update navbars example to include a centered nav with utilities
* Update site/content/docs/5.2/examples/navbars/index.html
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Update docs homepage to use separate partials for each section
Also modifies the homepage code snippets under getting started to remove the code comments, making copy-pasting easier.
* Update some copy and examples
* newlines
* type button
* more code review, bring back interactive components
* fix hover
The current example of `.flex-wrap` and `.flex-wrap-reverse` does not really show the difference between those two utilities, because every item is labelled 'Flex item'.
With the added numbers it is more clear what happens and how `.flex-wrap-reverse` works.
* Added "overflow-x" and "overflow-y"
- Having the same properties as overflow but for just the x and y axises
- Usecase being I want my y axis to be scrollable but not my x axis
- E.g a card with a vertical list of items.
* Added "object-fit" utilities
- The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
- A responsive alternative to using background-img for a resizable fill/fit image.
* Updated documantation for the overflow utilities
- Now includes docs for `overflow-x` and `overflow-y` utilities
* Placeholder shortcode updated
- Can now choose to render an img tag or svg
- The image contains a base64 svg generated within the template
- example shortcode updated to detect, replace and render preview of 'img' tags as well
* New documentaion for Object Fit added
- Documentation added for the 'object-fit' util
* Updated spell checks issues
* Update object-fit.md
* Update overflow.md
* Update object-fit.md
* Updated markup to address HTML Validation Errors
- error: Bad value for attribute "src" on element "img": Illegal character in scheme data: space is not allowed.
- info warning: Self-closing tag syntax in text/html documents is widely discouraged; it's unnecessary and interacts badly with other HTML features (e.g., unquoted attribute values). If you're using a tool that injects self-closing tag syntax into all void elements, without any option to prevent it from doing so, then consider switching to a different tool.
* Updated Fix
- Added Legibility to the img markup (example.html)
- Fixed issue with example not working properly (because image closing tag no longer has "/>" )
* update values by step of 0.25 in bundlewatch.config
The following values in .bundlewatch.config.json have been updated:
- ./dist/css/bootstrap-utilities.css
- ./dist/css/bootstrap-utilities.min.css
- ./dist/css/bootstrap.css
- ./dist/css/bootstrap.min.css
Co-authored-by: Daniel O <dobiekwe@byteworks.com.ng>
Co-authored-by: Mark Otto <otto@github.com>
* Webpack: explain how to extract CSS from bundle
* Webpack: explain how to extract SVG from bundle
* Update webpack.md
Co-authored-by: Mark Otto <otto@github.com>
* Remove outline suppression for focused `<pre>`
Sighted keyboard users rely on knowing where their focus is. If the `<pre>` receives focus (so that it can be scrolled by keyboard users, for instance) then it's essential that they know this is the case
* Only suppress outline for buttons when `:not(:focus-visible)`
* Add right-hand margin to pre
avoids having the focus outline awkwardly clipped by the copy button
* Simplify social images and add ability to set per-page images
- Removes the homepage summary layout in favor of the larger image card (makes it more consistent with other pages)
- Reuses new thumbnails for Webpack, Parcel, and Vite guides to add their new social images
* Update default social card
* Change description to subtitle, add longer description to match homepage
* Remove social_image_path, use inline conditions for social images
* fix(offcanvas): activate focustrap when backdrop is enabled
* Adding tabindex='-1' for both offcanvases in the docs
* Remove useless aria-expanded='false' in togglers
* Update js/tests/unit/offcanvas.spec.js
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* docs: add some details for non visible scrollspy elements
* Apply suggestions from code review
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* fix selectors on snippet
* Fix paragraph by a native speaker
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Update scrollspy.md
* Move from warning to own section
* Update scrollspy.md
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Add examples for Radios in List Group
* Reduce the number of checkboxes and radios to 3 for consistency
Drop aria-label on inputs and use label
Use class stretched-link on labels to cover the whole list group item
Check the first radio by default
Remove radios from streched link examples
Co-authored-by: Julien Déramond <juderamond@gmail.com>
* Fix StackBlitz Popovers and Tooltips examples
* Rename shortcode example parameters
* Reorder example shortcode doc params + fix Cspell
* Remove 'stackblitz' param + use data-bs-title instead of title
* Update site/layouts/partials/callout-warning-data-bs-title-vs-title.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
- add `aria-hidden="true"` to the "Bootstrap" text that is hidden on large screens
- add separate visually-hidden "Bootstrap", which will be part of the accessible name regardless of whether the other string is visible or not (on large screen)
- extra visually-hidden text to give some context - that the dropdown is about switching versions
- remove the redundant id/aria-labelledby for the dropdown
* Docs: Add a Vite Getting Started guide
* Fix npm run docs temporarily
* Fix cspell and lint
* Uncomment the 2nd part
* .
* Make it work without dist
* Updates after merges of Parcel/Webpack guides rewriting
* Update images
* Replace dev images
* Compress the new images better
* Update site/content/docs/5.2/customize/optimize.md
Co-authored-by: Mark Otto <otto@github.com>
* Update site/content/docs/5.2/getting-started/vite.md
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
* docs: Add more details on "getting-started -> javascript" page & group jQuery stuff
* Update after feedback
* Rewrite some content
- Shorten copy here and there
- Reduce some callouts that are entire sections with h2 headings
- Re-arrange a couple things
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Remove unused attributes
* Use utilities rather than using new CSS
* Removed unused class
* Change StackBlitz icon `aria-label` + small inconsistency
* Using the new helper in the doc
* Remove input from `Tab` access
* Change scrollspy code examples
* Reordering tables for JS
* Fix for parcel file
* Center align all the code example texts in layout
* Alphabetical reorder the helpers
* Docs(Scrollspy): minor changes to be aligned with new version of javascript code
* first example: add proper root-margin
* 'nested nav' example: add more content to sections & enable smooth-scroll
* fix typo
* Changes after feedback
* Update examples and docs to streamline some things and improve how it works section
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Remove `--bs-border-opacity: 1` from `.border-*` utilities
We set `--bs-border-opacity: 1` globally at the `:root` level, so redeclaring it on every `.border-*` utility doesn't make much sense. I think we can drop this.
* Remove global border-opacity var, restore on .border-color classes, move .border-color utils down the list to fix some specificity issues
* Add some demos of border utils to the docs
* Handle disabled tabs
* Fix after feedback
* Update js/src/tab.js
Co-authored-by: GeoSot <geo.sotis@gmail.com>
* Update js/src/tab.js
Co-authored-by: GeoSot <geo.sotis@gmail.com>
* Commit suggestions via GitHub broke the thing
* Add some unit tests
* Remove temp doc modification
* Add tests for left arrow
* Add disabled tabs in JavaScript Behavior section
* Compact 4 tests to 2 tests
* Compact 4 tests to 2 tests
* Add 'disabled' attribute for all buttons
* Change the disabled pane position only for the vertical version
* Change ids for the confusing first example in JavaScript behavior
* Use disabled attribute instead of the class for buttons in tabs
Co-authored-by: GeoSot <geo.sotis@gmail.com>
* Update new docs version picker to work on home and examples pages
* Add addd key to opacity page
* Add more added frontmatter
* Update picker to fix migration guide links, but still work for docs and examples
* Revert `border-color` change
* Add new border-color-translucent for when we want optional alpha-transparency in our border-color
Apply to drodpowns, modals, offcanvas, popovers, and toasts
* bundlewatch
* Document incompatibilities between Bootstrap JS and React/.etc
Closes#35665.
* Remove link to reactstrap
* Update javascript.md
Co-authored-by: Mark Otto <otto@github.com>
* Fix not used option (`ride`) (according to docs), continuing of #35753a247fe9
* separate concept of `programmatical cycle` vs `maybe cycle after click` functionality
Support parsing JSON from each component's main element using the `data-bs-config` attribute.
The `bs-config` attribute will be reserved and omitted during `getDataAttributes` parsing.
With this commit, every component, will create its config object, using:
* defaults
* data-bs-config
* the rest of data attributes
* configuration object given during instance initialization
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Fix some more borders and margins
* Flex utilities docs: remove .bd-highlight class from snippets
* Explicit close target
* Reorder to keep base class up top
* Fix custom position example
* Tooltips: add code snippet, use scss-docs ref for custom tooltip
* Tweak text for pagination examples
* Modals: move custom styles to utilities
* Grid docs: Combine selectors and share coloring
* Refactor tons of little things
* Do some CSS and Migration guide cleanup
- More code snippet tweaks
- Fix some homepage hero bugs
- Do a cleanup on Migration guide content to highlight more changes and fix some issues from merge conflicts
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
