Sign in


Sign up


Bootstrap 4 beta release

Summary and tutorial

It took almost 2 years to develop Bootstrap 4. But it's finally here!

5,000 commits, 650+ files changed, 67,000 lines added, and 82,000 lines deleted.

We truly love it. We are sure that you will love it as well.


Bootstrap 4 tutorial Sample projects built with Bootstrap 4 MDB & Bootstrap Beta

Official message from Bootstrap Team

" Long story short, shipping a beta means we’re done breaking all your stuff until our next major version (v5). We’re not perfect, but we’ll be doing our best to keep all the classes, features, and docs URLs as they appear now in this release. We can always add more things, but we cannot take away. "

@mdo & team getbootstrap.com

The most important changes

Dropped IE8, IE9, and iOS 6 support

Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+.

Flexbox by default

Bootstrap 4 is now flexbox by default! Flexbox is an immensely powerful layout tool, providing unparalleled flexibility and control to Bootstrap grid system and core components. It comes at the cost of dropping IE9 support, but brings significant improvements to component layout, alignment, and sizing.

Switched from Less to Sass

Bootstrap now compiles faster than ever thanks to SASS. It also became much more intuitive and flexible.

Switched from px to rem

Now everything in Bootstrap 4 is dynamic and relative to the root html element. That is extremely useful thing which makes easier for mobile devices to scale up or down.

Enhanced grid system

The new grid is now powered by flexbox and rem units, which make it extremly powerful and flexible tool.

Don't be afraid, it won't be difficult to learn. Follow our tutorial and you will fall in love with the new Bootstrap grid.

New components

Dropped panels, thumbnails, and wells for a new all-encompassing component - cards.

Font Awesome instead of Glyphicons

Improved forms, buttons, dropdowns, navbars, modals, tables, pagination, tooltips, carousel and many more.

Enhanced documentation

Huge, detailed user-friendly documentation will help you implement your ideas fast and easily.

ES6

Each plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements.

They also with UMD support, generic teardown methods, option type checking, and tons more. This means that maintaining the plugins will be a lot easier and their development much faster.

Improved utilities

Helpers included in Bootstrap 4 will solve a lot of annoying issues, so common in daily work of each developer. It will definitely make our life easier.

Droped Normalize.css

Normalize.css has taken a different path than we’d prefer, dropping some core CSS tweaks we’ve long depended upon. Reboot takes the core of Normalize.css and expands it to include more opinionated resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file.

Brand new customization options

Instead of relegating style embellishments like gradients, transitions, shadows, grid classes, and more to a separate stylesheet like v3, we’ve moved all those options into Sass variables. Want default transitions on everything or to disable rounded corners? Simply update a variable and recompile.

New build tools

Completely rewritten in npm scripts instead of Grunt, immensely simplifying the process of developing and contributing to Bootstrap.

Frequently asked questions

Click on the question below to expand

According to Bootstrap Team - yes, it is safe and recommended.

It seems that all the most significant changes have been already applied.

Bootstrap 4 is lighter and easier. And thanks to improvements such like flexbox, it's more powerful than even before.

The future definitely belongs to Bootstrap 4. That's why my answer is: Bootstrap 4 is better than Bootstrap 3.

The fact worth of noticing: Bootstrap team announced they stop developing Bootstrap 3 and focus entirely on Bootstrap 4.

Oh, that question is easy. You definitely should learn Bootstrap 4 and flexbox, because this it the future.

If you ask, why not to learn Bootstrap 3 if it's still in use, consider that:

Bootstrap team announced they stop development of Bootstrap 3 and focus entirely on Bootstrap 4.

It will be maintained although not developed. The situation will be probably similar to Bootstrap 3 and 2:

- some old, huge and hard to migrate projects will keep Bootstrap 3 but the vast majority od developers will switch to Bootstrap 4.

And finaly, as it happened to Bootstrap 2, Bootstrap 3 finally will be forgotten.

It will be maintained although not developed. The situation will be probably similar to Bootstrap 3 and 2:

- some old, huge and hard to migrate projects will keep Bootstrap 3 but the vast majority of developers will switch to Bootstrap 4.

And similarly to Bootstrap 2, Bootstrap 3 finally will be forgotten.

The fact worth of noticing: Bootstrap team announced they stop developing Bootstrap 3 and focus entirely on Bootstrap 4.

According to announcement of Bootstrap team we should expect 1 or 2 more Beta releases and then the final version.

We do not know an exact date but it should take around few months from now.

Ok, let's clarify - flexbox isn't a wonderful remedy for all aches and pains of web development problems (like it sometimes seems to be).

