profile
viewpoint
Mark Otto mdo GitHub San Francisco, CA http://mdo.fm Principal Design & Brand Architect at @GitHub. Creator of Bootstrap (@twbs). Previously at Twitter. Huge nerd.

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.

mdo/jekyll-snippets 548

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.

PullRequestReviewEvent
PullRequestReviewEvent

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

ffoodd

comment created time in 2 hours

CommitCommentEvent

PR opened twbs/bootstrap

Stub out a `.nav-scroll` component for horizontal scrolling navs css feature v5

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?

Screen Shot 2020-09-24 at 9 27 45 AM

+88 -0

0 comment

2 changed files

pr created time in 3 hours

create barnchtwbs/bootstrap

branch : nav-scroll

created branch 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.

celestehorgan

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?

celestehorgan

comment created time in 14 hours

issue closedtwbs/bootstrap

Resize examples screenshots

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

Resize examples screenshots

Closing as a duplicate of #30286 just to consolidate.

XhmikosR

comment created time in 16 hours

pull request commenttwbs/bootstrap

v5: Floating labels

With the latest changes from @ffoodd's PR, plus some more tweaks, we've got a cleaned up Legacy Edge setup.

Screen Shot 2020-09-23 at 4 34 41 PM

mdo

comment created time in 20 hours

push eventtwbs/bootstrap

Jaume Sala

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 <xhmikosr@gmail.com>

view details

dependabot[bot]

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] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

view details

dependabot[bot]

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] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

dependabot[bot]

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] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

Mark Otto

commit sha fe77208a01b9b41ce13a9c68139d9f1618c48ec9

Add new variable for -padding-x

view details

Mark Otto

commit sha 99777662c678341b0220630c05a9526faab36c95

Rename .close to .btn-close, replace times sign with background SVG, update focus state

view details

Mark Otto

commit sha 1af79bbc5267428af9fcb4a8fc9e6ab0b30328f4

Increase width of focus styles so it's more pixel perfect out of the box

view details

Mark Otto

commit sha 1e69503a7367669f700c18c79bd7ba525fee3361

Increase margin in button examples to better highlight focus styles

view details

Mark Otto

commit sha 95f81f833153f8680328ff15c88147e96b0525ac

Add opacity variables, set opacity on disabled state

view details

Mark Otto

commit sha 57fc28a8548c88d7e79224e9f51611c3d5b278e2

Add details to the Migration page

view details

Mark Otto

commit sha 4778deac023a0e359fe5321eb431f00b5f2b8c83

Tweak sizing and alignment of .btn-close in modal headers

view details

Mark Otto

commit sha 67f33a06c7c0a7431981b91e27f0f58b29fd9724

Update some close button examples

view details

Mark Otto

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

view details

Mark Otto

commit sha be6a150bbfe939ddab1a311aecb7a5dcc8267c97

Update .btn-close-white to use grayscale() filter too for better focus styles

view details

Mark Otto

commit sha e838accbc4d4091cf99ee6186236f8d74b8d4dbc

Double the brightness for improved focus contrast

view details

Mark Otto

commit sha c0fe38364a8d5fb4678897d751857ea6cde6e5db

Add more variables, add a comment for the 3

view details

Martijn Cuppens

commit sha 5280771883561065a1641f46f2ee56a4eaafae4f

Input group addon sass customization options (#31729)

view details

Mark Otto

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

view details

Mark Otto

commit sha fe38a85839056d951d37fa3092eb5125b50a678d

Rename the classes and docs page, update everything accordingly

view details

Mark Otto

commit sha 3b8c17029f605726bdb65bd277ac142aec0d37ae

Move styles to docs CSS

view details

push time in 20 hours

push eventtwbs/bootstrap

Mark Otto

commit sha d4e80f1da09398562d14280ad03922ede26bc81e

Add variable for .carousel-dark filter

view details

push time in 20 hours

push eventtwbs/bootstrap

Gaël Poupard

commit sha 5f5f1cbcff31d970f8f63a01757e5c916f77727a

Typo in About / Overview

view details

Mark Otto

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.

view details

Mark Otto

commit sha 65d130fbd85abd8143c553e75e24bc5a11d36877

Mention the quotes requirement in the docs too

view details

Rohit Sharma

commit sha 94c0f12329820494c39fe7c213866620416d0b38

Add getInstance method in the docs for tooltip (#31636) Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

XhmikosR

commit sha 7571fe73b619628c31eae8edb63d719ede9a900b

docs: mention our bundle file clearly. Note that we are using the bundle file already in our docs since 787441d.

view details

XhmikosR

commit sha 85d00e6d85623d5a4a0ee4776e3842da7cf874fe

Update site/content/docs/5.0/getting-started/download.md Co-authored-by: Mark Otto <markd.otto@gmail.com>

view details

Mark Otto

commit sha e3b7880abf2ab8f7ed35365ae530a63e63c309ba

Rewrite quick start JS sections in getting started page so things are more clearly organized

view details

Mark Otto

commit sha 512242943cc8dd149f1a338d6f2940cc0926a7de

Rremove separate JS includes from homepage for simplicity's sake, but include a link to doing it separately

view details

XhmikosR

commit sha 800952cef02af97daa43947ac74601384e9ba63e

Remove unnecessary nesting selectors

view details

XhmikosR

commit sha 400b8a6754023365c9fe4816cd7026bf556af7b2

Add spaces after commas

view details

XhmikosR

commit sha 4d6dd313792f9dcb0c61c5722555ff59d5fff288

Update Stylelint rules Enable `scss/selector-no-union-class-name`

view details

dependabot[bot]

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] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

view details

dependabot[bot]

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] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

