Do you want to be up to date with MDB 5 news? Sign up for our newsletter
Version 3.1.0, released 11.01.2021
Fixed & improved:
- Accordion - Fixed arrows direction
- File input - Styles update to Material styles
- Chips - Fixed padding & events & focus bug
- Input - Fixed overlapping label when input get dynamic value
Version 3.0.0, released 16.12.2020
Home page
MDB5 Standard has become the default version of our site instead of MDB4 jQuery
Dependencies:
- Update Bootstrap 5 to Beta 1 version
Breaking changes:
Data attributes refactor:
All JavaScript components are now namespaced to help distinguish MDB functionality from third parties and your
own code. For example, we use data-mdb-toggle
instead of data-toggle
.
RTL integration:
Part of our approach to adding RTL to MDB was to add it in a way that felt future-friendly to ourselves and the web at large. As such, we’ve embraced the spirit of CSS logical properties and have renamed several classes and variables. It’s a risky change because of the size and impact of the change, but we hope you’ll appreciate it overall!
RTL migration checklist:
Components:
- Renamed
.dropleft
and.dropright
to.dropstart
anddropend
. - Renamed
.dropdown-menu-*-left
and.dropdown-menu-*-right
to.dropdown-menu-*-start
and.dropdown-menu-*-end
. - Renamed
.bs-popover-left
and.bs-popover-right
to.bs-popover-start
and.bs-popover-end
. - Renamed
.bs-tooltip-left
and.bs-tooltip-right
to.bs-tooltip-start
and.bs-tooltip-end
. - Renamed
.carousel-item-left
and.carousel-item-right
to.carousel-item-start
and.carousel-item-end
.
Utilities:
- Renamed
.left-*
and.right-*
to.start-*
and.end-*
. - Renamed
.float-left
and.float-right
to.float-start
and.float-end
. - Renamed
.border-left
and.border-right
to.border-start
and.border-end
. - Renamed
.rounded-left
and.rounded-right
to.rounded-start
and.rounded-end
. - Renamed
.ml-*
and.mr-*
to.ms-*
and.me-*
. - Renamed
.pl-*
and.pr-*
to.ps-*
and.pe-*
. - Renamed
.text-left
and.text-right
to.text-start
and.text-end
.
Mixins:
- Renamed
border-left-radius()
andborder-right-radius()
toborder-start-radius()
andborder-end-radius()
— as well as their corner relative variants (eg..border-bottom-left-radius
became.border-bottom-start-radius
). - Renamed
caret-left()
andcaret-right()
tocaret-start()
andcaret-end()
— subsequently, thecaret()
mixin now takesstart
andend
as arguments instead ofleft
andright
.
Variables:
- New
$breadcrumb-divider-flipped
if a different breadcrumb separator is needed in RTL. - Renamed
$navbar-brand-margin-right
to$navbar-brand-margin-end
. - Renamed
$pagination-margin-left
to$pagination-margin-start
. - Renamed
$form-check-padding-left
to$form-check-padding-start
. - Renamed
$form-switch-padding-left
to$form-switch-padding-start
. - Renamed
$form-check-inline-margin-right
to$form-check-inline-margin-end
. - Renamed
$form-select-feedback-icon-padding-right
to$form-select-feedback-icon-padding-end
.
Other changes:
- Migrated from
node-sass
todart-sass
- Added new accordion component
- Dropped custom file upload plugin
- Added new border rounded sizes
- Modal: removed
show
option - Breadcrumb: simplified appearance, improved extensibility
- Updated interval new method in carousel
- Added new overflow classes
- Added ability to set custom classes in tooltip/popover
- Dropped Edge Legacy support
- Refeactored toast positioning
- Added new
.translate-middle-x
&.translate-middle-y
utilities to horizontally or vertically center absolute/fixed positioned elements - Renamed
scale-color()
function toshift-color()
to avoid collision with Sass’s own color scaling function. - Added
.fs-*
utilities forfont-size
utilities (with RFS enabled). These use the same scale as HTML’s default headings (1-6, large to small), and can be modified via Sass map. - Renamed
.font-weight-*
utilities as.fw-*
for brevity and consistency. - Renamed
.font-style-*
utilities as.fst-*
for brevity and consistency. - Added
.d-grid
to display utilities - Added new gap utilities (.gap) for CSS Grid layouts
Version 2.2.1, released 23.11.2020
Fixed:
- Restored color support for the
note
class.
Version 2.2.0, released 23.11.2020
New plugins:
New integrations:
Updated plugins:
- Drag and drop - fixed main issues
New features:
- Multi-range slider
- Range with thumb
- Added
mdb
events to existing free components - Added stacking utility in Alerts and Toasts
Fixed & improved:
- Theming - improved light theme design & added option to set theme on any element
- Datatables - added row click events
- Input - added form reset integration
- Flags - class refactor & search fix
- Ripple - change trigger event from click to mousedown
Version 2.1.0, released 09.11.2020
New backend integrations:
New plugins:
Updated plugins:
- Tree view - added new features
- eCommerce gallery - added autoHeight attribute
- Table editor - fixed duplicated events & esc keyboard event
New features:
Fixed & improved:
- Datatable - fixed header & columns bug
- Sidenav - fixed collapse on render
- Popconfirm - added animations for popover mode
- Select - added new searchPlaceholder option that allow to change placeholder of the select search input
- Datepicker - added new startDay option that allow to change first day of the week
- Autocomplete - added new initSearch(value) public method that allow to programmatically initialize search results for specified value
Version 2.0.0, released 12.10.2020
Dependencies:
- Update Bootstrap 5 to Alpha 2 version
New features:
New templates:
New plugins:
Updated plugins:
Fixed & improved:
- Add closing animation
- Arrow position update
- AppendToBody option can be disabled
- Hidden mode integration
- Canvas integration
Design updates:
- Improved animations and background setting for
.table
- Fixed
.dropdown-menu
padding size
Deprecated:
.close
. New:.btn-close
,.btn-close-white
.embed
. New:.ratio
.sr-only
,.sr-only-focusable
. New:.visually-hidden
,.visually-hidden-focusable
Version 1.2.0, released 21.09.2020
Fixed & improved:
- Toggler icon position fix
- Z-index update
- Options height change
- Size and form-white new options
- Clear button fix
- Add option for choosing fontAwesome version (free/pro)
- Placeholder is now visible if label is not set
250 new design blocks:
New docs:
New templates:
New plugins:
Version 1.1.0, released 07.09.2020
Fixed & improved:
- Resolved problem with closing the dropdown on input click
- Resolved problem with toggling the dropdown on the input
- Native change event will be correctly emitted on the select element
- Disabled state of the component will be now updated automatically after adding/removing the disabled attribute from the select element
- Correctly hide native select when initializing component manually with the 'new' keyword
- Resolved the problem with page reload on the toggle button click when the component is inside a form
- Added chartjs-datalabels plugin directly to the Chart
- Added default settings for all datasets
- Added Material Select
- Added clickable header
- Resolved problem with label position after step change
New:
- Perfect Scrollbar
- Admin design blocks
- Added new setValue method, that allows to programmatically set selected values
Version 1.0.0 - stable release, released 24.08.2020
The seventh release of MDB 5 and the first stable release. In this version, we focused on testing and confirming stability.
MDB 5 is stable and ready to use in production.
Our approach:
In MDB 5, we mostly use our own solutions, taking from Bootstrap only what is stable and tested.
Our goal was to use all the most popular and stable features of Bootstrap, but at the same time not to rely entirely on Bootstrap itself and build as many of our own solutions as possible.
Together with dozens of our beta testers and the most trusted customers, we have been testing MDB 5 for many months. To be absolutely sure of the stability, we released 4 Alpha and 2 Beta versions before announcing the stable version.
Thanks to this approach, we have control over the source code and we can guarantee its stability.
MDB 5 Pro is also released as a stable version.
MDB 5 ProVersion 1.0.0 Beta 2, released 17.08.2020
The sixth release of MDB 5 and the second Beta release. This is the last release before the stable release and it brings a ton of news and improvements
New components:
- Sidenav
- Animations
- Charts
- Datatables
- Lightbox
- Datapicker
- Timepicker
- Rating
- Select
- Stepper
- Infinite scroll
- Lazy loading
- Touch
- Smooth scroll
- Sticky
- Popconfirm
- Advanced modals
- Alerts
- Toasts
- Animated navbar
New design blocks:
Together with MDB 5 Beta 2 we are also publishing the first version of MDB 5 Pro.
MDB 5 ProVersion 1.0.0 Beta 1, released 03.08.2020
The fifth release of MDB 5 and the first Beta release. After a few months of testing and 4 Alpha releases, the project gains enough stability to release the first Beta.
In this version, we focused entirely on scss and javascript optimization to provide the highest standards and quality of the source code.
Version v1.0.0 Alpha 4, released 20.07.2020
The fourth release of MDB 5. It is a minor release that fixes a few small bugs.
Fixed & improved:
- Fixed issue with floating buttons
- Fixed z-index conflicts
- Fixed issue with input autofill
- Fixed navbar-brand alignment
- Fixed issue with card borders
- Fixed issue with checkbox focus
- Fixed issue with dropdown on mobile
New:
- Form validation
- CDN installation
- Autoinitialization of popovers and tooltips
Version v1.0.0 Alpha 3, released 13.07.2020
The third release of MDB 5. It is a minor release that fixes a few small bugs.
Fixed & improved:
- Fixed issue with outline forms
- Improved footers
- Fixed issue with active state of the toggle button
- Unified sytnax of the hover effects
- Fixed issue with segmented buttons
New:
- Dropdown animation
- New color palette
- Outline form for dark theme
- Notification dropdown
Docs:
- Added utilities docs
Version v1.0.0 Alpha 2, released 06.07.2020
The second release of MDB 5, which fixes many bugs and introduces many improvements.
Fixed & improved:
- Improved animations
- Fixed breadcrumbs in the navbar
- Fixed aligning buttons, icons, images in the navbar
- Fixed aligning icons in floating buttons
- Shadows
- Fixed validation for forms check and input group
- Improved color in the
.bg-light
class - Fixed bugs with displaying the wrong color border in outline input
- Improved styles for input group
- Fixed bug with the ripple display property
New:
- Masks
- Hover effects
- Positioning for modals
- Footer
- Covers
- Floating buttons
Docs:
- Almost all docs updated and improved
- Added API section to each docs
Version v1.0.0 Alpha 1, released 22.06.2020
The initial release of MDB 5 Alpha 1 integrated with Bootstrap 5 Alpha 1.