Nevertheless - it's really great and useful tool that allows elements to align and distribute space within a container.

It's definitely something worth of learning and using.

Learn more about Bootstrap 4


Bootstrap 4 tutorial

The complete and easy guide will teach you how to create stunning, responsive website and apps. Each lesson is provided with series of practical examples and each of those examples brings an essential web design knowledge.

Start

MDBootstrap 4 Beta free download

400+ material UI elements, 600+ material icons, 74 CSS animations, SASS files, templates, tutorials and many more.

Available jQuery and Angular 4 versions.

Free download

Share that happy news!


Detailed list of changes in Bootstrap 4 Beta

Bootstrap 4 is a major rewrite of almost the entire project. The most notable changes are summarized immediately below, followed by more specific class and behavioral changes to relevant components.

Browser support

  1. Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3.
  2. Added official support for Android v5.0 Lollipop’s Browser and WebView. Earlier versions of the Android Browser and WebView remain only unofficially supported.

Global changes

  1. Flexbox is enabled by default. In general this means a move away from floats and more across our components.
  2. Switched from Less to Sass for our source CSS files.
  3. Switched from px to rem as our primary CSS unit, though pixels are still used for media queries and grid behavior as viewports are not affected by type size.
  4. Global font-size increased from 14px to 16px.
  5. Added a new grid tier for smaller devices at 576px and below (our new xs tier).
  6. Replaced the separate optional theme with configurable options via SCSS variables (e.g., $enable-gradients: true).

Grid system

  1. Added support for flexbox in the grid mixins and predefined classes.
  2. As part of flexbox, included support for vertical and horizontal alignment classes.
  3. Overhauled grid mixins to merge make-col-span into make-col for a singular mixin.
  4. Added a new sm grid tier below 768px for more granular control. We now have xs, sm, md, lg, and xl. This also means every tier has been bumped up one level (so .col-md-6 in v3 is now .col-lg-6 in v4).
  5. Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by 12 at their max width.
  6. Grid breakpoints and container widths are now handled via Sass maps ($grid-breakpoints and $container-max-widths) instead of a handful of separate variables. These replace the @screen-* variables entirely and allow you to fully customize the grid tiers.
  7. Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have @include media-breakpoint-up/down/only. Now, instead of writing @media (min-width: @screen-sm-min) { ... }, you can write @include media-breakpoint-up(sm) { ... }.

Components

  1. Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.
  2. Dropped the Glyphicons icon font. If you need icons, some options are:
    1. the upstream version of Glyphicons
    2. Octicons
    3. Font Awesome
  3. Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead. See the HTML5 Please entry for details and specific polyfill recommendations.
    1. If you were using Affix to apply additional, non-position styles, the polyfills might not support your use case. One option for such uses is the third-party ScrollPos-Styler library.
  4. Dropped the pager component as it was essentially slightly customized buttons.
  5. Refactored nearly all components to use more un-nested classes instead of children selectors.

Misc

  1. Non-responsive usage of Bootstrap is no longer supported.
  2. Dropped the online Customizer in favor of more extensive setup documentation and customized builds.

By component

This list highlights key changes by component between v3.x.x and v4.0.0.

Reboot

New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the box-sizing: border-box change, moving from em to rem units on many elements, link styles, and many form element resets.

Typography

  1. Moved all .text- utilities to the _utilities.scss file.
  2. Dropped .page-header as, aside from the border, all its styles can be applied via utilities.
  3. .dl-horizontal has been dropped. Instead, use .row on <dl> and use grid column classes (or mixins) on its <dt> and <dd> children.
  4. Custom <blockquote> styling has moved to classes— .blockquote and the .blockquote-reverse modifier.
  5. .list-inline now requires that its children list items have the new .list-inline-item class applied to them.

Images

  1. Renamed .img-responsive to .img-fluid.
  2. Renamed .img-rounded to .rounded
  3. Renamed .img-circle to .rounded-circle

Tables

  1. Nearly all instances of the > selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.
  2. Responsive tables no longer require a wrapping element. Instead, just put the .table-responsive right on the <table>.
  3. Renamed .table-condensed to .table-sm for consistency.
  4. Added a new .table-inverse option.
  5. Added table header modifiers: .thead-default and .thead-inverse.
  6. Renamed contextual classes to have a .table--prefix. Hence .active, .success, .warning, .danger and .table-info to .table-active, .table-success, .table-warning, .table-danger and .table-info.

