Skip to content
GitLab

v4

Closed Mark Otto requested to merge v4-dev into master

Bootstrap 4

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.

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:

  • Move from Less to SCSS.
  • Refactor grid system to utilize five tiers (xs, sm, md, lg, and xl), adding a ~480px tier.
  • Remove all previously deprecated features, classes, and variables.
  • Drop IE8 support.
  • Replace wells, thumbnails, and panels with a new component, cards.
  • Drop Glyphicons.
  • Add flexbox variation for grid and components, flipping between them via variables.
  • Add some custom form controls (from http://wtfforms.com).
  • Replace media queries with media query mixins per https://github.com/twbs/bootstrap/pull/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).
  • Rename all variables from @*-small to @*-sm, etc. (twbs/bootstrap/issues/10352)
  • Reconsider vertical rhythm (twbs/bootstrap/issues/11601)
  • 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 https://github.com/twbs/bootstrap/issues/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.
  • Use color variables consistently: https://github.com/twbs/bootstrap/issues/14840
  • Consider implementing a _custom.sccss for easier, built-in variable overrides?

Variables and mixins

Grid system

  • Drop already deprecated device-based container classes.
  • Change grid container widths to not include outer gutters for even numbered grids (when working in pixels).
  • Add a 480px grid breakpoints (twbs/bootstrap/issues/10203 , twbs/bootstrap/issues/11230 , twbs/bootstrap/issues/10866)
  • Switch back to max-width for .container? (twbs/bootstrap/issues/11436)
  • Unique grid gutter widths per break point, #11564 (closed). Done! But only with the semantic mixins.
  • Customizable grid gutters for each breakpoint, per #11873 (closed).
  • Remove remaining uses of column-related wildcard class selectors (e.g. class*="col-").
  • Grid cols and containers as better multiples of 12? https://github.com/twbs/bootstrap/issues/13120
  • #11322 (closed) & friends: make grid mixins more flexible/reusable

Type

Code

Utilities

  • Rename and/or remove !important from .show & .hide (twbs/bootstrap/issues/9881)
  • Address hide vs. hidden naming inconsistency (twbs/bootstrap/issues/11541)
  • Alternate responsive utility strategy with ranges: https://github.com/twbs/bootstrap/issues/12443
  • Rename skip nav classes: https://github.com/twbs/bootstrap/issues/13457
  • Finna fix that double clearfix bug: https://github.com/twbs/bootstrap/issues/13538.
  • Rename float and text alignment classes so they're more RTL-friendly: #16419 (closed)
  • Break out Utilities docs into separate sections. Use one page per family of utilities (e.g., text, spacer, etc).
  • Add some examples for spacing utility docs.
  • Refactor spacer utilities Sass to include a variable-based multiplier instead of a hard-coded one.
  • Move all text and background utility classes from _type.less to _utilities.less.
  • Move to the end of the @import stack to work with every component possible (instead of individual state classes)?

Tables

  • Rename .table-condensed to .table-sm (twbs/bootstrap/issues/10987)
  • Rewrite table contextual classes to not be markup specific—e.g,. use .table-danger instead of td.danger
  • Table and alignment classes, per twbs/bootstrap/issues/12237
  • Remove grid system sizing. Keep it for non-tabular, truly grid-based implementations. No more mixing.

Forms

Labels

Inputs

Validation and states

  • Consider changing .has-error to .has-danger for uniformity.
  • Fix form field validation state color variables: #12731 (closed)
  • Form validation states on individual fields, per #12032 (closed) and #14735 (closed)
  • More/newer/better validation states
  • Disabled fieldsets: twbs/bootstrap#11668

Layout

Misc

  • Remove most of the <legend> styling
  • Sync icons between custom forms and form validation states.

Buttons

  • Finalize new styles, especially for the secondary button class.
  • Consider replacing .active with > input:checked (etc.) in the Buttons plugin styles to address #11535 (closed).
  • Add .btn-outline

Button groups

  • Add separate class for split button vs single button dropdowns—perhaps .btn-group-segmented? Hopefully to avoid shit like #10876 (closed).

Glyphicons

  • Remove Glyhpicons
    • Add instructions for implementing Font Awesome
    • Add instructions for implementing Octicons
    • Add instructions for implementing a third option, if there is one?

Alerts

  • Stop hard coding <h4> as alert heading (twbs/bootstrap/issues/11450)

Breadcrumb

Carousel

  • Clean up carousel controls (twbs/bootstrap/issues/10831)
  • Add carousel- prefix to Carousel's .next,.prev,.left,.right classes

Dropdown

  • Make carets from pseudo selectors (generated content). (Nullifies twbs/bootstrap/pull/11142)
  • If dropdowns aren't getting autopositioning, add new dropdown alignment classes—left and right, and perhaps for top and bottom too?
  • Drop the deprecated .dropdown-menu.pull-right styles. We have .dropdown-menu-right/-left now.

Input groups

Jumbotron

  • Abstract some jumbotron styles-e.g. type sizes—to new utility classes (like .display-1).
  • Turn remaining Jumbotron styles—large gray background and large padding—into more utilities?

Labels

Modal

Nav

  • Rewrite nav components to use classes over > selectors.
  • Drop justified nav variations.
  • Rewrite tabs and pills to be mobile-first: #7540 (closed)

Navbar

  • Remove the autocollapsing behavior of the v3 navbar.
  • Provide examples of using a custom hidden area with a configurable navbar toggler button.
  • Rewrite navbar alignment classes to avoid fubared navbar-right stuff: https://github.com/twbs/bootstrap/issues/12951.
  • Add drawer variation? #9481 (closed)
  • Expose proper API for "opening one closes all others" accordion behavior (#16360 (closed))

Panels

  • Drop for cards.

Popover/tooltip

  • Fix inconsistency?: .tooltip-arrow vs. Popover's .arrow
  • Don't call content function twice: https://github.com/twbs/bootstrap/issues/12563
  • Document Tether dependency clearly in the docs.
  • Convert tooltip's arrows to generated CSS content via :before/:after.

Progress

List group

  • Rename a.list-group-item to .list-group-item-link

JS

Global

Affix

  • Drop affix.
  • Replace with a position: sticky polyfill?

Alert

  • Have alert dismissal hide the alert element rather than deleting it from the DOM (twbs/bootstrap/issues/1845, twbs/bootstrap/issues/10752)
  • Decouple alert JS from the .alert class? #16150 (closed)

Buttons

  • Re-think button plugin
    1. Separate the checkbox and radio functionality from the rest and make esp. checkboxes not require .btn-groups to support my second point.
    2. Drop the single toggle functionality. Checkbox is exactly that but more advanced?
    3. Replace stateful functionality with only the loading state.
  • Have Button plugin listen for and react to change event of associated <input>s? https://github.com/twbs/bootstrap/issues/13261

Carousel

Collapse

Dropdowns

Scrollspy

Tab

Tooltips

Popovers

Docs

  • Host previous version—perhaps we put v4 at getbootstrap.com/v4/ so URLs don't break?
    • Look into possible Jekyll plugins for redirect some old links
  • Revisit CSS and Components docs page split.
  • Combine JS and CSS versions of components (dropdowns, tabs, buttons, alerts)
  • Find a way to remove some of our callouts—way too many gotchas and notes and shit.
  • Further repo organization cleanup with consolidated tests directory? https://github.com/twbs/bootstrap/pull/12291
  • Add docs to educate folks about autoprefixer and mixins: https://github.com/twbs/bootstrap/pull/12670.
  • Improve and simplify getting started docs a la Pure
  • Improve docs for installing via npm, Bower, Git clone, CDN, and download
  • Nuke or revamp the variables and mixins docs to avoid duplication and staleness
  • Remove compatibility= 'ie8' from clean-css
  • Remove html5shiv and respond.js from docs?
  • Update minium Firefox version in autoprefixer to >= 31 (latest ESR). See https://github.com/twbs/bootstrap/pull/14981.
  • Write Best Practices docs.
  • Write a Learn & Extend or Approach section.
  • Replace basic Jekyll search with something more comprehensive.

Customizer

  • Drop it entirely since folks are building better community-led ones.

Examples