* Bump Chart.js from 2.9.4 to 4.2.1 in dashboard examples
* Rollback myChart var modification
* Add some padding between tooltip color and text
---------
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Tweak callout for icon link
- no need to talk about `alt` for `<img>` since these don't use `<img>`
- make start of sentence more readable
* Tweak language of dropdown warning callout
* Tweak popover warning callout
* Tweak rtl warning callouts
* Tweak color warning callout
* Add/move accessibility callout for color to relevant pages
* Update site/content/docs/5.3/helpers/icon-link.md
* Update site/layouts/partials/callouts/warning-color-assistive-technologies.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Docs: add overflow and text color info to progress bar page
* Add example/reference for color & background helper use
* Add mention of color modes/dark mode
* Tweak link text
* Rewrite colored links to use color property again instead of --bs-link-color-rgb value because nav links and more do not set --bs-link-color-rgb
* Update bundlewatch
* Document it
Co-authored-by: Julien Déramond <juderamond@gmail.com>
* Docs: replace twbs/bootstrap-npm-starter by twbs/examples/tree/main/icons-font
* Revamp starter template to use new .icon-link, fix Bootstrap icon and text at top
* Remove extra CSS file
* Change links to twbs/examples
* Fix icon name
* Adjust icon link offset to more reasonable and scaling distance
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Add new link utilities, update colored link helpers
* Remove commented out code
* Fixes
* Remove examples changes
* Fixes and copy
* Fix icon-link instances on homepage
* Bump bundlewatch
* Fix node-sass issue for rgba() function bug
* More bundlewatch
* One more time after merge
* Add callout for a11y
* Hover and focus-visible
* Add a11y callouts
* Remove duplicate for now
* More code review feedback
* Docs: add explanation of the base `.btn` class
and a callout reminding authors to at least define some focus styling if they intend to use it "naked"
* Turn callout into a warning
* Add initial heading
* Tweak callout wording
* Add global variables for box-shadow focus rings
* Update instances of -btn-focus-box-shadow to use -ring-box-shadow, unless it's for buttons or inputs
* fix variable name
* Add CSS variables for global focus styling, document it
* Move to CSS vars section
* Update scss/_nav.scss
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
* Helper and utils
* Fix bundlewatch
* Change 'Focus ring' in sidebar so that the page can be visible
* Minor typo fix
* fix merge
* Revamp some more, improve docs
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* Add .nav-underline modifier class
* Tweak sizing and spacing, add underline on hover
* Rebuild with Sass and CSS variables
* Document CSS vars
* Bump bundlewatch
It's not easy to otherwise correlate the examples with the relevant classes: you'd have to mentally count and correlate them. This obviates that need. Please see the image below to see the usefulness of the above.
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Use aria-labelledby to associate form-text (helper) with input field when it contains mandatory info (e.g. data format)
* Example in input-group needs aria-describedby (or aria-labelledby) too
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Update hero button color
* Fix link color on examples index
* Move .bd-btn-lg to docs buttons partial, move larger border-radius to that class so medium buttons don't look odd
* Undo the markup split
* Round padding up to whole number
* 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>
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>
* 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
* 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>
* 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>