v4

[mdo]

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 Media query mixins #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. (Change all variables from @*-small and @*-large to @*-sm and @*-lg #10352)
• Reconsider vertical rhythm (Reconsider Vertical Rhythm #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 Support element other than anchor for disabled links #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: bg-* and text-* classes aren't controlled by @brand-* color variables #14840
• Consider implementing a _custom.sccss for easier, built-in variable overrides?

Variables and mixins

• Nuke box-shadow mixin: Drop box-shadow mixin usage #12638
• Rewrite the semantic grid mixins Reducing redundancy in output of the semantic grid columns system #13426
• Make .sr-only a real mixin per Provide sr-only as a real mixin #13583.
• Clean up uses of @extends in favor of mixins in more places (namely clearfixes).

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 (Grid breakpoint for 480px #10203 , Add device orientation columns #11230 , Apple width CSS breakpoints #10866)
• Switch back to max-width for .container? (Breaking change in 3.0.1: Nested containers don't properly size #11436)
• Unique grid gutter widths per break point, Individual @grid-gutter-width for different screen sizes (xs/sm/md/lg) #11564. Done! But only with the semantic mixins.
• Customizable grid gutters for each breakpoint, per Semantic columns do not have alternative gutter-widths per breakpoint. (twbs 3.x) #11873.
• Remove remaining uses of column-related wildcard class selectors (e.g. class*="col-").
• Grid cols and containers as better multiples of 12? Grid Container Sizes should be multiples of 12px #13120
• The number of columns should be an additional parameter for make-grid() and make-grid-columns-float() #11322 & friends: make grid mixins more flexible/reusable

Type

• Rem units with auto-scaling type sizes
• Fix heading interaction with emphasis classes (jumbotron h1 inherits color which overrides text-success, text-warning, etc #10202 , Heading classes (.h2, .h2, etc.) override <a> and .text-* class color styling #11515)
• Grid-based horizontal dls (Align description lists with grid #11639)
• Rewrite the headings and small stuff to avoid specificity issues per small in alert-danger #12782.
• Drop .help-block for existing utility classes and more flexible HTML Rename help-block #13267
• Text truncation class to go with mixin?
• Responsive alignment classes? Add responsive text-alignment classes #14217
• Rebuild the .dl-horizontal to use grid classes instead of it's fixed-width dimensions from v3.

Code

• Remove the word-break and white-space stuff from <pre> elements per Firefox displays horizontal scrollbars on <pre> element #13917.
• Make <pre> elements relatively unstyled (no more gray background and stuff).

Utilities

• Rename and/or remove !important from .show & .hide (.hide and .show classes with !important breaks $(elem).show(); #9881)
• Address hide vs. hidden naming inconsistency (Consistency class naming #11541)
• Alternate responsive utility strategy with ranges: Responsive utilities additional classes #12443
• Rename skip nav classes: Accessibility: skip navigation not just for screenreader-only users #13457
• Finna fix that double clearfix bug: swapping .clearfix and .clearfix() for css reduction #13538.
• Rename float and text alignment classes so they're more RTL-friendly: better naming for enable Right-To-Left support #16419
• 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 (Rename .table-condensed to .table-sm (for v4) #10987)
• Rewrite table contextual classes to not be markup specific—e.g,. use .table-danger instead of td.danger
• Table and alignment classes, per Bootstrap changes default behaviour of tables #12237
• Remove grid system sizing. Keep it for non-tabular, truly grid-based implementations. No more mixing.

Forms

Labels

• Control labels need sizing as well, per No small control's labels in horizontal forms #12068
• Scope other label styles to a class so that they're not global, per IE8 - Long <label>s overflow container (words do not wrap) #13141
• Disabled labels? Disabled labels #5794

Inputs

• Remove FF4-18 placeholder per [-] placeholder color: Firefox 18- support #12358.
• Switch to min-height on inputs since we can drop IE8 (IE8 and box-sizing don't mix well)?
• Support for (or completely custom) range inputs?

Validation and states

• Consider changing .has-error to .has-danger for uniformity.
• Fix form field validation state color variables: forms.less - "has-" functions using wrong variables #12731
• Form validation states on individual fields, per form-group validation class with multiple fields #12032 and Horizontal form and has-error on a single field #14735
• More/newer/better validation states
• Disabled fieldsets: Fixes #10674: Form controls in disabled fieldset legend #11668

Layout

• Height of radios and checkboxes? Height of .radio-inline #11456
• Drop .form-horizontal class entirely in favor of just grid classes.
• Alignment of checkboxes and radios Checkbox text vertical alignment in IE/Chrome #13936.

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 data-toggle="button" initial active state #11535.
• Add .btn-outline

Button groups

• Add separate class for split button vs single button dropdowns—perhaps .btn-group-segmented? Hopefully to avoid shit like Split button dropdown ends up short a few pixels when inside .btn-group-vertical #10876.

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 (Alert headings #11450)

Breadcrumb

• Breadcrumb color vars need clarity: https://github.com/twbs/bootstrap/pull13810.
• Variable not working correctly for divider

Carousel

• Clean up carousel controls (Divorce functionality and visual style in carousel controls #10831)
• Add carousel- prefix to Carousel's .next,.prev,.left,.right classes

Dropdown

• Make carets from pseudo selectors (generated content). (Nullifies Make better use of dropdown caret size variables #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

• Dump input group's :first-child and :last-child for -of-type selectors: Use of-type in Input Groups instead of child #12687.
• Simpler rounded corners on input groups, possibly via class only: Segmented input group buttons have wrong border radius #13150.
• Verify .input-group .btn height when @font-size-base was changed #13171 and input-group-addon IE11 1px gap fix #13254 post rem switch.

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

• Move to inline-block again per Line breaks in HTML wrecks labels' horizontal size and spacing #14081.
• Make badges a variation labels.

Modal

• Add additional animations
• Modal dismissing on iOS flashes: Modal close behaviour on iOS 7 #14032
• Make modals centered vertically: Shouldn't modals be vertically centered instead of appearing at the top? #14617
• Add option or event for more control over refocusing of trigger button after hiding a modal: Modal hidden event #16604
• Finally fix that shifting content bug by updating the modal.js to not adjust body padding, but rather the padding on a specific set of classes.

Nav

• Rewrite nav components to use classes over > selectors.
• Drop justified nav variations.
• Rewrite tabs and pills to be mobile-first: Make tabs stack by default on phones #7540

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: Document broken "outdent" with multiple navbar-right classes #12951.
• Add drawer variation? Lateral Responsive Navbar #9481
• Expose proper API for "opening one closes all others" accordion behavior (Open collapse element does not close when calling $.collapse('show') on sibling #16360)

Panels

• Drop for cards.

Popover/tooltip

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

Progress

• Drop existing progress bars for Custom progress element mdo/wtf-forms#27.
• Add a non-<progress> variation to ensure animated backgrounds can still be used.

List group

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

JS

Global

• AMD? AMD with concatenated JS file #13812
• UMD? UMD tests #13843
• Support custom animations per Custom animations in tooltips. #13622
• Support for jQuery 2? Anything need doing here? Dropping old jQuery?
• Fix event namespacing (hide.bs.tooltip -> bs.tooltip.hide, etc.) (Use a more individual event namespace #10848)
• Drop IE7 JS, per Removing "strip for ie7" code from JavaScript #10858.
• Add destroy method to all plugins per add destroy method to all plugins #13655
• Accept jQuery objects in plugin options per Javascript modules should accept jQuery objects for options #13489
• Use .js- classes or data attributes for JS behavior only per Allow For Custom Indicators Selector To Be Passed To Carousel Constructor #14431
• Use external or new library for positioning content (tooltips, popovers, dropdowns) per Rewrite Tooltip and Popover #14327.
• Defer loading per defer loading of the javacripts plugins #14023
• Add methods for determining if elements are shown. visible, expanded, etc Add methods to check if widgets are currently shown/expanded/visible or not #15573
• More global keyboard access plugin (from Add keyboard option to carousel #14590)
• Use a global namespace (BS or $.BS)
  • References to all plugins' classes (BS.Popover)
  • Common utility functions (BS.utils)
    • Generating UIDs
    • Escaping jQuery selector strings to allow for (valid) IDs like #foo.bar
    • URI-encoded hash fragments in IDs (Let ScrollSpy support uri encoded hash fragments #14740)
• Better touch support throughout?
• Have Bootstrap's custom events include the (e.g. click, keyboard) event that caused them as an originalEvent property: Have Bootstrap plugin events forward the underlying originalEvent that caused them #15393
• Either throw explicit error or add handling when both e.g. tooltip.js and all-bootstrap-plugins.min.js are loaded.
• Try to find a way to avoid tooltips on button groups needing special-casing by the user (container: 'body' is currently required)
• Consider using MutationObserver to improve tooltips (Firefox hangs on to tooltip after the item has been disabled and/or destroyed #15632) and modals (Modal backdrop does not disappear, when modal-dialog being removed in HTML #16320)

Affix

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

Alert

• Have alert dismissal hide the alert element rather than deleting it from the DOM (Alert dismissal change #1845, Update alerts to hide the element instead of removing it - like modals #10752)
• Decouple alert JS from the .alert class? .alert-dismissible as default target for Dismissible alerts #16150

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? have Button plugin listen for & react to change event of associated <input>s? #13261

Carousel

• Swipe support Touch Enabled Carousel #8907 and Proposal: touchswipe adding in bootstrap.js #12881

Collapse

• Make accordion feature of collapse plugin independent of panels?: Collapsible parent option is dependent on dom structure #10966
• Consider defaulting Collapse plugin's toggle option to false when initializing: Collapse initial state problem #12254 (comment)
• Horizontal collapsing? Horizontal Collapse  #14423
• Configure event for collapse Collapse should use touchstart event on touch devices #13036

Dropdowns

• Auto alignment just like tooltips and popovers.
• Consider removing dropdown menus from normal document flow (perhaps with container option) to prevent a number of parent cropping issues (due to overflow). Split Button in navbar shows behind menu when in small screen mode #10017, Split button dropdowns issue #12122, Dropdown in responsive table in panel -> Android browser problem with y-overflow #13214, Dropdown can open offscreen laterally #13477
• Don't close dropdowns when opening links into new tabs? Menu dropdowns disappear after clicking a link and even if only opening a new tab #13762

Scrollspy

• Generalize scrollspy selector to work on more than nav links: Allow ScrollSpy to work for List Groups #13050.
• Support multiple data targets on the same page, scrollspy.js: multiple data targets #14776

Tab

• Generalize tab behavior perhaps so that it's not dependent on nav markup: Add support for .btn-group-based nav for tabs #12391
• Collapsing sections in vertical menus (is this just accordion?) per feature request: support collapsible vertical menu items in tabs plugin #14948

Tooltips

• Consider making .tooltip('show') throw an error when the target is display: none per Consider making .tooltip('show') throw an error when the target is display: none #14155
• Support multiple delegated tooltip selectors on a single node. only a single delegated tooltip selector is supported on a node #14167

Popovers

• Add option to replace title and body per popover html replace title and content #12754
• Binding and positioning for parents? popover not bound to parent on resize #12799
• Add argument data-target to popover Add argument data-target to popover #13029

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? Reorganize test files #12291
• Add docs to educate folks about autoprefixer and mixins: Autoprefixer (fixes #12452) #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 Update the Firefox ESR version #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

• Update all examples to v4 changes
• Move examples to separate GitHub repo and submodule or include them somehow? Intent is to create a more flexible, user-driven set of examples.
• Google Earth, and perhaps Mapbox: Request for New Example: Google Maps #12820.
• Justified navbar: Justified nav in navbar #14598
• Pricing tables