Forms

  1. Moved element resets to the _reboot.scss file.
  2. Renamed .control-label to .form-control-label.
  3. Renamed .input-lg and .input-sm to .form-control-lg and .form-control-sm, respectively.
  4. Dropped .form-group-* classes for simplicity’s sake. Use .form-control-* classes instead now.
  5. Dropped .help-block and replaced it with .form-text for block-level help text. For inline help text and other flexible options, use utility classes like .text-muted.
  6. Horizontal forms overhauled:
    1. Dropped the .form-horizontal class requirement.
    2. .form-group no longer applies styles from the .row via mixin, so .row is now required for horizontal grid layouts (e.g., <div class="form-group row">).
    3. Added new .form-control-label class to vertically center labels with .form-controls.
  7. Added custom forms support (for checkboxes, radios, selects, and file inputs).

Buttons

  1. Renamed .btn-default to .btn-secondary.
  2. Dropped the .btn-xs class entirely as .btn-sm is proportionally much smaller than v3’s.
  3. The stateful button feature of the button.js jQuery plugin has been dropped. This includes the $().button(string) and $().button('reset') methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
    1. Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.

Button group

  1. Rewrote component with flexbox.
  2. Dropped the .btn-group-xs class entirely given removal of .btn-xs.
  3. Removed explicit spacing between button groups in button toolbars; use margin utilities now.
  4. Improved documentation for use with other components.
  1. Switched from parent selectors to singular classes for all components, modifiers, etc.
  2. Simplified dropdown styles to no longer ship with upward or downward facing arrows attached to the dropdown menu.
  3. Dropdowns can be built with <div>s or <ul>s now.
  4. Rebuilt dropdown styles and markup to provide easy, built-in support for <a> and <button> based dropdown items.
  5. Renamed .divider to .dropdown-divider.
  6. Dropdown items now require .dropdown-item.
  7. Dropdown toggles no longer require an explicit <span class="caret"></span>; this is now provided automatically via CSS’s ::after on .dropdown-toggle.

Grid system

  1. Added a new 576px grid breakpoint as sm, meaning there are now five total tiers (xs, sm, md, lg, and xl).
  2. Renamed the responsive grid modifier classes from .col-{breakpoint}-{modifier}-{size} to .{modifier}-{breakpoint}-{size} for simpler grid classes. For example, instead of .col-md-3.col-md-push-9 it’s .col-md-3.push-md-9.
  3. Overhauled the grid mixins to merge make-col and make-col-span into a single make-col mixin, thereby ensuring mixins and predefined classes utilize the same float/flex behaviors.
  4. Added flexbox utility classes for grid system and components.

List groups

  1. Rewrote component with flexbox.
  2. Replaced a.list-group-item with an explicit class, .list-group-item-action, for styling link and button versions of list group items.
  3. Added .list-group-flush class for use with cards.
  1. Rewrote component with flexbox.
  2. Given move to flexbox, alignment of dismiss icons in the header is likely broken as we’re no longer using floats. Floated content comes first, but with flexbox that’s no longer the case. Update your dismiss icons to come after modal titles to fix.
  3. The remote option (which could be used to automatically load and inject external content into a modal) and the corresponding loaded.bs.modal event were removed. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
  1. Rewrote component with flexbox.
  2. Dropped nearly all > selectors for simpler styling via un-nested classes.
  3. Instead of HTML-specific selectors like .nav > li > a, we use separate classes for .navs, .nav-items, and .nav-links. This makes your HTML more flexible while bringing along increased extensibility.

The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.

  1. Responsive navbar behaviors are now applied to the .navbar class via the required .navbar-toggleable-{breakpoint} where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.
  2. .navbar-default is now .navbar-light, though .navbar-dark remains the same. One of these is required on each navbar. However, these classes no longer set background-colors; instead they essentiatlly only affect color.
  3. Navbars now require a background declaration of some kind. Choose from our background utilities ( .bg-*) or set your own with the light/inverse classes above for mad customization.
  4. Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.
  5. .navbar-toggle is now .navbar-toggler and has different styles and inner markup (no more three <span>s).
  6. Dropped the .navbar-form class entirely. It’s no longer necessary; instead, just use .form-inline and apply margin utilities as necessary.
  7. Navbars no longer include margin-bottom or border-radius by default. Use utilities as necessary.
  8. All examples featuring navbars have been updated to include new markup.

Pagination

  1. Rewrote component with flexbox.
  2. Explicit classes (.page-item, .page-link) are now required on the descendants of .paginations
  3. Dropped the .pager component entirely as it was little more than customized outline buttons.
  1. An explicit class, .breadcrumb-item, is now required on the descendants of .breadcrumbs

