mdo/code-guide 7448
Standards for developing consistent, flexible, and sustainable HTML and CSS.
mdo/github-buttons 2634
Showcase the success of any GitHub repo or user with these simple, static buttons with dynamic counts.
mdo/preboot 1702
A collection of LESS mixins and variables for writing better CSS.
integrations/slack 1356
Bring your code to the conversations you care about with the GitHub and Slack integration
atom/github 823
:octocat: Git and GitHub integration for Atom
mdo/css-perf 582
**Archived.** Derping around with measuring CSS performance.
Library of commonly used snippets for Jekyll sites.
mdo/config 525
Personal checklist for setting up a new Mac's dev environment.
mdo/table-grid 477
Simple CSS grid system using `display: table;`.
mdo/github-wide 465
Userstyle for making all of GitHub completely fluid.
pull request commenttwbs/bootstrap
Simplify make-container() a bit
Conceptually, I think we'd leave it as-is. The "gutter" is the combination of one column's right padding and the next column's left padding. We just have to divide it by 2 to apply it to both sides of those different columns.
But, if not, would we need to update the .row, too? I'm kinda fine keeping it as-is—does this have much of an impact to performance or anything? Or file size?
https://github.com/twbs/bootstrap/blob/585b3ec5327a7876c1829b4bedca9ece381f3f78/scss/mixins/_grid.scss#L5-L13
comment created time in 2 hours
PR opened twbs/bootstrap
This is a WIP that takes some of the nav styles we've previously used in our docs navbar and the Offcanvas navigation, and puts some enhancements into it for wider use. I'm sure there's something problematic about this, but feels like it could be a nice little addition to our navs.
Thoughts @twbs/css-review?
pr created time in 3 hours
issue commenttwbs/bootstrap
Clearly document whether a component (or example) is dependent on other SCSS files
We'll get over to Dart Sass, but I'm not sure about the module system yet. That looked like it's be a bigger lift than we can take right now.
comment created time in 3 hours
issue commenttwbs/bootstrap
Clearly document whether a component (or example) is dependent on other SCSS files
Should we document this in the hosted docs, in the Sass files (comment at the top?), both, or something else?
comment created time in 14 hours
issue closedtwbs/bootstrap
It seems after some recent changes, the examples screenshots dimensions have changed.
We shouldn't have bigger images than what we need them to be.
closed time in 16 hours
XhmikosR
issue commenttwbs/bootstrap
Closing as a duplicate of #30286 just to consolidate.
comment created time in 16 hours
pull request commenttwbs/bootstrap
With the latest changes from @ffoodd's PR, plus some more tweaks, we've got a cleaned up Legacy Edge setup.
comment created time in 20 hours
push eventtwbs/bootstrap
commit sha 7bbfd439c9d647cdfc1c4ec3bef57911cddfb00d
Extra position utilities (#31280) * Extra position utilities Given that there are utilities for the *position* property, it seems logic to have utilities for the *top*, *left*, *bottom* and *right* propertires. * Update extra position utilities * add default position values map * tweak examples * add real life examples * fix double colon Co-authored-by: XhmikosR <[email protected]>
commit sha bb794bf9046dec3bb8a49eb82fefccf7c6381f91
Bump eslint-plugin-unicorn from 21.0.0 to 22.0.0 (#31723) Bumps [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn) from 21.0.0 to 22.0.0. - [Release notes](https://github.com/sindresorhus/eslint-plugin-unicorn/releases) - [Commits](https://github.com/sindresorhus/eslint-plugin-unicorn/compare/v21.0.0...v22.0.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
commit sha 5706ce38eba781838b64d8aa6e19f03a15e5cdc4
Bump @rollup/plugin-commonjs from 15.0.0 to 15.1.0 (#31724) Bumps [@rollup/plugin-commonjs](https://github.com/rollup/plugins) from 15.0.0 to 15.1.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/commonjs-v15.0.0...commonjs-v15.1.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR <[email protected]>
commit sha 6b1cdd099041f2971cb9456a4cf3b27306909194
Bump rollup from 2.26.11 to 2.28.1 (#31725) Bumps [rollup](https://github.com/rollup/rollup) from 2.26.11 to 2.28.1. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v2.26.11...v2.28.1) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR <[email protected]>
commit sha fe77208a01b9b41ce13a9c68139d9f1618c48ec9
Add new variable for -padding-x
commit sha 99777662c678341b0220630c05a9526faab36c95
Rename .close to .btn-close, replace times sign with background SVG, update focus state
commit sha 1af79bbc5267428af9fcb4a8fc9e6ab0b30328f4
Increase width of focus styles so it's more pixel perfect out of the box
commit sha 1e69503a7367669f700c18c79bd7ba525fee3361
Increase margin in button examples to better highlight focus styles
commit sha 95f81f833153f8680328ff15c88147e96b0525ac
Add opacity variables, set opacity on disabled state
commit sha 57fc28a8548c88d7e79224e9f51611c3d5b278e2
Add details to the Migration page
commit sha 4778deac023a0e359fe5321eb431f00b5f2b8c83
Tweak sizing and alignment of .btn-close in modal headers
commit sha 67f33a06c7c0a7431981b91e27f0f58b29fd9724
Update some close button examples
commit sha fae9aef3dbc9674eadd4d0187b58653bcef96a2a
Update toasts dismiss (moving more styles to CSS instead of utilities), fix some more close examples, and add a new .btn-close-white variant
commit sha be6a150bbfe939ddab1a311aecb7a5dcc8267c97
Update .btn-close-white to use grayscale() filter too for better focus styles
commit sha e838accbc4d4091cf99ee6186236f8d74b8d4dbc
Double the brightness for improved focus contrast
commit sha c0fe38364a8d5fb4678897d751857ea6cde6e5db
Add more variables, add a comment for the 3
commit sha 5280771883561065a1641f46f2ee56a4eaafae4f
Input group addon sass customization options (#31729)
commit sha 18f8601d29ba4ccb11eb1d040eedb093ad48849b
Updates responsive embeds with new class names and CSS variables - Renames .embed-responsive-XbyY classes to .embed-responsive-XxY - Simplifies the Sass map to just be key and value, ratio and percentage - Builds .embed-responsive-* modifiers with CSS variables - Updates docs to show power of CSS variables - Add notes to the Migration guide
commit sha fe38a85839056d951d37fa3092eb5125b50a678d
Rename the classes and docs page, update everything accordingly
commit sha 3b8c17029f605726bdb65bd277ac142aec0d37ae
Move styles to docs CSS
push time in 20 hours
push eventtwbs/bootstrap
commit sha d4e80f1da09398562d14280ad03922ede26bc81e
Add variable for .carousel-dark filter
push time in 20 hours
push eventtwbs/bootstrap
commit sha 5f5f1cbcff31d970f8f63a01757e5c916f77727a
Typo in About / Overview
commit sha 849fea5a1ec6a2c39451fefb21a70c6dc9ceac42
Add a comment for escape-svg function Closes #30835 by leaving a comment in the source that the escape-svg() function must have quotes around data URIs.
commit sha 65d130fbd85abd8143c553e75e24bc5a11d36877
Mention the quotes requirement in the docs too
commit sha 94c0f12329820494c39fe7c213866620416d0b38
Add getInstance method in the docs for tooltip (#31636) Co-authored-by: XhmikosR <[email protected]>
commit sha 7571fe73b619628c31eae8edb63d719ede9a900b
docs: mention our bundle file clearly. Note that we are using the bundle file already in our docs since 787441d.
commit sha 85d00e6d85623d5a4a0ee4776e3842da7cf874fe
Update site/content/docs/5.0/getting-started/download.md Co-authored-by: Mark Otto <[email protected]>
commit sha e3b7880abf2ab8f7ed35365ae530a63e63c309ba
Rewrite quick start JS sections in getting started page so things are more clearly organized
commit sha 512242943cc8dd149f1a338d6f2940cc0926a7de
Rremove separate JS includes from homepage for simplicity's sake, but include a link to doing it separately
commit sha 800952cef02af97daa43947ac74601384e9ba63e
Remove unnecessary nesting selectors
commit sha 400b8a6754023365c9fe4816cd7026bf556af7b2
Add spaces after commas
commit sha 4d6dd313792f9dcb0c61c5722555ff59d5fff288
Update Stylelint rules Enable `scss/selector-no-union-class-name`
commit sha 1c07693b1f43548baf656c5218b270b79514801d
Bump eslint from 7.8.1 to 7.9.0 (#31661) Bumps [eslint](https://github.com/eslint/eslint) from 7.8.1 to 7.9.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/master/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v7.8.1...v7.9.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
commit sha 2924ba2e15bb51e4782239df48a51a35ac3ddb8f
Bump stylelint-config-twbs-bootstrap from 2.0.3 to 2.1.0 (#31663) Bumps [stylelint-config-twbs-bootstrap](https://github.com/twbs/stylelint-config-twbs-bootstrap) from 2.0.3 to 2.1.0. - [Release notes](https://github.com/twbs/stylelint-config-twbs-bootstrap/releases) - [Commits](https://github.com/twbs/stylelint-config-twbs-bootstrap/compare/v2.0.3...v2.1.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR <[email protected]>
commit sha 655ce50cfe4a32af6995cae7e23b6b6b18777d38
Bump hugo-bin from 0.62.3 to 0.63.1 (#31660) Bumps [hugo-bin](https://github.com/fenneclab/hugo-bin) from 0.62.3 to 0.63.1. - [Release notes](https://github.com/fenneclab/hugo-bin/releases) - [Commits](https://github.com/fenneclab/hugo-bin/compare/v0.62.3...v0.63.1) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR <[email protected]>
commit sha 390ce245cc8612707d6bd136214ebfbc2860e5c6
docs(scrollspy): mention keyboard access and apply tabindex=0 (#31578)
commit sha fec511da025c39b40fa94da1c047688fa95dd577
Docs: Fix vertical align link
commit sha b5fb84a91d43d5178c3a6732355f346fdc3a113c
docs: fix a few redirects (#31689) * Fix GitHub's permanent redirects * Fix a11yproject redirects * Update postcss-loader repo URL to the current one
commit sha 26c1fbe839482bf152cefcf57aa8797549fd8387
Update webpack.md potcss-loader now uses the `postcssOptions` key. https://www.npmjs.com/package/postcss-loader
commit sha 4e9a29e47ae776064b5afe931a347d61a4390451
Update webpack.md Format snippets
commit sha 7bbfd439c9d647cdfc1c4ec3bef57911cddfb00d
Extra position utilities (#31280) * Extra position utilities Given that there are utilities for the *position* property, it seems logic to have utilities for the *top*, *left*, *bottom* and *right* propertires. * Update extra position utilities * add default position values map * tweak examples * add real life examples * fix double colon Co-authored-by: XhmikosR <[email protected]>
push time in a day
push eventtwbs/bootstrap
commit sha 18f8601d29ba4ccb11eb1d040eedb093ad48849b
Updates responsive embeds with new class names and CSS variables - Renames .embed-responsive-XbyY classes to .embed-responsive-XxY - Simplifies the Sass map to just be key and value, ratio and percentage - Builds .embed-responsive-* modifiers with CSS variables - Updates docs to show power of CSS variables - Add notes to the Migration guide
commit sha fe38a85839056d951d37fa3092eb5125b50a678d
Rename the classes and docs page, update everything accordingly
commit sha 3b8c17029f605726bdb65bd277ac142aec0d37ae
Move styles to docs CSS
commit sha 73e56404050fc13a5da3bb031fba0980406e7e6c
Add example of responsive behavior for aspect ratios
commit sha 9f60659d1dda28146e1c5cb6fe5a3e2b0d42b266
Updates to .ratio selectors and docs - Remove group selector for ratio items - Drop the .ratio-item entirely - Update docs to explain updated approach - Update Migration guide to reflect the latest
push time in a day
push eventtwbs/bootstrap
commit sha 54ac2c7b055e66b8dae38667f3573491f2389d27
Match container gutters with row gutters - Replaces make-container mixin's padding-x param with gutter to match naming - Changes value of container padding variable to match grid gutter width variable - Uses local CSS variable for container padding Fixes #31642
commit sha a690a67c7c57061ae74ad2d0d7714710ef216605
Forgot to divide by 2
push time in a day
PR merged twbs/bootstrap
Grid container, row, and column padding/margin should always match. I missed this in my reviews and testing, unless there's uh something else I missed. 😅
- Replaces make-container mixin's padding-x param with gutter to match naming
- Changes value of container padding variable to match grid gutter width variable
- Uses local CSS variable for container padding
Fixes #31642
/cc @MartijnCuppens directly since the original PR at #29146 changed this
pr closed time in a day
issue closedtwbs/bootstrap
Container x-padding (1rem + 1rem) larger than row negative margins (-1.5rem)
I'm a little confused why the padding on containers,
padding-right: 1rem;
padding-left: 1rem;
is 2rem in total, but the row negative margins are -1.5rem in total
.row {
--bs-gutter-x: 1.5rem;
/* snip */
margin-right: calc(var(--bs-gutter-x) / -2);
margin-left: calc(var(--bs-gutter-x) / -2);
}
This results in 0.25rem of padding on the left and right of the containers, and makes edge-to-edge a challenge. While it doesn't matter much in the examples because they use a white background, it makes edge-to-edge backgrounds a problem. Is this intentional or a bug? Because my interpretation of the documentation is that the negative margins on the rows should exactly counteract the padding on containers. When I set --bs-gutter-x to 2rem, the problem goes away.
Thanks for all the work on Bootstrap v5! I am very excited about the stable release.
closed time in a day
jeffhuang
PR merged twbs/bootstrap
- Renames .embed-responsive-XbyY classes to .embed-responsive-XxY
- Simplifies the Sass map to just be key and value, ratio and percentage
- Builds .embed-responsive-* modifiers with CSS variables
- Updates docs to show power of CSS variables
- Add notes to the Migration guide
Fixes #31531.
pr closed time in a day
issue closedtwbs/bootstrap
Add responsive embed class with ratio by variable
It would be handy if there was support for a variable ratio.
For example,
<style>
.embed-responsive-by-ratio::before {
padding-top: 56.25%; /* 16:9 fallback when var() not supported */
padding-top: var(--embed-responsive-by-ratio);
}
</style>
<div class="embed-responsive embed-responsive-by-ratio" style="--embed-responsive-by-ratio: 17.8%;"></div>
When templating a known width and height it is simpler to calculate the padding than determine which of your classes is a closer fit.
Didn't see this in the documentation but it is pretty simple and working for me - would probably be generally useful
closed time in a day
thenewguy
push eventtwbs/bootstrap
commit sha 0fefa5ce10d9244a6e8fe7248250db15dbc5c00b
Updates to .ratio selectors and docs - Remove group selector for ratio items - Drop the .ratio-item entirely - Update docs to explain updated approach - Update Migration guide to reflect the latest
push time in a day
PR closed twbs/bootstrap
- Renames .embed-responsive-XbyY classes to .embed-responsive-XxY
- Simplifies the Sass map to just be key and value, ratio and percentage
- Builds .embed-responsive-* modifiers with CSS variables
- Updates docs to show power of CSS variables
- Add notes to the Migration guide
Fixes #31531.
pr closed time in a day
pull request commenttwbs/bootstrap
Updates responsive embeds with new class names and CSS variables
Yup, good idea—just pushed some changes.Done!
comment created time in a day
issue closedtwbs/bootstrap
Spacing Not Working for Ordered List
I'm trying the spacing utility for this ordered list. I will use all -n3 for this test case. It works for every other resolution except for the ml-sm-n3 class. It only works for sm resolution if I use ml-n3 instead of ml-sm-n3 class.
Here's the code;
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
</head>
<body>
<p>Spacing utility</p>
<div>  ↓</div>
<ol class="ml-sm-n3 ml-md-n3 ml-lg-n3 ml-xl-n3">
<li>Item</li>
<li>Item 2</li>
</ol>
</body>
</html>
Preview;
I'm using; Bootstrap: Version 4.4.1 Operating system: Microsoft Windows 10 Version 2004 (OS Build 19041.508) (64-bit) Browser: Microsoft Edge Version 85.0.564.51 (64-bit)
What am I doing wrong here?
closed time in 2 days
hashnimmo
issue commenttwbs/bootstrap
Spacing Not Working for Ordered List
It only works for
smresolution if I useml-n3instead ofml-sm-n3class.
That's by design. See the above comments for more information on this as well. Beyond that, you're using negative margin to override the default padding-left on <ol>s when you could change the padding instead.
comment created time in 2 days
issue commenttwbs/bootstrap
Carousel data-interval is always 5000 on first item
Ah sorry, yes, confirming this is the case in the latest docs: https://getbootstrap.com/docs/4.5/components/carousel/#individual-carousel-item-interval. Also affects v5's docs.
/cc @Johann-S
comment created time in 2 days
issue closedtwbs/bootstrap
Negative margin is absent in bs-5. Add negative margin feature in bootstrap 5 like bootstrap 4.
for example,
m-n(1-5)
mt-n(1-5)
mr-n(1-5)
mb-n(1-5)
ml-n(1-5)
Thanks in advance.
closed time in 2 days
ExpertHasan
issue commenttwbs/bootstrap
You're more than welcome to do that yourself :).
comment created time in 2 days
issue closedtwbs/bootstrap
please add swipe slider in bootstrap latest version for smartphones
Thank you
closed time in 2 days
kunal5007k
push eventtwbs/bootstrap
commit sha 99777662c678341b0220630c05a9526faab36c95
Rename .close to .btn-close, replace times sign with background SVG, update focus state
commit sha 1af79bbc5267428af9fcb4a8fc9e6ab0b30328f4
Increase width of focus styles so it's more pixel perfect out of the box
commit sha 1e69503a7367669f700c18c79bd7ba525fee3361
Increase margin in button examples to better highlight focus styles
commit sha 95f81f833153f8680328ff15c88147e96b0525ac
Add opacity variables, set opacity on disabled state
commit sha 57fc28a8548c88d7e79224e9f51611c3d5b278e2
Add details to the Migration page
commit sha 4778deac023a0e359fe5321eb431f00b5f2b8c83
Tweak sizing and alignment of .btn-close in modal headers
commit sha 67f33a06c7c0a7431981b91e27f0f58b29fd9724
Update some close button examples
commit sha fae9aef3dbc9674eadd4d0187b58653bcef96a2a
Update toasts dismiss (moving more styles to CSS instead of utilities), fix some more close examples, and add a new .btn-close-white variant
commit sha be6a150bbfe939ddab1a311aecb7a5dcc8267c97
Update .btn-close-white to use grayscale() filter too for better focus styles
commit sha e838accbc4d4091cf99ee6186236f8d74b8d4dbc
Double the brightness for improved focus contrast
commit sha c0fe38364a8d5fb4678897d751857ea6cde6e5db
Add more variables, add a comment for the 3
push time in 2 days
PR merged twbs/bootstrap
This PR redesigns our close buttons to make them more consistent across browsers and devices, as well as making it slightly easier to style them overall. With a little CSS background-image magic, we're sizing the × SVG to the content-box. This allows us to give use padding and rounded corners that carry the styling through with no impact to the × icon.
- Renamed
.closeto.btn-closefor more specific class name - Replaced inline
×sign with embedded SVG in our CSS - Improved focus styles with custom
box-shadow"outline" like our buttons - Increased focus shadow width of all buttons, including the new close button, from
.2emto.25emfor a more pixel perfect rendering - Adds
.btn-close-whitevariant for darker backgrounds.
Here's a preview of the default and disabled styles, as well as a focused and disabled style.
Closes #30927 and closes #31478.
Fixes #30917 (focus), fixes #28787 (default styling in toasts), fixes #27294 (rename). and fixes #27163 (focus).
Preview: https://deploy-preview-31641--twbs-bootstrap.netlify.app/docs/5.0/components/close-button/
pr closed time in 2 days
issue closedtwbs/bootstrap
Restyle close icon's focus style
This button shouldn't be styled that way when focused (clicked) :(
closed time in 2 days
raqibjs
issue closedtwbs/bootstrap
Rename close icon class to btn-close
Imo:
closename is very generic, but adds a lot of styling and interferes with any use of such word for other purposes. Example: For buttons with icons I often usebtn btn-secondary <icon-name>, If my icon is namedclosethe button will get a lot of unwanted styles.- Close icon's use-case is generally a button, so why not
btn btn-close?
closed time in 2 days
alecpl
issue closedtwbs/bootstrap
Modal has padding and margin for the close button (.close)
.modal-header {
display: flex;
align-items: flex-start; // so the close btn always stays on the upper right corner
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color;
@include border-top-radius($modal-content-border-radius);
.close {
padding: $modal-header-padding;
// auto on the left force icon to the right even when there is no .modal-title
margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
}
}
I suggest we add the same thing to toasts
.toast-header {
display: flex;
align-items: center;
padding: $toast-padding-y $toast-padding-x;
color: $toast-header-color;
background-color: $toast-header-background-color;
background-clip: padding-box;
border-bottom: $toast-border-width solid $toast-header-border-color;
// add this ----->
.close {
padding: $toast-padding-y $toast-padding-x;
margin-right: auto;
}
}
Maybe add a $toast-header-padding, $toast-header-padding-x, $toast-header-padding-y variables and margin?
The main thing is the margin-right or something that does its job.
closed time in 2 days
ZaidBarghouthi
issue closedtwbs/bootstrap
Bootstrap 4.5 or browser(s) bug ? modal close button with frame ?
go to Bootstrap page :
https://getbootstrap.com/docs/4.5/components/modal/ https://getbootstrap.com/docs/4.0/components/modal/
Then click on sample modal dismiss button (right upper corner). See the frame around ? Wasn't there two days ago.
it is in Chome 83.0.4103.61 Win7 64, new Edge based on chromium engine, latest Firefox 75.
When set css element from pointer-events:auto to pointer-events: none
frame gone, but loose some visual behaviour.
regards.
@XhmikosR, next time check before You close an issue. I Know what ama writing. This problem is new.
closed time in 2 days
wwwfactory
push eventtwbs/bootstrap
commit sha f407d32134c8e6b09644c12fa51af56e5a135ce8
Add example of responsive behavior for aspect ratios
push time in 2 days
pull request commenttwbs/bootstrap
Updates responsive embeds with new class names and CSS variables
Done, and done, and done! Latest commits rename it to .ratio and move inline styles to the docs CSS. Also added an example of using breakpoints to change the CSS variable for responsive ratios.
comment created time in 2 days
push eventtwbs/bootstrap
commit sha 8ae812665590453c53e6827057d2408329085689
Rename the classes and docs page, update everything accordingly
commit sha cf52de6387ed1fbaa15ad234083f2d67e2ed5875
Move styles to docs CSS
push time in 2 days
issue closedtwbs/icons
Hi,
It would be nice to have a Translate icon like
or https://fontawesome.com/icons/language?style=solid in the app.
I would be OK to do it myself but I recall that there are some custom modifications regarding letters in the icons (cf: https://github.com/twbs/icons/issues/401#issuecomment-678003249).
closed time in 2 days
pierrebaronqumu
issue commenttwbs/icons
Which font is used when numbers/letters are used ?
It involves converting to outlines, then manually adjusting certain characters and their spacing to hit whole pixels as much as possible. I'm afraid I don't have a list of modifications I've made to each one.
comment created time in 2 days
pull request commenttwbs/bootstrap
Updates responsive embeds with new class names and CSS variables
Think that'd be fine @MartijnCuppens. We'd change the .responsive-embed-item too, and keep the nested selectors, right?
comment created time in 2 days
Pull request review commenttwbs/bootstrap
Updates responsive embeds with new class names and CSS variables
$transition-collapse: height .35s ease !default; // scss-docs-start embed-responsive-aspect-ratios $embed-responsive-aspect-ratios: (- "21by9": (- x: 21,- y: 9- ),- "16by9": (- x: 16,- y: 9- ),- "4by3": (- x: 4,- y: 3- ),- "1by1": (- x: 1,- y: 1- )+ "1x1": 100%,+ "4x3": 75%,+ "16x9": 56.25%,+ "21x9": 42.857142%
calc(21/9%) doesn't work. We'd have to do something like calc(calc(9/21) * 100%), which doesn't feel more readable to me.
comment created time in 2 days
push eventtwbs/bootstrap
commit sha c05bc1b4257bbf929b555f330e6e302e804e0b42
Add more variables, add a comment for the 3
push time in 2 days
pull request commenttwbs/bootstrap
Nice, great comments @ffoodd! Updated the alert CSS to include two new variables. Also changed the 3.5 to 3 (previous value was too much) and explained why we use that value.
comment created time in 2 days
push eventtwbs/bootstrap
commit sha fe77208a01b9b41ce13a9c68139d9f1618c48ec9
Add new variable for -padding-x
push time in 2 days
PR merged twbs/bootstrap
Adds an explicit new variable for $dropdown-padding-x so folks can more easily customize the menu's appearance.
pr closed time in 2 days
issue commenttwbs/bootstrap
Filesize can be reduced by putting SVG images in --css-variables
Yeah, I've found that as well re: usage numbers. I think the filters are great when used surgically, but beyond that they get a little too clever maybe. Like turning black to a random color instead of just inverting/grayscaling.
Worth playing around a little more though!
comment created time in 3 days
issue commenttwbs/bootstrap
Filesize can be reduced by putting SVG images in --css-variables
Turns out this doesn't save as much as one would hope. Basically we go from 182985 to 182608 bytes, so we're saving ~380 bytes. This includes changing all form icons into CSS variables and using those CSS vars instead of Sass ones in the background-image declarations.
Output of those:
:root {
--form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
--form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
--form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#fff'/></svg>");
--form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
--form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba(0, 0, 0, 0.25)'/></svg>");
--form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#8bbafe'/></svg>");
--form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#fff'/></svg>");
--form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
--form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#dc3545' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#dc3545' stroke='none'/></svg>");
}
We'd shave a little more if we put our carousel icons in there, but limited it to one chevron and then used a CSS transform to mirror the icon for the other side.
Beyond that, not as much savings. Thoughts @twbs/css-review?comment created time in 3 days
push eventtwbs/bootstrap
commit sha 7acf586d3efa9b2bad6a93d81c7cdc3560de6cdf
Docs: fix typo (#31106) * Fixes a typo so it displays the correct px's. * Update gutters.md Co-authored-by: XhmikosR <[email protected]>
commit sha edbcc401c28e539ecdcf3c49c7ef2a74d0c28ebd
Change whitelist to allowlist (#31066) Co-authored-by: XhmikosR <[email protected]> Co-authored-by: Mark Otto <[email protected]>
commit sha d3aa909c923428c08ce75a31a7500fadd5365ade
Fix links to gutters page (#31116)
commit sha fc74a0d91589c120bf8b9a3913fbceb016733c61
Updated the command to install using yarn (#31075) * updated yarn command to install latest version * Update README.md Co-authored-by: XhmikosR <[email protected]>
commit sha 9ca811eed5939f99cf5f71eb7a29141e878cf9f8
Fixes #31113 (#31120)
commit sha 806f64e162d80e64257eb325daf3867d0ff52770
Correctly document how to add to Sass maps (#31107) Fixes #31089. Co-authored-by: XhmikosR <[email protected]>
commit sha d6671d8f2d30198a13a27c92971ba37cad6bffca
Docs: move color utility callouts to start of page (#31135) * Move color utility callouts to start of page Hierarchically/structurally, in the position they are currently at, the two callouts seem like they "belong" just to the "background color" section. Moving them to the start makes it clearer that those two callouts relate to everything in the page (both "Color" and "Background color" classes. * Change heading level otherwise the assistive technology callout looks like it's hierarchically under the "Dealing with specificity" heading
commit sha 4fb01c34d79d60c97ec0ee40ac979a362d9937f8
Update devDependencies (#31123) * @babel/cli ^7.10.1 → ^7.10.3 * @babel/core ^7.10.2 → ^7.10.3 * @babel/plugin-proposal-object-rest-spread ^7.10.1 → ^7.10.3 * @babel/preset-env ^7.10.2 → ^7.10.3 * @rollup/plugin-babel ^5.0.3 → ^5.0.4 * autoprefixer ^9.8.0 → ^9.8.2 * eslint ^7.2.0 → ^7.3.1 * rollup ^2.17.0 → ^2.18.0
commit sha 9882de80794ea09b7efe4e45f9d7077306a18cb1
Update .browserslistrc (#31124) * remove ExplorerMobile since it's included in `dead` browsers * change Edge to >= 16 otherwise browserslist seems to include >= 17
commit sha 02ff387daa3a6e684210da7ee47ad988a2352aac
Darken dropdown divider (#31131) currently, `$gray-200` is practically imperceptible. switch to reusing `$dropdown-border-color`.
commit sha 9c320df6529e27a0fe358fdaf18adc02d36d1ba4
Floating labels improvements (#30966) * docs(example): floating-labels' better Edge fallback * docs(example): refactor floating-labels' CSS
commit sha d33a560dd6cad89dc8e54a4b6e4fbea73255ab5c
Fix table separator typo (#31162)
commit sha c140347bd26851c79e76766ae381e91c159b3f48
Fix scrollable modal (#31151) Co-authored-by: XhmikosR <[email protected]>
commit sha ca22e72411add513e0e819bf100423d5d84d2067
Remove backdrop-filter from docs subnav Fixes #31163.
commit sha 9f173aeff363b6b535e5d0956f210107456c2904
Remove backdrop-filter from toasts
commit sha fb4efb49ea7f5ebe36e67a457b8f713b2c5b2bb4
Prevent overflowing static backdrop modal animation (#30326) Co-authored-by: XhmikosR <[email protected]>
commit sha 786208ea15626ebc7769375e4b98bbb6fcd3428f
BrowserStack: stop testing on latest Edge. (#31125) It's Chromium-based so it seems redundant.
commit sha 49698e92b662bdb6c2faaca76a16412446e5bb90
Update Dependabot config file (#31167) * Update Dependabot config file * Update dependabot.yml Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: XhmikosR <[email protected]>
commit sha 395aed8e1ce138459685597531bf2b4394c65f3e
Bump lockfile-lint from 4.3.6 to 4.3.7 (#31169) Bumps [lockfile-lint](https://github.com/lirantal/lockfile-lint) from 4.3.6 to 4.3.7. - [Release notes](https://github.com/lirantal/lockfile-lint/releases) - [Commits](https://github.com/lirantal/lockfile-lint/compare/[email protected]@4.3.7) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
commit sha c500d201cec8340f8d9f5c33c2da1388a28cdb46
Bump autoprefixer from 9.8.2 to 9.8.4 (#31168) Bumps [autoprefixer](https://github.com/postcss/autoprefixer) from 9.8.2 to 9.8.4. - [Release notes](https://github.com/postcss/autoprefixer/releases) - [Changelog](https://github.com/postcss/autoprefixer/blob/master/CHANGELOG.md) - [Commits](https://github.com/postcss/autoprefixer/compare/9.8.2...9.8.4) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR <[email protected]>
push time in 3 days
PR opened twbs/bootstrap
Adds an explicit new variable for $dropdown-padding-x so folks can more easily customize the menu's appearance.
pr created time in 3 days
pull request commenttwbs/bootstrap
Maybe the
btn-close-whitefocus border color could be a little whiter?
Added brightness(200%) to tackle that.
comment created time in 3 days
push eventtwbs/bootstrap
commit sha f08257d09d1f7cf3c6a9cc71bf6471bb2417f0ed
Rename .close to .btn-close, replace times sign with background SVG, update focus state
commit sha c4c29dc5cc97d5130b8004dc17ee0581c1358e44
Increase width of focus styles so it's more pixel perfect out of the box
commit sha 81280a5a793e11b5af15643604bfe728f21011d5
Increase margin in button examples to better highlight focus styles
commit sha 43726789c3274f1e617bb8aecfee61b2ddd1d8b3
Add opacity variables, set opacity on disabled state
commit sha 8c27f050b3b05f40c3ad558241e4104cb88339cc
Add details to the Migration page
commit sha c2b69cc4eb0d061a0b34b0cd9a824284f1de4582
Tweak sizing and alignment of .btn-close in modal headers
commit sha f793df4b8d4900407c608d02d19ecf56319a2de0
Update some close button examples
commit sha 2cf7ad8b0f6fdcc1318cd9d24bb1426dbaf38b5c
Update toasts dismiss (moving more styles to CSS instead of utilities), fix some more close examples, and add a new .btn-close-white variant
commit sha bfb22e498efc72e8f5dd6b0feee6260159584c62
Update .btn-close-white to use grayscale() filter too for better focus styles
commit sha 6f65d369a16f3a1039571984c0e365dcb66053a0
Double the brightness for improved focus contrast
push time in 3 days
issue commenttwbs/bootstrap
Collapse, pass hidden/show event even when element is already in final state
Please let us know when you have a live demo if this is still an issue and we can reopen to revisit it. Thanks!
comment created time in 3 days
issue commenttwbs/bootstrap
Collapse, pass hidden/show event even when element is already in final state
Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and operating system details.
This is a saved reply.
comment created time in 3 days
issue closedtwbs/bootstrap
Collapse, pass hidden/show event even when element is already in final state
OS: Windows 10 Chrome 84 Bootstrap: 5 alpha
Issue or intended? Hidden/shown, do not trigger when element is already hidden/shown.
I have a usecase where i have a default empty element. I init collapse using js on pageload with toggle: false Right before an ajax call i have a need to hide the element, you can think of it as
- empty element
- button click -> hide collapse
- ajax, on error listen for hidden event -> show collapse
- correct error, button click -> hide error
- confirm page shows with possibility to go back to previous page to edit data
Now for example on step 5, i have to integrate useless code to make step 2-3 work again. The only way to make this functionality is to clear the error element and call show() again, cause the hidden event is not passed when the element is already hidden And the same issue applies on pageload, i have to pass "collapse show" instead of only "collapse" in order to make the initial step 2 work
Proposed behaviour: Pass the final events ( hidden, shown ) when you call hide() / show() on an already hidden/shown element so you not have to clear an element and show it with empty content just to be able to call hide again
Bit in a rush at the moment, so no test case, but it should be easy reproducable by simply making
- element with class "collapse"
- Init collapse on element
- call hide() on the element
- setup a hidden listener to alert something ( which does not work cause event is not passed when already hidden )
Proposed code change - collapse.js ( same for show() )
if (this._isTransitioning || !this._element.classList.contains(CLASS_NAME_SHOW)) { return }
Seperate this bit of code to return only if transitioning, and instead do another if when it now has class "show" to directly emit the event
Thanks, Seb
closed time in 3 days
seb-witt
issue commenttwbs/bootstrap
Carousel data-interval is always 5000 on first item
Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and operating system details.
This is a saved reply.
comment created time in 3 days
PR opened twbs/bootstrap
- Renames .embed-responsive-XbyY classes to .embed-responsive-XxY
- Simplifies the Sass map to just be key and value, ratio and percentage
- Builds .embed-responsive-* modifiers with CSS variables
- Updates docs to show power of CSS variables
- Add notes to the Migration guide
Fixes #31531.
pr created time in 3 days
issue closedtwbs/bootstrap
Initially collapsed button with radio - error
When initially collapsed button contains radio input, on the load of page button.js triggers error "Uncaught TypeError: Cannot read property 'checked' of null" (line 174). Seems check whether 'input' is undefined at the beginning of if(... could solve it.
- Bootstrap version: 4.5.2
- Operating system: Windows 10
- Chrome 85.0.4183.102 x64
- Test case: https://jsbin.com/yofuviv/edit?html,output (described error appears in console of developer tools)
closed time in 3 days
michalhorak
issue commenttwbs/bootstrap
Initially collapsed button with radio - error
This isn't a super clear example—there's a good amount of unrelated HTML in there. Recreating this from scratch the way I'd do it, I see no errors. https://codepen.io/emdeoh/pen/yLOQjvo?editors=1100
Some of the problems I see:
- Mixing button classes with dropdown classes
- Rogue
.collapseclass in there - Custom classes not found in Bootstrap
- Mismatched CSS and JS versions of Bootstrap
If you can reduce it down to completely vanilla Bootstrap code and still have a problem, we'd be happy to look again.
comment created time in 3 days
issue closedtwbs/bootstrap
Other css framework have so many color variant where bootstrap has only primary, secondary, info, warning, danger, dark, light. But it is extremely need more colors. So I am requesting to add more than 50 colors in bootstrap.
closed time in 3 days
SankarBala
issue commenttwbs/bootstrap
We have tons of colors, but we don't create classes for every single one.
v4: https://getbootstrap.com/docs/4.5/getting-started/theming/#color v5: https://v5.getbootstrap.com/docs/5.0/customize/color/
comment created time in 3 days
pull request commenttwbs/bootstrap
Don't test on public repos that automatically notify thousands of people in the process.
comment created time in 4 days
pull request commenttwbs/release
Removed the SVG and JSON since we pulled those from the readme.
comment created time in 4 days
push eventtwbs/release
commit sha 4ff11f85c6537fcdaf497b08b01ffd6738983a26
remove the schedule json and svg
push time in 4 days
push eventtwbs/bootstrap
commit sha 7bbfd439c9d647cdfc1c4ec3bef57911cddfb00d
Extra position utilities (#31280) * Extra position utilities Given that there are utilities for the *position* property, it seems logic to have utilities for the *top*, *left*, *bottom* and *right* propertires. * Update extra position utilities * add default position values map * tweak examples * add real life examples * fix double colon Co-authored-by: XhmikosR <[email protected]>
push time in 4 days
PR merged twbs/bootstrap
Introduction
I've been using bootstrap since v1 and I've always wished for this kind of utilities to be present on the framework. Given that there are utilities for the position property, it seems logic to have utilities for the top, left, bottom and right propertires. I've also added some utilities to center the elements using translations.
Arrange elements
Arrange elements easily with the edge positioning utilities. The format is {property}-{position}.
Where property is one of:
top- for the verticaltoppositionleft- for the horizontalleftpositionbottom- for the verticalbottompositionright- for the horizontalrightposition
Where position is one of:
0- for0edge position50- for50%edge position100- for100%edge position
<div class="position-relative">
<div class="position-absolute left-0 top-0"></div>
<div class="position-absolute right-0 top-0"></div>
<div class="position-absolute left-50 top-50"></div>
<div class="position-absolute right-50 bottom-50"></div>
<div class="position-absolute right-0 bottom-0"></div>
<div class="position-absolute left-0 bottom-0"></div>
</div>
Center elements
In addition, you can also center the elements with transform utilities. The format is tt-{x-axis}{y-axis}.
Where x-axis is one of:
x- for50%horizontal translationnx- for-50%horizontal translation
Where y-axis is one of:
y- for50%vertical translationny- for-50%vertical translation
<div class="position-relative">
<div class="position-absolute left-0 top-0 tt-nxny"></div>
<div class="position-absolute left-50 top-0 tt-nxny"></div>
<div class="position-absolute right-0 top-0 tt-xny"></div>
<div class="position-absolute right-0 top-50 tt-xny"></div>
<div class="position-absolute left-0 bottom-0 tt-nxy"></div>
<div class="position-absolute left-50 bottom-0 tt-nxy"></div>
<div class="position-absolute right-0 bottom-0 tt-xy"></div>
<div class="position-absolute left-0 top-50 tt-nxny"></div>
<div class="position-absolute left-50 top-50 tt-nxny"></div>
</div>
I've used the format tt-{x-axis}{y-axis} to denote the transform: translateX translateY action, but I'm open to a new prefix...
Examples
Here are some basic real case usages to demonstrate these utilities.
<button type="button" class="btn btn-primary position-relative">
Mails <span class="badge rounded-pill bg-secondary position-absolute top right tt-xny">+99</span>
<span class="visually-hidden">unread messages</span>
</button>
<button type="button" class="btn btn-primary position-relative">
Mails <span class="badge border border-light rounded-circle bg-danger position-absolute top-0 right-0 tt-xny p-1">
<span class="visually-hidden">unread messages</span>
</span>
</button>
pr closed time in 4 days
issue commenttwbs/bootstrap
Floating label stay at empty input position browser preload input
This has been open for quite awhile, and I'm not a daily Chrome user, so I apologize for that. Is this still an issue for folks? Does #30449 make a difference at all?
comment created time in 4 days
pull request commenttwbs/bootstrap
Pushed some more updates to address @MartijnCuppens's comments. Wondering if there's some more I can do to make this more bulletproof. Happy to hear out any comments!
comment created time in 4 days
push eventtwbs/bootstrap
commit sha 26c1fbe839482bf152cefcf57aa8797549fd8387
Update webpack.md potcss-loader now uses the `postcssOptions` key. https://www.npmjs.com/package/postcss-loader
commit sha 4e9a29e47ae776064b5afe931a347d61a4390451
Update webpack.md Format snippets
commit sha db1d8383b0d136d14824687fd294eea6a26226f4
v5: Promote floating labels example to component - Adds new .form-floating - Stubs out basics of a docs page - Removes existing Example
commit sha 3d4a0abf3e1ebcd6ef806f4a512d80b31a23d609
Add section to forms overview
commit sha 8b36fd8d54dc151552328c2be759a0bea244c209
Drop vendor prefixes
commit sha f91f8ddac7bf0688429947f73ad41319354f6171
More nesting
commit sha def3bc1db72245582b5c2ee7e68975f45a414a22
Update floating labels to support .form-select, make inputs and selects more consistent - To do this, I made the .form-control and .form-select consistent in min-height vs height - Removed some unused variables now - Updated -color to be the -color because I don't know why this was any different before - Update page to include some examples for layout, validation, and value - Rewrite styles to not modify padding, but instead transform and opacity
commit sha 2a70367ee04a84927ec35ff301da9a0ea200d293
Streamline and bulletproof some things - Apply some optimizations from code review - Removed unecessary properties from the label - Add some comments for what properties are required - Move from fixed height for labels to height 100% so we can support textareas - Improve docs a little bit, add ToC
commit sha ab6c6f9ebd5c0f08bc462b0ac348a4b7ab348fc4
Move some values to variables, switch from scaling font-size to scale, update transforms
push time in 4 days
pull request commenttwbs/bootstrap
Match container gutters with row gutters
Is this okay to get into an Alpha 2 in the next week or so, @twbs/css-review?
comment created time in 5 days
issue commenttwbs/bootstrap
https://github.com/twbs/bootstrap/pull/31285 is planned for off canvas, and https://github.com/twbs/bootstrap/pull/31681 is stubbed out but troublesome for horizontal collapse.
comment created time in 5 days
pull request commenttwbs/bootstrap
I wouldn't mind all three if that's alright by you! Definitely the button ones, those are honestly what sold me on this PR when I first looked at it :).
comment created time in 5 days
issue closedtwbs/bootstrap
Suggestion: ARIA list on Carousel
There has been discussion, and incorrectly implemented ARIA listbox was removed in issues #22061 and #22543 by @patrickhlauke
I would like to suggest the ARIA list https://www.w3.org/TR/wai-aria/roles#list and listitem https://www.w3.org/TR/wai-aria/roles#listitem roles to the .carousel-inner and .carousel-item.
Pull request to follow.
closed time in 5 days
thejimbirch
issue commenttwbs/bootstrap
Suggestion: ARIA list on Carousel
Closing as stale here as well since the PR was closed some time ago. https://github.com/twbs/bootstrap/pull/23722#issuecomment-463841121
comment created time in 5 days
pull request commenttwbs/bootstrap
Thinking I’d like to try to backport this to v4.
comment created time in 5 days
issue closedtwbs/bootstrap
toggle doesn't close the dropdown if there are no [data-toggle="dropdown"]
ver 4.1
I've created Dropdown in javascript
$(this.dropDownMenu).dropdown({
placement: 'bottom-start',
flip: false,
reference: this.filterInput
});
dropDownMenu <ul> element contains both dropdown dropdown-menu
first point: toggle method open it (btw dropdown class is vital there, without it plugin doesn't work - why?)
second point: toggle doesn't close it.
Through debugger I see this logic
// bootstrap dropdown code
var context = $$$1(toggles[i]).data(DATA_KEY);
var relatedTarget = {
relatedTarget: toggles[i]
};
if (!context) {
continue; // here we enter
}
// remove `show` class will be never passed.
I expecect that Dropdown could be opened and closed manually (through JS) - then requrements to have toggles is excessive (the same is true for dropdown class requirement - you use it to find dropdown-menu but if dropdown-menu by itself is an jquery element - it still should work )
closed time in 5 days
rpokrovskij
issue commenttwbs/bootstrap
toggle doesn't close the dropdown if there are no [data-toggle="dropdown"]
Docs state the requirement about the data attribute in a (hopefully obvious) callout. https://getbootstrap.com/docs/4.5/components/dropdowns/#via-javascript
https://github.com/twbs/bootstrap/commit/f3d0fee91ec30aa6cde08de821b06fd6f337a3a3
Beyond that, I don't think there are any planned changes to how dropdowns work here unless @Johann-S wants to revisit things.
comment created time in 5 days
issue commenttwbs/bootstrap
Import Bootstrap in Angular 6 with ng add
Thinking this is stale and not someone on our radar for v4 or v5 @Johann-S?
comment created time in 5 days
issue closedtwbs/bootstrap
The Bootstrap Carousel has role="listbox"
This doesn't appear to be a great use of the role. And if one can say a carousel is
"A widget that allows the user to select one or more items from a list of choices. "
As is described in the aria 1.1 spec, then each choice needs role="option". I'm seeing in the wild tons of these carousels without role="option" on the choices.
Personally, I think its a stretch to present it to assisitive technologies as such, and I would simply remove role="listbox".
closed time in 5 days
DavidMacDonald
issue commenttwbs/bootstrap
The Bootstrap Carousel has role="listbox"
Fixed back in #22405
comment created time in 5 days
issue closedtwbs/bootstrap
New 'Content' component feature
How many times have you come across a bunch of content within a <div> or an <article> tag with a bunch of <p>, <ul> and possibly even headings and thought to yourself if only there was a simple classname I can add to the div that would prevent me having to add specific classes to all of these elements?
This is an issue I've come across, and whilst I'm sure Bootstrap provides some base default styling, I'm not totally convinced that this is appropriate in most projects.
I was thinking this...
To add a new component under the 'Components' heading on the docs (https://getbootstrap.com/docs/4.1/getting-started/introduction/) called something like: 'Content'
The purpose of this component is to provide a simple method for styling elements within a div or article element, all the user would need to do is add a class called .content to their parent element, and elements within would be styled. I was thinking of adding support for the following HTML elements:
<p>paragraphs<ul>,<ol>and<dl>lists<h1>to<h6>headings<blockquote>quotes<em>,<b>and<strong>tags<table>with relevant child elements of a table
What's people's opinion on this?
closed time in 5 days
sts-ryan-holton
issue commenttwbs/bootstrap
New 'Content' component feature
Duplicate of #30177
comment created time in 5 days
issue closedtwbs/bootstrap
Why do you code "display-x" class types, as a separatad variables, instead of a more "robust and best practice" code using a map (as many other parts in bootstrap)? I think that using a map it would be easier to extend or remove display types...
In _variables.scss
$displays: (
1:(6rem, 300),
2:(5.5rem, 300),
3:(4.5rem, 300),
4:(3.5rem, 300),
);
In _types:
@each $index,$values in $displays {
.display-#{$index} {
@include font-size(#{nth($values,1)});
font-weight: #{nth($values,2)};
line-height: $display-line-height;
}
}
closed time in 5 days
afanjul
issue closedtwbs/bootstrap
Changed font-size-base distorts radio and check boxes (v5 alpha1)
MacOS High Sierra Safari/Chrome
I changed the SCSS variable $font-size-base to be 0.875rem
With this new font size base, form radio and check boxes are distorted, they are stretched horizontally.
https://codepen.io/matt_codez/pen/zYrjQWG
closed time in 5 days
iMattPro
issue commenttwbs/bootstrap
Changed font-size-base distorts radio and check boxes (v5 alpha1)
Closed by #31383.
comment created time in 5 days
issue closedtwbs/bootstrap
4.5.2: A firefox built-in full page screenshot moves bootstrap fixed navbar (down)
Example page to study https://getbootstrap.com/docs/4.5/getting-started/download/ which navbar behaviour normally relies on:
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
in this case
.bd-navbar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1071;
}
Setting this to position: absolute; for the screenshot only fixes the issue.
Is there anything we can do for having this fixed by default on (firefox) print/screenshot cases?
closed time in 5 days
ophian
issue commenttwbs/bootstrap
4.5.2: A firefox built-in full page screenshot moves bootstrap fixed navbar (down)
Unfortunately no, this is a known issue with some full page screenshot utilities that capture the viewport simply by scrolling it. Nothing we can do.
comment created time in 5 days
pull request commenttwbs/bootstrap
At some point I'd like us to also add those real life examples from the opening comment here. I think that would help explain and demonstrate the usefulness of these.
comment created time in 5 days
push eventmdo/github-buttons
commit sha 9660b4b53303aa70db4c72fa72b8fe71148b0276
deploy: 080cdfd38b19c8ebabe0c99550610192bc3674a5
push time in 5 days