This is the primary pull request for developing and shipping Bootstrap 4. You should know a few things coming into this:
Everything here should be considered a work-in-progress (we're in the alpha release stage).
The list of todos will change as we get closer to shipping.
There is no specific ship date for the final v4 release at this time.
Nothing is guaranteed to be part of v4 until our first beta release.
Should you wish to contribute, please open small pull requests for specific open tasks to the v4-dev branch.
Have a feature request? Check here first, then open a new issue if it hasn't been addressed below.
Heads up! This thread has been locked to contributors. Please use issues for questions, comments, and feedback about particular changes. We'll cross reference them here as they come up.
Replace media queries with media query mixins per #13014.
Replace standard width uses
Replace all @grid-float-breakpoint uses
Modularize all our global resets into a single SCSS file called Reboot.
Update build tools to create custom compiled builds of Bootstrap's CSS and JS instead of using a web-based Customizer.
Everything (default)
Everything with flexbox enabled
Just the grid
Just the Reboot
Find an easy-to-use, performant spinner to include with Bootstrap.
We also have some super ambitious nice to haves:
Add a script to publish individual components to individual repos?
Move to Gulp from Grunt?
Form validation polyfill?
What about v3?
We will continue to support Bootstrap 3, but only for critical bug fixes and documentation updates. No new features will be added, and nothing will be removed. If you need IE8 support, Bootstrap 3 has your back (or you can go out of your way to re-implement it in v4).
Be aware that we will set a reasonable date in the future to completely discontinue v3 support.
Feature breakdown
Here's the breakdown by feature/component of the updates we've made to v4, as well as some that are still todo.
CSS
Global
Drop all previously deprecated sizing variables.
Switch to rems as the main sizing unit.
Drop separate theme file for variable-mixin customization (e.g., set @border-radius: true and get rounded corners).
Preface all @import-ed filenames with _ (e.g., _dropdown.scss)
Single tense (nearly) all filenames
Remove most > selectors and replace with un-nested classes.
Dropdowns
Nav (base, tabs, and pills)
Panels (done, since we dropped the component)
Carousel
Remove IE8 CSS hacks.
More flexibility when using .disabled on nav links, per #14291.
Move all element selectors and reset styles to a single "reboot" SCSS file, thereby creating our own extension of Normalize and improving modularity of our class-based components.
- Rather than use CSS hacks, let's avoid needing to hack anything
- Creates a new Reboot entry to simply reset the appear of the temporal inputs, thereby avoiding the problem entirely
- Less than ideal for conveying affordance on iOS, but given bugginess of the input itself, seems a decent tradeoff
- Drops the experiment I had going for `box-shadow`-powered borders
- Reinstates regular `border` using existing variables
Fixes #19097 and #19143. Nullifies #19828.
All checks have passed
3 successful checks
Details
continuous-integration/travis-ci/pr
— The Travis CI build passed
Details
continuous-integration/travis-ci/push
— The Travis CI build passed
- Move disabled radio and checkbox styles to Reboot
- Collapse .radio and .checkbox into single class, .form-check
- Collapse .radio-inline and .checkbox-inline into single class, .form-check-inline
- Require classes for sub-elements in both new classes
Some checks were not successful
2 failing and 1 successful checks
Details
continuous-integration/travis-ci/pr
— The Travis CI build failed
Details
continuous-integration/travis-ci/push
— The Travis CI build failed
This avoids applying the reset to named anchors/placeholder links (links
without an `href`) that have explicitly been made keyboard-focusable
(using `tabindex`). This is not fool-proof - it's not
easy/straightforward to check for the actual `tabindex` value itself, to
ensure it's positive, not will this apply if a link has been "blessed"
with `tabindex` via JS. However, this should catch most common uses (and
gives a reasonably valid way around the issue for developers who, for
whatever reason, DO want to use links without `href` - as side effect,
it forces best practice of at least ensuring these links can also be
focused with the keyboard)
All checks have passed
2 successful checks
Details
continuous-integration/travis-ci/pr
— The Travis CI build passed
- Really we didn't need to do any of that strip units stuff to generate six new variables, two for each button size
- Using sibling selectors, we can target those split button dropdown toggles using the .dropdown-toggle-split class, and adjust padding and margin as needed
- Now, we nuke the margin-left from the ::after generated caret and tighten up the padding so that those split toggles don't look huge next to their main button
Refs #19990
Continues the degruntification process.
Also removes mq4-hover-shim for now,
since it doesn't yet implement the standard PostCSS plugin interface.
Some checks haven’t completed yet
1 pending and 1 successful checks
hound
— Hound is busy reviewing changes...
Details
continuous-integration/travis-ci/push
— The Travis CI build passed
Previously, when running the docs locally, the site, rooted at:
http://localhost:9001/
would reference docs assets using relative URLs such as:
/../assets/js/vendor/anchor.min.js
which is equivalent to:
http://localhost:9001/../assets/js/vendor/anchor.min.js
which is nonsense, since the root directory has no parent directory.
Apparently browsers silently ignore this extra '..', hence why this wasn't noticed until now.
But if you adjust Jekyll's `baseurl` setting, this mistake causes incorrect URLs to get generated.
This commit corrects the problem by removing the extra '../' from the paths.
These paths are also referenced in the Gruntfile, where the fix actually allows us to simplify the code.
Previously, in the Gruntfile, we were doing, e.g.:
path.join('./docs/assets', '../assets/js/vendor/anchor.min.js')
which calculates to:
./docs/assets/../assets/js/vendor/anchor.min.js
which can be simplified to:
./docs/assets/js/vendor/anchor.min.js
So we can remove the '/assets' suffix from the left argument
and the '../' prefix from the right argument
and still obtain the same result.
Some checks haven’t completed yet
1 pending and 1 successful checks
hound
— Hound is busy reviewing changes...
Details
continuous-integration/travis-ci/push
— The Travis CI build passed
* bower.json, package.json: Extend jQuery version ranges to include v3
* NuGet: Bump jQuery to v3.0.0.1
* Docs+Examples: Update jQuery to v3.0.0
* Use jQuery v3.0.0 for JS unit tests
* Update jqueryVersionCheck to allow jQuery v3.x.x
Some checks haven’t completed yet
1 pending and 1 successful checks
hound
— Hound is busy reviewing changes...
Details
continuous-integration/travis-ci/push
— The Travis CI build passed
SCSS-Lint 0.49.0 modifies Shorthand linter to report lint if a shorthand
of a length not specified in the allowed_shorthands option is used.
New defaults include "4" in the list of allowed shorthands, so we are changing our configuration accordingly.
Ref: brigade/scss-lint@e283d16
Some checks were not successful
1 failing and 1 pending checks
Details
continuous-integration/travis-ci/push
— The Travis CI build failed
Bootstrap 4
This is the primary pull request for developing and shipping Bootstrap 4. You should know a few things coming into this:
v4-devbranch.Heads up! This thread has been locked to contributors. Please use issues for questions, comments, and feedback about particular changes. We'll cross reference them here as they come up.
Read the v4 alpha announcement blog post for more details on these changes and some of the open questions we still have to answer.
Big picture
We've got a number of big changes coming in v4. To name a few:
~480pxtier.@grid-float-breakpointusesWe also have some super ambitious nice to haves:
What about v3?
We will continue to support Bootstrap 3, but only for critical bug fixes and documentation updates. No new features will be added, and nothing will be removed. If you need IE8 support, Bootstrap 3 has your back (or you can go out of your way to re-implement it in v4).
Be aware that we will set a reasonable date in the future to completely discontinue v3 support.
Feature breakdown
Here's the breakdown by feature/component of the updates we've made to v4, as well as some that are still todo.
CSS
Global
rems as the main sizing unit.@border-radius: trueand get rounded corners).@*-smallto@*-sm, etc. (twbs/bootstrap#10352)@import-ed filenames with_(e.g.,_dropdown.scss)>selectors and replace with un-nested classes..disabledon nav links, per #14291._custom.sccssfor easier, built-in variable overrides?Variables and mixins
.sr-onlya real mixin per #13583.@extends in favor of mixins in more places (namely clearfixes).Grid system
max-widthfor.container? (twbs/bootstrap#11436)class*="col-").Type
dls (twbs/bootstrap#11639).help-blockfor existing utility classes and more flexible HTML #13267.dl-horizontalto use grid classes instead of it's fixed-width dimensions from v3.Code
<pre>elements per #13917.<pre>elements relatively unstyled (no more gray background and stuff).Utilities
!importantfrom.show&.hide(twbs/bootstrap#9881)hidevs.hiddennaming inconsistency (twbs/bootstrap#11541)_type.lessto_utilities.less.@importstack to work with every component possible (instead of individual state classes)?Tables
.table-condensedto.table-sm(twbs/bootstrap#10987).table-dangerinstead oftd.dangerForms
Labels
labelstyles to a class so that they're not global, per twbs/bootstrap#13141Inputs
min-heighton inputs since we can drop IE8 (IE8 and box-sizing don't mix well)?Validation and states
.has-errorto.has-dangerfor uniformity.Layout
.form-horizontalclass entirely in favor of just grid classes.Misc
<legend>stylingButtons
.btn-outlineButton groups
Glyphicons
Alerts
<h4>as alert heading (twbs/bootstrap#11450)Breadcrumb
Carousel
carousel-prefix to Carousel's.next,.prev,.left,.rightclassesDropdown
.dropdown-menu.pull-rightstyles. We have.dropdown-menu-right/-leftnow.Input groups
:first-childand:last-childfor-of-typeselectors: #12687.Jumbotron
.display-1).Labels
Modal
bodypadding, but rather the padding on a specific set of classes.Nav
>selectors.Navbar
Panels
Popover/tooltip
.tooltip-arrowvs. Popover's.arrow:before/:after.Progress
<progress>variation to ensure animated backgrounds can still be used.List group
a.list-group-itemto.list-group-item-linkJS
Global
hide.bs.tooltip->bs.tooltip.hide, etc.) (twbs/bootstrap#10848).js-classes ordataattributes for JS behavior only per #14431BSor$.BS)BS.Popover)BS.utils)#foo.baroriginalEventproperty: #15393tooltip.jsandall-bootstrap-plugins.min.jsare loaded.container: 'body'is currently required)MutationObserverto improve tooltips (#15632) and modals (#16320)Affix
position: stickypolyfill?Alert
Buttons
.btn-groupsto support my second point.changeevent of associated<input>s? #13261Carousel
Collapse
toggleoption to false when initializing: #12254 (comment)Dropdowns
containeroption) to prevent a number of parent cropping issues (due tooverflow). twbs/bootstrap#10017, twbs/bootstrap#12122, twbs/bootstrap#13214, #13477Scrollspy
Tab
Tooltips
display: noneper #14155Popovers
Docs
compatibility= 'ie8'from clean-css>= 31(latest ESR). See #14981.Customizer
Examples