Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
Moving from Beta 3 to our stable v4.x release, there are no breaking changes, but there are some notable changes.
Fixed broken print utilities. Previously, using a .d-print-*
class would unexpectedly overrule any other .d-*
class. Now, they match our other display utilities and only apply to that media (@media print
).
Expanded available print display utilities to match other utilities. Beta 3 and older only had block
, inline-block
, inline
, and none
. Stable v4 added flex
, inline-flex
, table
, table-row
, and table-cell
.
Fixed print preview rendering across browsers with new print styles that specify @page
size
.
While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you’re updating to Beta 3 from Beta 2 or any older version of Bootstrap.
$thumbnail-transition
variable. We weren’t transitioning anything, so it was just extra code.node_modules
folder, you should adapt your workflow.Rewrote both custom and default checkboxes and radios. Now, both have matching HTML structure (outer <div>
with sibling <input>
and <label>
) and the same layout styles (stacked default, inline with modifier class). This allows us to style the label based on the input’s state, simplifying support for the disabled
attribute (previously requiring a parent class) and better supporting our form validation.
As part of this, we’ve changed the CSS for managing multiple background-image
s on custom form checkboxes and radios. Previously, the now removed .custom-control-indicator
element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have .custom-control-label::before
for the fill and gradient and .custom-control-label::after
handles the icon.
To make a custom check inline, add .custom-control-inline
.
Updated selector for input-based button groups. Instead of [data-toggle="buttons"] { }
for style and behavior, we use the data
attribute just for JS behaviors and rely on a new .btn-group-toggle
class for styling.
Removed .col-form-legend
in favor of a slightly improved .col-form-label
. This way .col-form-label-sm
and .col-form-label-lg
can be used on <legend>
elements with ease.
Custom file inputs received a change to their $custom-file-text
Sass variable. It’s no longer a nested Sass map and now only powers one string—the Browse
button as that is now the only pseudo-element generated from our Sass. The Choose file
text now comes from the .custom-file-label
.
Input group addons are now specific to their placement relative to an input. We’ve dropped .input-group-addon
and .input-group-btn
for two new classes, .input-group-prepend
and .input-group-append
. You must explicitly use an append or a prepend now, simplifying much of our CSS. Within an append or prepend, place your buttons as they would exist anywhere else, but wrap text in .input-group-text
.
Validation styles are now supported, as are multiple inputs (though you can only validate one input per group).
Sizing classes must be on the parent .input-group
and not the individual form elements.
While in beta, we aim to have no breaking changes. However, things don’t always go as planned. Below are the breaking changes to bear in mind when moving from Beta 1 to Beta 2.
$badge-color
variable and its usage on .badge
. We use a color contrast function to pick a color
based on the background-color
, so the variable is unnecessary.grayscale()
function to gray()
to avoid breaking conflict with the CSS native grayscale
filter..table-inverse
, .thead-inverse
, and .thead-default
to .*-dark
and .*-light
, matching our color schemes used elsewhere..table-responsive
you’ve been using is more like .table-responsive-md
. You may now use .table-responsive
or .table-responsive-{sm,md,lg,xl}
as needed..form-control-label
class. If you did make use of this class, it was duplicate of the .col-form-label
class that vertically centered a <label>
with it’s associated input in horizontal form layouts.color-yiq
from a mixin that included the color
property to a function that returns a value, allowing you to use it for any CSS property. For example, instead of color-yiq(#000)
, you’d write color: color-yiq(#000);
.pointer-events
usage on modals. The outer .modal-dialog
passes through events with pointer-events: none
for custom click handling (making it possible to just listen on the .modal-backdrop
for any clicks), and then counteracts it for the actual .modal-content
with pointer-events: auto
.Here are the big ticket items you’ll want to be aware of when moving from v3 to v4.
px
to rem
as our primary CSS unit, though pixels are still used for media queries and grid behavior as device viewports are not affected by type size.14px
to 16px
.576px
and below) and removed the -xs
infix from those classes. Example: .col-6.col-sm-4.col-md-3
.$enable-gradients: true
).package.json
for all scripts, or our project readme for local development needs.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).xs
grid classes have been modified to not require the infix to more accurately represent that they start applying styles at min-width: 0
and not a set pixel value. Instead of .col-xs-6
, it’s now .col-6
. All other grid tiers require the infix (e.g., sm
).make-col-ready
prep mixin and a make-col
to set the flex
and max-width
for individual column sizing.12
at their max width.$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.@include media-breakpoint-up/down/only
. Now, instead of writing @media (min-width: @screen-sm-min) { ... }
, you can write @include media-breakpoint-up(sm) { ... }
.position: sticky
instead. See the HTML5 Please entry for details and specific polyfill recommendations. One suggestion is to use an @supports
rule for implementing it (e.g., @supports (position: sticky) { ... }
)position
styles, the polyfills might not support your use case. One option for such uses is the third-party ScrollPos-Styler library.This list highlights key changes by component between v3.x.x and v4.0.0.
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.
.text-
utilities to the _utilities.scss
file..page-header
as its styles can be applied via utilities..dl-horizontal
has been dropped. Instead, use .row
on <dl>
and use grid column classes (or mixins) on its <dt>
and <dd>
children.<blockquote>
element to a single class, .blockquote
. Dropped the .blockquote-reverse
modifier for text utilities..list-inline
now requires that its children list items have the new .list-inline-item
class applied to them..img-responsive
to .img-fluid
..img-rounded
to .rounded
.img-circle
to .rounded-circle
>
selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations..table-condensed
to .table-sm
for consistency..table-inverse
option..thead-default
and .thead-inverse
..table-
-prefix. Hence .active
, .success
, .warning
, .danger
and .info
to .table-active
, .table-success
, .table-warning
, .table-danger
and .table-info
._reboot.scss
file..control-label
to .col-form-label
..input-lg
and .input-sm
to .form-control-lg
and .form-control-sm
, respectively..form-group-*
classes for simplicity’s sake. Use .form-control-*
classes instead now..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
..radio-inline
and .checkbox-inline
..checkbox
and .radio
into .form-check
and the various .form-check-*
classes..form-horizontal
class requirement..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">
)..col-form-label
class to vertically center labels with .form-control
s..form-row
for compact form layouts with the grid classes (swap your .row
for a .form-row
and go)..has-error
, .has-warning
, and .has-success
classes with HTML5 form validation via CSS’s :invalid
and :valid
pseudo-classes..form-control-static
to .form-control-plaintext
..btn-default
to .btn-secondary
..btn-xs
class entirely as .btn-sm
is proportionally much smaller than v3’s.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. [disabled]
to :disabled
as IE9+ supports :disabled
. However fieldset[disabled]
is still necessary because native disabled fieldsets are still buggy in IE11..btn-group-justified
. As a replacement you can use <div class="btn-group d-flex" role="group"></div>
as a wrapper around elements with .w-100
..btn-group-xs
class entirely given removal of .btn-xs
.<div>
s or <ul>
s now.<a>
and <button>
based dropdown items..divider
to .dropdown-divider
..dropdown-item
.<span class="caret"></span>
; this is now provided automatically via CSS’s ::after
on .dropdown-toggle
.576px
grid breakpoint as sm
, meaning there are now five total tiers (xs
, sm
, md
, lg
, and xl
)..col-{breakpoint}-{modifier}-{size}
to .{modifier}-{breakpoint}-{size}
for simpler grid classes.order
classes. For example, instead of .col-8.push-4
and .col-4.pull-8
, you’d use .col-8.order-2
and .col-4.order-1
.a.list-group-item
with an explicit class, .list-group-item-action
, for styling link and button versions of list group items..list-group-flush
class for use with cards.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.>
selectors for simpler styling via un-nested classes..nav > li > a
, we use separate classes for .nav
s, .nav-item
s, and .nav-link
s. 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.
.navbar
class via the required .navbar-expand-{breakpoint}
where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling..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-color
s; instead they essentially only affect color
..bg-*
) or set your own with the light/inverse classes above for mad customization..navbar-toggle
is now .navbar-toggler
and has different styles and inner markup (no more three <span>
s)..navbar-form
class entirely. It’s no longer necessary; instead, just use .form-inline
and apply margin utilities as necessary.margin-bottom
or border-radius
by default. Use utilities as necessary..page-item
, .page-link
) are now required on the descendants of .pagination
s.pager
component entirely as it was little more than customized outline buttons..breadcrumb-item
, is now required on the descendants of .breadcrumb
s.label
and .badge
to disambiguate from the <label>
element and simplify related components..badge-pill
as modifier for rounded “pill” look..badge-default
has been dropped and .badge-secondary
added to match component modifier classes used elsewhere.Dropped entirely for the new card component.
.panel
to .card
, now built with flexbox..panel-default
removed and no replacement..panel-group
removed and no replacement. .card-group
is not a replacement, it is different..panel-heading
to .card-header
.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
..panel-body
to .card-body
.panel-footer
to .card-footer
.panel-primary
, .panel-success
, .panel-info
, .panel-warning
, and .panel-danger
have been dropped for .bg-
, .text-
, and .border
utilities generated from our $theme-colors
Sass map..progress-bar-*
classes with .bg-*
utilities. For example, class="progress-bar progress-bar-danger"
becomes class="progress-bar bg-danger"
..active
for animated progress bars with .progress-bar-animated
..carousel-
. .next
, .prev
, .left
, and .right
are now .carousel-item-next
, .carousel-item-prev
, .carousel-item-left
, and .carousel-item-right
..item
is also now .carousel-item
..carousel-control.right
and .carousel-control.left
are now .carousel-control-next
and .carousel-control-prev
, meaning they no longer require a specific base class..d-none
and d-{sm,md,lg,xl}-none
)..hidden-*
utilities for new display utilities. For example, instead of .hidden-sm-up
, use .d-sm-none
. Renamed the .hidden-print
utilities to use the display utility naming scheme. More info under the Responsive utilities section of this page..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
..text-{sm,md,lg,xl}-{left,center,right}
..center-block
for the new .mx-auto
class.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
Our documentation received an upgrade across the board as well. Here’s the low down:
bugify.rb
is used to efficiently list out the entries on our browser bugs page.example.rb
is a custom fork of the default highlight.rb
plugin, allowing for easier example-code handling.callout.rb
is a similar custom fork of that, but designed for our special docs callouts.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.
Our responsive utility classes have largely been removed in favor of explicit display
utilities.
.hidden
and .show
classes have been removed because they conflicted with jQuery’s $(...).hide()
and $(...).show()
methods. Instead, try toggling the [hidden]
attribute or use inline styles like style="display: none;"
and style="display: block;"
..hidden-
classes have been removed, save for the print utilities which have been renamed. .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
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
.hidden-
or .visible-
, but with .d-print-
. .visible-print-block
, .visible-print-inline
, .visible-print-inline-block
, .hidden-print
.d-print-block
, .d-print-inline
, .d-print-inline-block
, .d-print-none
Rather than using explicit .visible-*
classes, you make an element visible by simply not hiding it at that screen size. You can combine one .d-*-none
class with one .d-*-block
class to show an element only on a given interval of screen sizes (e.g. .d-none.d-md-block.d-xl-none
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. 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.
© 2011–2020 Twitter, Inc.
© 2011–2020 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/4.5/migration/