dependabot[bot]

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] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

Gaël Poupard

commit sha 390ce245cc8612707d6bd136214ebfbc2860e5c6

docs(scrollspy): mention keyboard access and apply tabindex=0 (#31578)

view details

kyletsang

commit sha fec511da025c39b40fa94da1c047688fa95dd577

Docs: Fix vertical align link

view details

XhmikosR

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

view details

Matthew Orahood

commit sha 26c1fbe839482bf152cefcf57aa8797549fd8387

Update webpack.md potcss-loader now uses the `postcssOptions` key. https://www.npmjs.com/package/postcss-loader

view details

XhmikosR

commit sha 4e9a29e47ae776064b5afe931a347d61a4390451

Update webpack.md Format snippets

view details

Jaume Sala

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 <xhmikosr@gmail.com>

view details

push time in a day

push eventtwbs/bootstrap

Mark Otto

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

view details

Mark Otto

commit sha fe38a85839056d951d37fa3092eb5125b50a678d

Rename the classes and docs page, update everything accordingly

view details

Mark Otto

commit sha 3b8c17029f605726bdb65bd277ac142aec0d37ae

Move styles to docs CSS

view details

Mark Otto

commit sha 73e56404050fc13a5da3bb031fba0980406e7e6c

Add example of responsive behavior for aspect ratios

view details

Mark Otto

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

view details

push time in a day

push eventtwbs/bootstrap

Mark Otto

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

view details

Mark Otto

commit sha a690a67c7c57061ae74ad2d0d7714710ef216605

Forgot to divide by 2

view details

push time in a day

delete branch twbs/bootstrap

delete branch : redo-responsive-embeds

delete time in a day

PR merged twbs/bootstrap

Match container gutters with row gutters css no-backport-to-v4 v5

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

+6 -4

3 comments

2 changed files

mdo

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

Updates responsive embeds with new class names and CSS variables css no-backport-to-v4 v5
  • 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.


Screen Shot 2020-09-21 at 2 15 25 PM

Screen Shot 2020-09-21 at 2 15 30 PM

+152 -105

5 comments

9 changed files

mdo

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

Mark Otto

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

view details

push time in a day

PullRequestEvent

PR closed twbs/bootstrap

Reviewers
Updates responsive embeds with new class names and CSS variables css no-backport-to-v4 v5
  • 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.


Screen Shot 2020-09-21 at 2 15 25 PM

Screen Shot 2020-09-21 at 2 15 30 PM

+128 -81

5 comments

8 changed files

mdo

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!

mdo

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>&nbsp;&nbsp;&emsp;&darr;</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; bs-spacing

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 sm resolution if I use ml-n3 instead of ml-sm-n3 class.

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.

hashnimmo

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

ValGeorgiev

comment created time in 2 days

issue closedtwbs/bootstrap

Add Negative margin

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

Add Negative margin

You're more than welcome to do that yourself :).

ExpertHasan

comment created time in 2 days

issue closedtwbs/bootstrap

carousel

please add swipe slider in bootstrap latest version for smartphones

Thank you

closed time in 2 days

kunal5007k

push eventtwbs/bootstrap

Mark Otto

commit sha 99777662c678341b0220630c05a9526faab36c95

Rename .close to .btn-close, replace times sign with background SVG, update focus state

view details

Mark Otto

commit sha 1af79bbc5267428af9fcb4a8fc9e6ab0b30328f4

Increase width of focus styles so it's more pixel perfect out of the box

view details

Mark Otto

commit sha 1e69503a7367669f700c18c79bd7ba525fee3361

Increase margin in button examples to better highlight focus styles

view details

Mark Otto

commit sha 95f81f833153f8680328ff15c88147e96b0525ac

Add opacity variables, set opacity on disabled state

view details

Mark Otto

commit sha 57fc28a8548c88d7e79224e9f51611c3d5b278e2

Add details to the Migration page

view details

Mark Otto

commit sha 4778deac023a0e359fe5321eb431f00b5f2b8c83

Tweak sizing and alignment of .btn-close in modal headers

view details

Mark Otto

commit sha 67f33a06c7c0a7431981b91e27f0f58b29fd9724

Update some close button examples

view details

Mark Otto

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

view details

Mark Otto

commit sha be6a150bbfe939ddab1a311aecb7a5dcc8267c97

Update .btn-close-white to use grayscale() filter too for better focus styles

view details

Mark Otto

commit sha e838accbc4d4091cf99ee6186236f8d74b8d4dbc

Double the brightness for improved focus contrast

view details

Mark Otto

commit sha c0fe38364a8d5fb4678897d751857ea6cde6e5db

Add more variables, add a comment for the 3

view details

push time in 2 days

delete branch twbs/bootstrap

delete branch : btn-close

delete time in 2 days

PR merged twbs/bootstrap

Revamp close button component css no-backport-to-v4 v5

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 .close to .btn-close for more specific class name
  • Replaced inline &times; 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 .2em to .25em for a more pixel perfect rendering
  • Adds .btn-close-white variant for darker backgrounds.

Here's a preview of the default and disabled styles, as well as a focused and disabled style.

Screen Shot 2020-09-13 at 7 12 22 PM

Screen Shot 2020-09-13 at 7 12 29 PM

Screen Shot 2020-09-13 at 7 47 56 PM


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/

+118 -153

6 comments

11 changed files

mdo

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) :(

image

closed time in 2 days

raqibjs

issue closedtwbs/bootstrap

Rename close icon class to btn-close

Imo:

  1. close name 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 use btn btn-secondary <icon-name>, If my icon is named close the button will get a lot of unwanted styles.
  2. Close icon's use-case is generally a button, so why not btn btn-close?

closed time in 2 days

alecpl

issue closedtwbs/bootstrap

[feature] toast-header .close

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

Mark Otto

commit sha f407d32134c8e6b09644c12fa51af56e5a135ce8

Add example of responsive behavior for aspect ratios

view details

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.

mdo

comment created time in 2 days

push eventtwbs/bootstrap

Mark Otto

commit sha 8ae812665590453c53e6827057d2408329085689

Rename the classes and docs page, update everything accordingly

view details

Mark Otto

commit sha cf52de6387ed1fbaa15ad234083f2d67e2ed5875

Move styles to docs CSS

view details

push time in 2 days

issue closedtwbs/icons

Translate icon

Hi,

It would be nice to have a Translate icon like image

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

Translate icon

Duplicate of #168

pierrebaronqumu

comment created time in 2 days

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.

pierrebaronqumu

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?

mdo

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.

mdo

comment created time in 2 days

PullRequestReviewEvent

push eventtwbs/bootstrap

Mark Otto

commit sha c05bc1b4257bbf929b555f330e6e302e804e0b42

Add more variables, add a comment for the 3

view details

push time in 2 days

pull request commenttwbs/bootstrap

Revamp close button component

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.

mdo

comment created time in 2 days

push eventtwbs/bootstrap

Mark Otto

commit sha fe77208a01b9b41ce13a9c68139d9f1618c48ec9

Add new variable for -padding-x

view details

push time in 2 days

delete branch twbs/bootstrap

delete branch : dropdown-menu-padding

delete time in 2 days

PR merged twbs/bootstrap

Add new variable for $dropdown-padding-x backport-to-v4 css v5

Adds an explicit new variable for $dropdown-padding-x so folks can more easily customize the menu's appearance.

+2 -1

0 comment

2 changed files

mdo

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!

TheNewSound

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?
TheNewSound

comment created time in 3 days

push eventtwbs/bootstrap

Hiws

commit sha 7acf586d3efa9b2bad6a93d81c7cdc3560de6cdf

Docs: fix typo (#31106) * Fixes a typo so it displays the correct px's. * Update gutters.md Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

Patrick H. Lauke

commit sha edbcc401c28e539ecdcf3c49c7ef2a74d0c28ebd

Change whitelist to allowlist (#31066) Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: Mark Otto <markd.otto@gmail.com>

view details

Quy

commit sha d3aa909c923428c08ce75a31a7500fadd5365ade

Fix links to gutters page (#31116)

view details

Mattonit

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 <xhmikosr@gmail.com>

view details

Mark Otto

commit sha 9ca811eed5939f99cf5f71eb7a29141e878cf9f8

Fixes #31113 (#31120)

view details

Mark Otto

commit sha 806f64e162d80e64257eb325daf3867d0ff52770

Correctly document how to add to Sass maps (#31107) Fixes #31089. Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

Patrick H. Lauke

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

view details

XhmikosR

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

view details

XhmikosR

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

view details

Patrick H. Lauke

commit sha 02ff387daa3a6e684210da7ee47ad988a2352aac

Darken dropdown divider (#31131) currently, `$gray-200` is practically imperceptible. switch to reusing `$dropdown-border-color`.

view details

Gaël Poupard

commit sha 9c320df6529e27a0fe358fdaf18adc02d36d1ba4

Floating labels improvements (#30966) * docs(example): floating-labels' better Edge fallback * docs(example): refactor floating-labels' CSS

view details

Jorge González

commit sha d33a560dd6cad89dc8e54a4b6e4fbea73255ab5c

Fix table separator typo (#31162)

view details

Shohei Yoshida

commit sha c140347bd26851c79e76766ae381e91c159b3f48

Fix scrollable modal (#31151) Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

Mark Otto

commit sha ca22e72411add513e0e819bf100423d5d84d2067

Remove backdrop-filter from docs subnav Fixes #31163.

view details

Mark Otto

commit sha 9f173aeff363b6b535e5d0956f210107456c2904

Remove backdrop-filter from toasts

view details

Shohei Yoshida

commit sha fb4efb49ea7f5ebe36e67a457b8f713b2c5b2bb4

Prevent overflowing static backdrop modal animation (#30326) Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

XhmikosR

commit sha 786208ea15626ebc7769375e4b98bbb6fcd3428f

BrowserStack: stop testing on latest Edge. (#31125) It's Chromium-based so it seems redundant.

view details

dependabot-preview[bot]

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 <xhmikosr@gmail.com>

view details

dependabot[bot]

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/lockfile-lint@4.3.6...lockfile-lint@4.3.7) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

view details

dependabot[bot]

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] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>

view details

push time in 3 days

PR opened twbs/bootstrap

Add new variable for $dropdown-padding-x backport-to-v4 css v5

Adds an explicit new variable for $dropdown-padding-x so folks can more easily customize the menu's appearance.

+2 -1

0 comment

2 changed files

pr created time in 3 days

create barnchtwbs/bootstrap

branch : dropdown-menu-padding

created branch time in 3 days

pull request commenttwbs/bootstrap

Revamp close button component

Maybe the btn-close-white focus border color could be a little whiter?

Added brightness(200%) to tackle that.

mdo

comment created time in 3 days

push eventtwbs/bootstrap

Mark Otto

commit sha f08257d09d1f7cf3c6a9cc71bf6471bb2417f0ed

Rename .close to .btn-close, replace times sign with background SVG, update focus state

view details

Mark Otto

commit sha c4c29dc5cc97d5130b8004dc17ee0581c1358e44

Increase width of focus styles so it's more pixel perfect out of the box

view details

Mark Otto

commit sha 81280a5a793e11b5af15643604bfe728f21011d5

Increase margin in button examples to better highlight focus styles

view details

Mark Otto

commit sha 43726789c3274f1e617bb8aecfee61b2ddd1d8b3

Add opacity variables, set opacity on disabled state

view details

Mark Otto

commit sha 8c27f050b3b05f40c3ad558241e4104cb88339cc

Add details to the Migration page

view details

Mark Otto

commit sha c2b69cc4eb0d061a0b34b0cd9a824284f1de4582

Tweak sizing and alignment of .btn-close in modal headers

view details

Mark Otto

commit sha f793df4b8d4900407c608d02d19ecf56319a2de0

Update some close button examples

view details

Mark Otto

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

view details

Mark Otto

commit sha bfb22e498efc72e8f5dd6b0feee6260159584c62

Update .btn-close-white to use grayscale() filter too for better focus styles

view details

Mark Otto

commit sha 6f65d369a16f3a1039571984c0e365dcb66053a0

Double the brightness for improved focus contrast

view details

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!

seb-witt

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.

seb-witt

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

  1. empty element
  2. button click -> hide collapse
  3. ajax, on error listen for hidden event -> show collapse
  4. correct error, button click -> hide error
  5. 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.

ValGeorgiev

comment created time in 3 days

PR opened twbs/bootstrap

Updates responsive embeds with new class names and CSS variables css no-backport-to-v4 v5
  • 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.


Screen Shot 2020-09-21 at 2 15 25 PM

Screen Shot 2020-09-21 at 2 15 30 PM

+57 -40

0 comment

5 changed files

pr created time in 3 days

create barnchtwbs/bootstrap

branch : redo-responsive-embeds

created branch 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 .collapse class 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.

michalhorak

comment created time in 3 days

issue closedtwbs/bootstrap

Color issue

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

Color issue

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/

SankarBala

comment created time in 3 days

PR closed twbs/bootstrap

Create test
+1 -0

1 comment

1 changed file

caocaoyin

pr closed time in 4 days

pull request commenttwbs/bootstrap

Create test

Don't test on public repos that automatically notify thousands of people in the process.

caocaoyin

comment created time in 4 days

pull request commenttwbs/release

Attempt to schedule releases

Removed the SVG and JSON since we pulled those from the readme.

mdo

comment created time in 4 days

push eventtwbs/release

Mark Otto

commit sha 4ff11f85c6537fcdaf497b08b01ffd6738983a26

remove the schedule json and svg

view details

push time in 4 days

push eventtwbs/bootstrap

Jaume Sala

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 <xhmikosr@gmail.com>

view details

push time in 4 days

PR merged twbs/bootstrap

Reviewers
Extra position utilities css feature no-backport-to-v4 v5

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 vertical top position
  • left - for the horizontal left position
  • bottom - for the vertical bottom position
  • right - for the horizontal right position

Where position is one of:

  • 0 - for 0 edge position
  • 50 - for 50% edge position
  • 100 - for 100% edge position

Screenshot 2020-07-11 at 18 39 05

<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 - for 50% horizontal translation
  • nx - for -50% horizontal translation

Where y-axis is one of:

  • y - for 50% vertical translation
  • ny - for -50% vertical translation

Screenshot 2020-07-11 at 18 39 14

<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.

Screenshot 2020-07-11 at 18 56 50

<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>

Screenshot 2020-07-11 at 18 57 00

<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>
+140 -1

9 comments

4 changed files

jaumesala

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?

munzirstudio

comment created time in 4 days

pull request commenttwbs/bootstrap

v5: Floating labels

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!

mdo

comment created time in 4 days

push eventtwbs/bootstrap

Matthew Orahood

commit sha 26c1fbe839482bf152cefcf57aa8797549fd8387

Update webpack.md potcss-loader now uses the `postcssOptions` key. https://www.npmjs.com/package/postcss-loader

view details

XhmikosR

commit sha 4e9a29e47ae776064b5afe931a347d61a4390451

Update webpack.md Format snippets

view details

Mark Otto

commit sha db1d8383b0d136d14824687fd294eea6a26226f4

v5: Promote floating labels example to component - Adds new .form-floating - Stubs out basics of a docs page - Removes existing Example

view details

Mark Otto

commit sha 3d4a0abf3e1ebcd6ef806f4a512d80b31a23d609

Add section to forms overview

view details

Mark Otto

commit sha 8b36fd8d54dc151552328c2be759a0bea244c209

Drop vendor prefixes

view details

Mark Otto

commit sha f91f8ddac7bf0688429947f73ad41319354f6171

More nesting

view details

Mark Otto

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

view details

Mark Otto

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

view details

Mark Otto

commit sha ab6c6f9ebd5c0f08bc462b0ac348a4b7ab348fc4

Move some values to variables, switch from scaling font-size to scale, update transforms

view details

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?

mdo

comment created time in 5 days

issue commenttwbs/bootstrap

Horizontal collapse

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.

vanillajonathan

comment created time in 5 days

pull request commenttwbs/bootstrap

Extra position utilities

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 :).

jaumesala

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

thejimbirch

comment created time in 5 days

pull request commenttwbs/bootstrap

Add side modals

Thinking I’d like to try to backport this to v4.

mdo

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.

rpokrovskij

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?

bastienmoulia

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

DavidMacDonald

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

sts-ryan-holton

comment created time in 5 days

issue closedtwbs/bootstrap

Type display as map

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 commenttwbs/bootstrap

Type display as map

Was done in #30568

afanjul

comment created time in 5 days

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.

Screen Shot 2020-07-09 at 1 09 02 PM Screen Shot 2020-07-09 at 1 09 10 PM

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.

iMattPro

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.

ophian

comment created time in 5 days

pull request commenttwbs/bootstrap

Extra position utilities

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.

jaumesala

comment created time in 5 days

PullRequestReviewEvent

push eventmdo/github-buttons

XhmikosR

commit sha 9660b4b53303aa70db4c72fa72b8fe71148b0276

deploy: 080cdfd38b19c8ebabe0c99550610192bc3674a5

view details

push time in 5 days

more