Labels, badges, and tags

  1. Renamed .label to .tag to disambiguate from the <label> element.
  2. Dropped the .badge component as it was nearly identical to labels/tags. Use the .tag-pill modifier together with the label component instead for that rounded look.
  3. Tags are no longer floated automatically in list groups and other components. Utility classes are now required for that.

Panels, thumbnails, and wells

Dropped entirely for the new card component.

Panels

  1. .panel to .card, now built with flexbox.
  2. .panel-default removed and no replacement.
  3. .panel-group removed and no replacement. .card-group is not a replacement, it is different.
  4. .panel-heading to .card-header
  5. .panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
  6. .panel-body to .card-body
  7. .panel-footer to .card-footer
  8. .panel-primary to .card-primary and .card-inverse (or use .bg-primary on .card-header)
  9. .panel-success to .card-success and .card-inverse (or use .bg-success on .card-header)
  10. .panel-info to .card-info and .card-inverse (or use .bg-info on .card-header)
  11. .panel-warning to .card-warning and .card-inverse (or use .bg-warning on .card-header)
  12. .panel-danger to .card-danger and .card-inverse (or use .bg-danger on .card-header)

Tooltips

  1. Removed support for auto placement options.

Popovers

  1. Removed support for auto placement options.
  1. Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.
  2. All CSS has been un-nested and renamed, ensuring each class is prefixed with .carousel-.
    1. For carousel items, .next, .prev, .left, and .right are now .carousel-item-next, .carousel-item-prev, .carousel-item-left, and .carousel-item-right.
    2. .item is also now .carousel-item.
    3. For prev/next controls, .carousel-control.right and .carousel-control.left are now .carousel-control-right and .carousel-control-left, meaning they no longer require a specific base class.
  3. Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
  4. Removed image overrides for images in carousel items, deferring to utilities.
  5. Tweaked the Carousel example to include the new markup and styles.

Utilities

  1. Made display utilities responsive (e.g., .d-none and d-{sm,md,lg,xl}-none).
  2. Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
  3. Added responsive variations to our text alignment classes .text-{sm,md,lg,xl}-{left,center,right}.
  4. Added new margin auto utilities for all sides, plus vertical and horizontal shorthands.
  5. Added boatload of flexbox utilities.
  6. Dropped .center-block for the new .mx-auto class.

Vendor prefix mixins

Bootstrap 3’s vendor prefix mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use Autoprefixer, they’re no longer necessary.

Removed the following mixins: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d, user-select

Documentation

Our documentation received an upgrade across the board as well. Here’s the low down:

  1. We’re still using Jekyll, but we have custom plugins in the mix:
    1. example.rb is a fork of the default highlight.rb plugin, allowing for easier example-code handling.
    2. callout.rb is a similar fork of that, but designed for our special docs callouts.
  2. All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
  3. Pages have been reorganized for simpler content and a more approachable hierarchy.
  4. We moved from regular CSS to SCSS to take full advantage of Bootstrap’s variables, mixins, and more.

Responsive utilities

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

The responsive utility classes have also been overhauled.

  1. The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute, use inline styles like style="display: none;" and style="display: block;", or toggle the .invisible class.
  2. The old classes (.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block) are gone.
  3. They have been replaced by .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down.
  4. The .hidden-*-up classes hide the element when the viewport is at the given breakpoint or larger (e.g. .hidden-md-up hides an element on medium, large, and extra-large devices).
  5. The .hidden-*-down classes hide the element when the viewport is at the given breakpoint or smaller (e.g. .hidden-md-down hides an element on extra-small, small, and medium devices).

Rather than using explicit .visible-* classes, you make an element visible by simply not hiding it at that screen size. You can combine one .hidden-*-up class with one .hidden-*-down class to show an element only on a given interval of screen sizes (e.g. .hidden-sm-down.hidden-xl-up shows the element only on medium and large devices).

Note that the changes to the grid breakpoints in v4 means that you’ll need to go one breakpoint larger to achieve the same results (e.g. .hidden-md is more similar to .hidden-lg-down than to .hidden-md-down). The new responsive utility classes don’t attempt to accommodate less common cases where an element’s visibility can’t be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.

Misc notes to prioritize

  1. Removed the min--moz-device-pixel-ratio typo hack for retina media queries
  2. Change buttons’ [disabled] to :disabled as IE9+ supports :disabled. However fieldset[disabled] is still necessary because native disabled fieldsets are still buggy in IE11.

TODO: audit list of stuff in v3 that was marked as deprecated

Additional notes

  1. Removed support for styled nested tables (for now)