MDB 5 was written from scratch. Literally every line of code has been rewritten to ensure the highest possible quality.
The changes are very significant and in many cases it was not possible to maintain backward compatibility. We chose the right quality over backward compatibility and it was a deliberate decision.
Therefore, whenever possible, we recommend that you create your project from scratch in MDB5, instead of updating old MDB 4 projects to MDB 5.
Note: The following list is not complete. Only the most key changes are listed, but you should bear in mind that no component has remained unchanged.
See the browser and devices page for details on what is currently supported in Bootstrap 5. Since v4, here’s what’s changed to our browser support:
- Dropped support for Internet Explorer 10 and 11
- Dropped support for Firefox NN - MM
- Dropped support for Safari NN
- Dropped support for iOS Safari NN
- Dropped support for Chrome NN
- Dropped support for Android NN
- Auto Initialization for all components (no need for initializing components like sidenav or select as it was in MDB 4).
- Ability to work on the server, with module bundlers and with the browser thanks to the compilation to the UMD (Universal Module Definition) format.
- ES6 friendly components importing as a single module or a library.
- Optional jQuery integration.
Grid and layout
Changes to any layout tools and our grid system.
.mediacomponent as it can be built with utility classes.
position: relativefrom grid columns.
The horizontal padding is added to the direct children in a row instead
of the columns themselves.
- This simplifies our codebase.
The column classes can now be used stand alone. Whenever they are
used outside a
.row, horizontal padding won’t be added.
- The responsive gutter classes can be used to control the gutter width in horizontal, vertical or both directions.
The gutter width is now set in
remand decreased from
bootstrap-grid.cssnow only applies
box-sizing: border-boxto the column instead of resetting the global box-sizing. This way the grid system can be used, even if
box-sizing: border-boxis not applied to each element.
All forms were completely rewritten. The syntax has also been standardized to ensure consistency throughout the project.
- Default and material 1.0 inputs were dropped. Only outline inputs are available now.
Combined native and custom checkboxes and radios into single
New checks support sizing via
font-sizeor explicit modifier classes now.
- New checks now appear larger by default for improved usability.
.custom-controland associated classes.
- New checks support sizing via
Updated file input component
.form-filemarkup to resolve some visual bugs while allowing translation and button text changes via HTML instead of CSS.
Added support for
.form-groupfor margin utilities (we’ve replaced our docs examples with
.form-rowfor the more flexible grid gutters.
.form-inlinefor the more flexible grid.
Dropped support for
.input-group-prepend. You can now just add buttons and
.input-group-textas direct children of the input groups.
Disabled states of the buttons, close button, pagination link & form
range now have
pointer-events: noneadded. This simplifies our codebase and makes it easier to override active states in CSS.
The jumbotron component is removed in favor of utility classes like
.bg-lightfor the background color and
.p-*classes to control padding.
Pagination links now have customizable
margin-leftthat are dynamically rounded on all corners when separated from one another.
Decreased the number of responsive order utilities per breakpoint. The
highest order utility with a number now is
.bg-bodyfor quickly setting the
<body>'s background to additional elements.
Negative margin utilities are disabled by default. You can re-enable
them by setting
$enable-negative-margins: true, but keep in mind this can increase the file size quite a lot.
Completely rewritten components
Below is a list of components with completely changed syntax and source code. For this reason, their migration from MDb 4 to MDB 5 is practically impossible, because they are actually completely different components. Therefore, they should be created from scratch in the project.