* Add additional root variables, rename $variable-prefix to $prefix
- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout
* Bundlewatch
- Updates the utilities mixin to check for specific CSS variable names via `css-variable`
- Bonus fix: we now prevent local variables for `0` value utilities (e.g., `.border-top-0` no longer sets `--bs-border-opacity: 1`
- Adds new `.border-opacity-*` classes
- Adds new root variables: `--bs-border-color`, `--bs-border-style`, `--bs-border-width`
- Documents the new variable changes
Use the new .table-group-divider to create your own dividers as desired. Would love to find a better way to handle border-color for this, but for now, this is at least opt-in.
I've applied it by default in another way for our docs tables to help differentiate our content vs our components.
Fixes#35342
Some Linux distributions (like Debian) have fontconfig aliases for Arial
that picks specific fonts. But such generic aliases might be less
desirable than the known-good Linux specific fonts.
This fixes a problem on my setup where Liberation Sans is aliased as
Arial, even when Noto Sans is available. Liberation Sans doesn't support
a weight of 500, so we end up rendering headers at the normal weight of
400, which makes them stand out less. Reordering the Arial fallback
makes us instead pick Noto Sans over Lieration Sans, which does support
a weight of 500, and makes headers stand out again.
While we're at it, fixup the reboot documentation to match, and change
the comment about Helvetica Neue; that's not a "Basic web-fallback" font,
it's the UI font on older iOS and macOS versions.
* Add Tabler Icons to list of icons
* Update site/data/icons.yml
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Add z-index for .toast-container
- Adds positioning and z-index to toast container so that it has a system-declared layer in relation to other components.
- Updates docs to use the class better
Fixes $34028
* Remove unnecessary z-index from docs examples
* Drop .opacity-50 and .opacity-75 redefinition in examples
* Drop unused .card-img-right from blog example CSS files
* Use line-height utilities when possible
* Use rounded-* utilities in examples
* Replace .nav-underline by .nav-scroller and use it in examples.html default
* Use .mb-1 for .blog-post-title
* Remove unused CSS rule and use .fw-* utilities for carousels examples
* Use utilities for cheatsheet examples
* Extract some CSS to utilities for .nav-masthead .nav-link in cover example
* Dashboard group of minor modifications
* Dropdowns example: refactoring
* Dropdowns example refactoring: fix linting by removing selector by id
* Features example refactoring
* Headers example refactoring
* List groups example refactoring
* Sidebars example refactoring
* Sign-in example refactoring
* Starter template refactoring
* Fix RTL examples
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* fix(reboot): revert hr styles to v4 implementation
* docs(cheatsheet): add a hr example
* fix(reboot): currentColor is the initial border-color value
* Document hr element in Reboot docs
* Update migration guide
* Update scss/_variables.scss
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Replace AnchorJS with a Hugo render hook
* docs(anchors): improve aria-label on anchor links
* docs(anchors): show anchor link when ed
* docs(anchors): add hash in pseudo-element
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
* Support floating labels on `.form-control-plaintext`
* Update floating-labels.md
* Apply suggestions from code review
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
> You can disable every form element within a form with the `disabled` attribute on the `<form>`.
I really want to be mistaken, because this would be a very useful feature! But I don't believe it's true. I can't find anything about this on MDN Web Docs, and adding the `disabled` attribute to a `<form>` does nothing on any browser in my testing.
The `disabled` attribute on a `<fieldset>` does disable all descendant form controls – perhaps that's where the mixup has come from.
* Docs: group together examples reusable CSS in a stylesheet
* Use pointer-events utility in sidebars example
* Remove @import and move the content into _default/examples.html. Handle 2 sorts of dividers
* Remove footers.css extra css declaration
* Fix modals example
* Review: remove .b-example-hr
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
* Redesign docs navbar to use offcanvas, tweak overall padding while I'm here
* Match code snippets to new gutter width
* Replace value with docs-specific variable
Opted not to do a CSS variable here since on .bd-content it would be inherited into our examples
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
While it is understood that this is just an example, the visible text (label) of "Works with selects" and the `aria-label="Floating label select example"` created a [WCAG 2.5.3 Label in name](https://www.w3.org/WAI/WCAG21/quickref/#label-in-name) failure.
As the `aria-label` isn't necessary here since this `select` is already provided an accessible name by its `label` element, removing the unnecessary `aria-label` seems the best course of action as:
* removing it solves the WCAG issue
* it removes the potential implication to developers that they'd even _need_ an `aria-label` here, let alone indirectly suggesting that it's ok for the visible text and accessible name to be out of alignment
* Separate container classes from enable-grid-classes optoin
* Document the new option
* Mention in migration guide
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* docs: Add role="switch" to switches
* Tweak/expand explanation about assistive technologies
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* Disabled link cleanup
per https://www.w3.org/TR/html-aria/#docconformance
> It is NOT RECOMMENDED to use `aria-disabled="true"` on an `a` element with an `href` attribute.
>
>NOTE
>If a link needs to be "disabled", remove the `href` attribute.
This PR removes the unnecessary `href="#"`, `tabindex="-1"`, and `aria-disabled="true"` from disabled links in both docs pages and examples. `aria-disabled="true"` *is* kept for disabled link-based buttons (that have `role="button"`) as there it's appropriate to use (you *want* to convey to assistive technologies that this thing you're claiming is a button is also disabled at the moment)
Further, the PR extends the "Link functionality caveat" to show the "proper" way (removing `href` and adding `.disabled` class only) to disable a link, but then explains what to do if that's not possible (and then keeps an example with all the traditional `href="#" tabindex="-1" aria-disabled="true"`, but explains clearly that it's not ideal). Same sort of explanation is also added to the pointer event utilities page
* Turn big note into actual normal doc text
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- Adds grayscale colors
- Adds root and body variables
Note that some Sass variables default to `null`, so as we generate and use the CSS variable, we'll be potentially adding some lines of code.
- Adds new functions to generate additional Sass maps
- Adds new root variables for rgb() versions of our theme colors, plus a few extras
- Adds ability to change the alpha transparency of text color and background color utilities with new utilities, inline styles, or local CSS var
- Updates documentation for color and background-color utilities pages
- Deprecates .text-black-50 and .text-white-50 since those (and additional transparency levels) can be generated on the fly
Change approach slightly to prevent cascade
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Jaume Sala <jaumesala@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
- Moves the make-cssgrid() mixin to the grid mixins stylesheet
- Updates the g-start-* classes to start at 1 instead of 0 as 0 is an invalid value (fixes#34399)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Now includes mentino of the two utilities stylesheets, plus how and why to include the API stylesheet last
Fixes#34397
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* change data-dismiss, so can be outside modal, using a bs-target
* Update site/content/docs/5.0/components/modal.md
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
* Add maps for all colors, document how to extend color utilities
* Updates to make this more functional for v5
- Moves color maps into _variables.scss for now (felt weird to split them out when the variables are there)
- Adds a new function, map-merge-multiple(), and updates docs that reference combo-map
- Updates code snippet and docs guidance about how to extend the color utils to handle this
* Update site/content/docs/5.0/customize/color.md
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Alert.js: Refactor code to match the other components
* Use this._element
* Remove handleDismiss method and keep its functionality on event
* Change JqueryInterface to be more generic
* Correct docs to be aligned with code, and add undocumented functionality
* Update alerts.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add responsive utility classes for opacity
- fix for #33483
* remove responsive opacity utils as it has impact on bootstrap.css bundle size
* Update opacity.md
* Update site/content/docs/5.0/utilities/opacity.md
Co-authored-by: Mark Otto <otto@github.com>
* Update site/content/docs/5.0/utilities/opacity.md
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Harish <halodoc@ip-192-168-1-101.ap-southeast-1.compute.internal>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: alpadev <2838324+alpadev@users.noreply.github.com>
* Convert bulk of division to multiplication
* Use custom divide() function instead of Dart Sass math module for greater compatibility
* Apply suggestions from code review
* Fix functions
* Update dropdowns.md to reflect correct version
* Clarify content, drop the reference to versions
* Update dropdowns.md
Co-authored-by: Mark Otto <otto@github.com>
* Update documentation for badges
* Removes useless changes, as well as fixes an example
* Fixes some text with a badge example
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* placeholder changes to input value
* Fix content and add value to readOnly input
* add value in readonly input
* Update site/content/docs/5.0/forms/form-control.md
Co-authored-by: Rajesh Kumar <https://github.com/rajesh2kumar96>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: Mark Otto <otto@github.com>
* docs(cards): img in horizontal card
Closes#34145
Simply adds `img-fluid` and `rounded-start` classes to horizontal card example to ensure copy-pasting from the docs matches the expectation.
* Update site/content/docs/5.0/components/card.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Fix unnecessary classes
* Removed unnecessary div
Co-authored-by: Mark Otto <otto@github.com>
* Updated centered hero primary button classes
Co-authored-by: Mark Otto <otto@github.com>
- De-duplicates bulk of the content for a migration from v4 to v5
- Adds clear breaking labels where appropriate
- Leaves room for more guidance around doing the actual migration
* Neutralise more words from placeholder text
Follow-up to https://github.com/twbs/bootstrap/pull/33726
* Match fullscreen modal to other sizes
* Ditch the lyrics outright
* Rewrite and tweak the blog example some
* update cheatsheet
* text utils copy too
* Fix the tbody validation error
* fix typo
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: alpadev <2838324+alpadev@users.noreply.github.com>
Co-authored-by: alpadev <alpa.muc@gmail.com>
* Tweak toast docs
- a few rewordings/tweaks
- add info about toasts with focusable/actionable controls (shouldn't autohide them)
* Update site/content/docs/5.0/components/toasts.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Update site/content/docs/5.0/components/toasts.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Add example: Panels stay open
* Set unique element IDs in the new example
* Update language
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
* Update docs to use new .show behavior and clarify some copy for first example
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add updated Jumbotron example made from utilities
* Update starter template example with new design and links
* Update some existing examples and their screenshots
* Add four new snippet-based examples
* Update layout to improve things a bit
* WIP
* Add d-block to images
* Fix horizontal scroll
* move d-block to the anchor
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Accept data-bs-body option in the configuration object as well
Tweak jqueryInterface, add some more tests
* Fix Markdown table formatting and tweak the wording on backdrop
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add a new offcanvas component
* offcanvas.js: switch to string constants and `event.key`
* Remove unneeded code
* Sass optimizations
* Fixes
Make sure the element is hidden and not offscreen when inactive
fix close icon negative margins
Add content in right & bottom examples
Re-fix bottom offcanvas height not to cover all viewport
* Wording tweaks
* update tests and offcanvas class
* separate scrollbar functionality and use it in offcanvas
* Update .bundlewatch.config.json
* fix focus
* update btn-close / fix focus on close
* add aria-modal and role
return focus on trigger when offcanvas is closed
change body scrolling timings
* move common code to reusable functions
* add aria-labelledby
* Replace lorem ipsum text
* fix focus when offcanvas is closed
* updates
* revert modal, add tests for scrollbar
* show backdrop by default
* Update offcanvas.md
* Update offcanvas CSS to better match modals
- Add background-clip for borders
- Move from outline to border (less clever, more consistent)
- Add scss-docs in vars
* Revamp offcanvas docs
- Add static example to show and explain the components
- Split live examples and rename them
- Simplify example content
- Expand docs notes elsewhere
- Add sass docs
* Add .offcanvas-title instead of .modal-title
* Rename offcanvas example to offcanvas-navbar to reflect it's purpose
* labelledby references title and not header
* Add default shadow to offcanvas
* enable offcanvas-body to fill all the remaining wrapper area
* Be more descriptive, on Accessibility area
* remove redundant classes
* ensure in case of an already open offcanvas, not to open another one
* bring back backdrop|scroll combinations
* bring back toggling class
* refactor scrollbar method, plus tests
* add check if element is not full-width, according to #30621
* revert all in modal
* use documentElement innerWidth
* Rename classes to -start and -end
Also copyedit some docs wording
* omit some things on scrollbar
* PASS BrowserStack tests
-- IOS devices, Android devices and Browsers on Mac, hide scrollbar by default and appear it, only while scrolling.
* Rename '_handleClosing' to '_addEventListeners'
* change pipe usage to comma
* change Data.getData to Data.get
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Add an example of v4's media component in the flex utils docs
* Link to new example from Migration guide
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* docs(carousel): double-spaces out there
* docs(toasts): missing word, ins't it?
* docs(cheatsheet): use buttons for carousels and tabs ion cheatsheets too
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* WIP: Mention variables, mixins, and loops in docs
* Add Sass sections to component pages
* add sass docs for forms and content
* Update buttons.md
* Remove empty mixins sections
* Massive update to utilities and some consistency changes
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Our current trick works great for headings or landmarks `:target`ed by links activation, however it still allows focus to be hidden under the sticky header.
1. Go to any docs page,
2. use a TOC link to scroll down the page,
3. then `Shift`+`Tab` to navigate backward using keyboard.
You should see on some browsers (mainly Firefox from my tests, but it used to do the same in Chrome) that focused elements isn't visible, hidden by our sticky header.
Applying `scroll-padding-top` to the `:root` solves this without any side-effect—but it requires to drop `scroll-margin-top` for anchors to prevent doubling the offset.
FWIW based on my test, Edgium and Chromium don't really care since they seem to have a new heuristic for such cases, making the focused element scroll to the center of the view.
* Add function type for `popperConfig` option
* Update .bundlewatch.config.json
* copy edits
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
- Removes the &[style] selector that was used for resetting Popper styles
- Separate Popper-based alignment from static alignment with `data-bs-popover` attribute that separates the --bs-position and custom right/left properties
Co-Authored-By: Rohit Sharma <rohit2sharma95@gmail.com>
* Dynamic tabs: use buttons rather than links
- change docs
- add mention that tabs should be <button> elements
- tweak styles to neutralise border and background
* Update js unit and visual test accordingly
- replace links with buttons
- make one specific test that uses links instead of buttons, as we still want to support it despite it being non-semantically appropriate
- Leaving a couple of tests for now. The test for removed tabs should be redone so that tabs are removed programmatically (as the approach of having that close button inside the link is invalid and broken markup). The test for dropdowns should be removed together we actually ripping out the handling for dropdowns in the tab.js code (arguably a breaking change, though we discouraged this for a few versions and effectively "deprecated" it)
* Add isolation:isolate to prevent focus being overlapped
https://github.com/twbs/bootstrap/pull/32630#issuecomment-756015766
* Emit events on the dropdown button
Emit the events on `.dropdown-toggle` button and then bubble up
* Add migration note for events
* Update the docs for events
* Add unit test to check the event bubbling
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Update the default value for $enable-deprecation-messages
As seen in the https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss,
the $enable-deprecation-messages variable is set to `true` by default.
* Update site/content/docs/5.0/customize/options.md
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
* Remove the margin from dropdown in favor of Popper
- Set the default margin to 0 for dropdowns (To remove the Popper's warning)
- Set the required offset in dropdown's defaults
* Remove the margin from the popover component
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- Adds .mt-0 to the examples
- Zero-ing out universally for all of them like in #32896 would cause issues for those who include the input with visible label text, where the text and input would be misaligned
* Carousel: use buttons, not links, for prev/next
- expand the styles to neutralise border/background
- change docs page
- add extra unit test to check that links or buttons work as controls
- modify visual test to use buttons as well
- use buttons instead of links for prev/next
- remove `role="button"` from links that are actually links
* Clarify that controls can be button or link
* Update site/content/docs/5.0/components/carousel.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Explicitly set padding to 0 to prevent dipping/moving on active in Firefox
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Response to issue #32810
Use of the .bg-white class to define visual aspects of the examples
would be unintuitive for theme builders to test themes on.
This replaces instances of .bg-white with .bg-body in the examples.
- Edited examples to replace use .bg-white class with .bg-body class
- product
- offcanvas
- pricing
- cheatsheet
- cheatsheet-rtl
- Edited utilities colors.md & shadows.md to include .bg-body class
* Clarify Sass import and customize docs for how to modify variable defaulst
* Add an npm starter project callout to a few pages
* Update callout-info-npm-starter.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add Sass section to Getting Started > Build Tools, mention Sass implementation used, mention current precision of 10 due to Dart Sass, and mention recommended minimum precision (value of 6 used in BS v4). Remove outdated Sass precision from Customize > Sass docs page.
* Remove more mentions of deprecated Sass implementations. Add links to Sass compiler mentions so we can keep all pertinent Sass compiler information in just one location instead of spread through the docs, which makes it hard to find the details and/or keep them up-to-date.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* docs(migrations): add a note regarding migration from v4 used for RTL layouts
* docs(RTL): LTR & RTL at the same time
* docs(utilities): how-to use the API to rename utilities
* docs(RTL): mention issue when nesting styles with .ltr / .rtl
* Changes made in migration.md file of documentation
Added information about the removal of `.rounded-sm` and `.rounded-lg`.
And addition of `.rounded-0` to `.rounded-3`
* Moved the edited line
Added `rounded-0` to `rounded-3` under v5.0.0-alpha3
* Moved correctly
* Added link
Added link to issue #31687
* docs(migration): last typo thinggies
* Update migration.md
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
