MDB 5 Changelog

Don't miss MDB Standard updates! Join our mailing list & receive information whenever a new update is released.

By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Policy

Version 3.5.0, released 19.04.2021

Dependencies:

Updated Bootstrap 5 to Beta 3 version

Changes:

Removed flip option from dropdowns
Lightbox - fixed original size images loading in fullscreen
Select - updated z-index attribute
Accordion - arrow animation updated
Added new .list-group-numbered variation to list groups that uses pseudo-elements for numbering list group items
Added tabs with buttons variation to the tabs component
Added pills with buttons variation to the pills component
Added new Reboot documentation page
Improved carousel swipe behaviors for RTL
Disabled default select now render consistently in Chrome
Button elements now grow in .nav-fill and .nav-justified

Fixed

Fixed text-overflow: ellipsis for Input label
Fixed focus toggle button after close Timepicker
Fixed focus toggle button after close Datepicker
Fixed date picking after clicking on empty area in Datepicker
Fixed disappearing list items when copying an item in Transfer plugin
Fixed triggering onChange event in Color picker plugin
Fixed default color set in HEX format causes an error in Color picker
Fixed triggering events in Transfer plugin
Fixed container width update after resize in Autocomplete
Fixed Select does not close when another Select is opened
Fixed Sidenav toggle button stop working if a lightbox is added on the page
Fixed Sidenav toggle button stop working after selecting option in Select
Fixed clicking cancel should cancel date and time selection in DateTimepicker
Fixed Datatable with selectable and fixedHeader options
Fixed Multiselect label position after deselecting all options
Fixed Timepicker behavior on the page without scroll
Fixed event.preventDefault() does not stop code execution in Dropdown
Fixed height of button within an input group
fixed tooltips not appearing after rapid focus in and out
fixed dropdown events not bubbling and forms inside dropdowns not propagating
Fixed min and max date in Datepicker

Version 3.4.0, released 22.03.2021

New features:

New Dark skin for free users

New plugin:

Fixed

Fixed Radio buttons styles
Fixed Checkbox styles
Fixed Popconfirm file name

Version 3.3.0, released 22.02.2021

Dependencies:

Update Bootstrap 5 to Beta 2 version
Update fontAwesome to 5.15.2

Changes:

Navbars

Added a new .navbar-nav-scroll class to enable vertical scrolling when a collapsed navbar is opened.
Re-added flex-grow to the .navbar-collapse to restore the flexbox behaviors from v4 and prevent some content from being inadvertently squished.

Carousels

Updated docs examples to use <button>s wherever possible instead of <a> elements.
CSS selectors changed for using <button>s as indicators (from .carousel-indicators li to .carousel-indicators [data-bs-target]).

New plugin:

Organization chart

New component:

DateTime picker

Fixed

Fixed Input radio inline
Fixed validation in progress
Fixed for dark theme
Fixed alert color property update
Fixed removing listeners on dispose in animation

Deprecated:

.carousel-indicators li. New: .carousel-indicators [data-mdb-target]

Version 3.2.0, released 25.01.2021

New Plugin:

Scroll status

New features:

Added helper text, counter and icons in Inputs
New dark skin

Fixed

Popconfirm - Fixed issue with reopening popconfirm after closing with ok button
Search - Fixed styles
Fixes for dark theme

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 and dropend.
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() and border-right-radius() to border-start-radius() and border-end-radius() — as well as their corner relative variants (eg. .border-bottom-left-radius became .border-bottom-start-radius).
Renamed caret-left() and caret-right() to caret-start() and caret-end() — subsequently, the caret() mixin now takes start and end as arguments instead of left and right.

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 to dart-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 to shift-color() to avoid collision with Sass’s own color scaling function.
Added .fs-* utilities for font-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:

Blog:

New plugins:

Updated plugins:

Vector Maps

Fixed & improved:

Select

Add closing animation
Arrow position update
AppendToBody option can be disabled
Hidden mode integration

Charts

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:

Datepicker

Toggler icon position fix
Z-index update

Select

Options height change
Size and form-white new options
Clear button fix

Lightbox

Add option for choosing fontAwesome version (free/pro)

Input

Placeholder is now visible if label is not set

250 new design blocks:

New docs:

Advanced charts

New templates:

New plugins:

Version 1.1.0, released 07.09.2020

Fixed & improved:

Select

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

Datapicker

Resolved the problem with page reload on the toggle button click when the component is inside a form

Charts

Added chartjs-datalabels plugin directly to the Chart
Added default settings for all datasets

Datatables

Added Material Select
Added clickable header

Stepper

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 Pro

Version 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:

New design blocks:

Together with MDB 5 Beta 2 we are also publishing the first version of MDB 5 Pro.

MDB 5 Pro

Version 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:

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.