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 4.4.0, released 01.08.2022

    Fixed & improved:

    • Datatables
      • Added setActivePage method for pages navigation
      • Fixed select all state on rows toggling
    • Vector maps
      • Fixed update and dispose methods for dynamic attribute updates
    • Ripple
      • Fixed on inputs
    • File upload
      • Fixed disabled remove button option
    • Select
      • Hide caret in select with validation
      • Fixed select-all option disabling when filtering is enabled
      • Added new example with first option hidden and selected
      • Fixed changing focus on tab click
    • Treetable
      • Fixed arrows active states on collapsing
    • Dropdowns
      • Fixed animation when input is inside
    • DateTimepicker
      • Added disablePast and disableFuture options
      • Fixed inline mode
      • Fixed navbar content displacement on toggling
    • Datepicker
      • Fixed navbar content displacement on toggling
      • Added examples for disablePast and disableFuture options
      • Fixed template when years view is set as default
    • Timepicker
      • Fixed navbar content displacement on toggling
      • API docs update
      • Fixed validation error while toggling between AM and PM
      • Fixed bug on iPads caused by not detecting them as mobile devices
    • Autocomplete
      • Fixed making subsequent selections

    Design updates:

    • Added new color classes .bg-grayish, .text-grayish, .link-grayish, .btn-grayish
    • Updated icon colors of basic light navbar and footer with grayish color
    • Added new horizontal dividers classes .hr and .hr-blurry
    • Updated styles of vertical divider class .vr and add new class .vr-blurry
    • Added new sidenav with menu categories and class .sidenav-sm
    • Added new object-fit and object-position utilities

    Version 4.3.0, released 11.07.2022

    Fixed & improved:

    • Lightbox
      • Added container option
      • Fixed caption attribute
      • Fixed zoom pinch behavior
    • Select
      • Fixed deleting labels on dispose() issue
      • Prevent submit on enter in dropdown
    • Autocomplete
      • Added container option
      • Prevent submit on enter in dropdown
    • Datepicker
      • Added disablePast and disableFuture options
      • Added container option
    • Timepicker
      • Added update() method
      • Added container option
      • Added disablePast and disableFuture options
      • Fixed minTime minutes validation
    • DateTimepicker
      • Fixed remove elements on dispose()
      • Fixed init after dispose()
      • Added container option
    • Table editor
      • Make sort case insensitive
      • Fixed sort when pagination is off
    • Disable arrows when no results after search in Datatable
    • Fixed Ripple effect in Firefox
    • Fixed update() method in Charts
    • Fixed verticalAlignment center add top in Parallax
    • Change placeholder source site in Dummy
    • Fixed Non-invasive modal position on resize
    • Onboarding z-index changed to 1075
    • Added removeItem method in Sortable
    • Added possibility to set customId for source and target data in Transfer

    Version 4.2.0, released 13.06.2022

    Fixed & improved:

    • Datatable
      • Fixed pagination after search
      • Fixed display of empty cells
      • Fixed sort when pagination is off
      • Make sort case insensitive
      • Exclude html tags from search
      • Add forceSort option
    • Select
      • Fixed label display in multiselect
      • Fixed toggle Select all in multiselect after search
      • Fixed tabIndex for Select input
    • Datepicker
      • Fixed data-mdb-min and data-mdb-max
      • Fixed selected date update after press the enter key
      • Fixed selected date reset on clear
      • Added update() method
    • DateTimepicker
      • Fixed component init after dispose
      • Added update() method
    • Prevent scroll Sidenav container after press the spacebar key
    • Fixed long label for checkbox and radio
    • Fixed short events display in Calendar
    • Fixed init Countdown after dispose
    • Fixed setCountdownDate in Countdown when the counting is over
    • Prevent selection of disabled elements in Tree view
    • Added mime_type translation for file formats in File upload

    Design updates:

    • Added new values for shadows standard and shadows strong
    • Changed shadows for components such as card, popover, toast, modal, image hoverable, dropdown menu, popconfirm
    • Changed styling of border for card, modal header and footer
    • Changed table font weight and text color
    • Added .table-group-divider and .table-divider-color classes to emphasize the separation of thead from tbody
    • Added new divider horizontal, vertical and blurry
    • Changed checkbox and radio border color
    • Changed switch background color
    • Changed checkbox border radius size
    • Changed list group pagination and dropdown text color as it is in the body
    • Changed toast color palette
    • Changed datatables striped and hover background color as it is in the usual table
    • Changed select states background colors
    • Changed sidenav icons colors and width of the slim version
    • Changed chips font weight, text color, border width and added new closure icons

    Version 4.1.0, released 23.05.2022

    Fixed & improved:

    • Fixed Stepper mobile trigger submit on navigation button click issue
    • Fixed Stepper linear jumping to another validated step issue
    • Fixed Chips trigger delete event issue
    • Fixed typo in aria-haspoup in Autocomplete
    • Fixed Autocomplete select "No results found" issue
    • Fixed Datatable pagination when there no rows issue
    • Fixed Toasts delay option
    • Add type="button" to insert horizontal line button in WYSIWYG editor plugin
    • Code refactor to simplify code in Transfer plugin

    New features:

    • Add option to disable click on Stepper header
    • Add options to translate navigation buttons and header text in Stepper mobile
    • Add all option to pagination in Datatable
    • Add options to translate of in pagination section in Datatable

    Version 4.0.0, released 19.04.2022

    Dependencies:

    • Updated Chart.js from 2.9.3 to 3.7.1 version. Check the updated docs. Main changes:
      • xAxes and yAxes renamed to x and y and changed from arrays to objects
      • gridLines renamed to grid
      • fontColor renamed to color
      • fontFamily, fontSize, fontStyle and fontLineHeight renamed sequentially to font.family, font.size, font.style, font.lineHeight
      • legend, title and tooltip namespaces moved from options to options.plugins
      • removed moment.js from dependencies
      • refactored animations

    New Design Blocks:

    Fixed & improved:

    • Updated Calendar:
      • moved from moment to lightweight dayjs modern alternative
      • redesigned toolbar, events, views and modals
      • fixed events triggering
      • replaced view toggle buttons by a select
      • created an Add Event button
      • added Readonly events
      • added Modules disabling
      • added Blur option
      • added Custom attributes integration
      • improved long events styling
      • improved responsiveness
      • improved events output data parsing
    • Improved Input border animation
    • Added List Group new variant with .list-group-light class
    • Added Select on Tab press dropdown closing feature
    • Added autoSelect option for Select and Autocomplete components
    • Fixed Select's first hidden and selected option validation issues
    • Integrated Non-invasive modal with other modals while toggling
    • Changed table background color on hover state
    • Fixed bg-body color in dark theme

    Optimized:

    • MDB PRO bundle size decreased by 30% thanks to the Chart.js migration

    Removed:

    • deprecated button close classes. Old: .close. New: .btn-close, .btn-close-white
    • deprecated embed classes. Old: .embed. New: .ratio
    • deprecated flags classes. Check Flags docs.
    • deprecated carousel indicators classes. Check Carousel docs.
    • deprecated utils

    Version 3.11.0, released 14.03.2022

    Dependencies:

    Fixed & improved:

    • Integrated system-wide animations with our components
    • Improved Datepicker current, active and selected elements marking
    • Fixed Select validation issues
    • Fixed non-invasive Modal focus trap issue
    • Improved Checkbox and Radio long labels wrapping
    • Add missing --mdb-bg-opacity variable
    • Speed up sidenav toggle animation

    Version 3.10.2, released 17.01.2022

    Fixed:

    • Fixed triggering a close event after Select close
    • Fixed Scrollspy re-initialization after dispose

    Optimization:

    • MDB5 docs migration from Wordpress to Hugo

    Version 3.10.1, released 22.11.2021

    Fixed:


    Version 3.10.0, released 15.11.2021

    Dependencies:

    • Updated Bootstrap to 5.1.3 version

    Fixed:

    • Fixed overflowing text on icon in Datepicker
    • Fixed dart sass variables divide bug
    • Fixed Sidenav slim animation
    • Fixed tooltips value in Multi Range Slider
    • Fixed navigation when max date is set in Datepicker
    • Fixed styles for white Select
    • Fixed styles for native select
    • Fixed empty filelist after uploading multiple files in File upload

    New features:


    Version 3.9.0, released 12.07.2021

    Fixed:

    • Fixed Select init without options
    • Fixed Chips active element transition
    • Fixed date selection view navigation when min/max date is set in Datepicker

    New features:


    Version 3.8.1, released 28.06.2021

    Fixed:

    • Fixed m/d/yyyy format in Datepicker
    • Fixed date selection when min date is set in Datepicker
    • Fixed issue with Clipboard when it is inside a modal
    • Fixed position option in Toast
    • Fixed secondary text = 0 issue in Select
    • Fixed Select value after use clear button
    • Fixed open Select using external element
    • Fixed time selection on mobile devices in Timepicker - no more errors in console.
    • Fixed VectorMap is not a constructor bug in Vector maps
    • Fixed Treeview is not a constructor bug in Tree view

    Version 3.8.0, released 14.06.2021

    Fixed & improved:

    • Fixed startDate options types in Datepicker
    • Fixed setValue methods - the code will no longer stop if the value does not exist Select
    • Select now can be used in the Input Groups Select
    • Fixed bug when tab is a <button>, not <a> in Tabs
    • Fixed page content moving after opening Timepicker
    • Fixed converting hours from 24h to 12h option in Timepicker
    • Fixed closing DateTimepicker on outside click
    • Fixed image resize onClick bug when Ripple is added to the image

    Version 3.7.1, released 31.05.2021

    Fixed


    Version 3.7.0, released 31.05.2021

    Dependencies:

    • Updated Bootstrap to 5.0.1 version

    Fixed & improved:

    New features:

    • Optimization - the possibility of installing individual pro modules has been added to reduce the weight of js and css files imported in the project

    Version 3.6.0, released 17.05.2021

    Dependencies:

    Fixed & improved:

    • Dropdown menus now have option become clickable
    • Added support for .dropdown-items wrapped in <li>s
    • Add color-scheme mixin
    • Make accordion icon rotation more natural
    • Decouple backdrop from modal
    • Decouple modal's scrollbar functionality
    • Simplify modal config
    • Simplify scrollspy config
    • Make EventHandler better handle mouseenter/mouseleave events
    • Refactor dropdown hide functionality
    • Fix dropdown escape propagation
    • Fix wrong carousel transformation, direction to order
    • Scrollbar: respect the initial body overflow value
    • Fix input fieldsform-notch multiplication
    • Fix datatable with option
    • Fix sidenav and navbar z-index

    Version 3.5.1, released 04.05.2021

    Fixed

    • Fixed position of stackable elements when reopened
    • Fixed autocomplete width after resize
    • Fixed duplicating input notch
    • Fixed table transition and background color on hover
    • Fixed datatable sort when pagination is off
    • Fixed Datepicker and Timepicker z-index
    • Fixed carousel interval option
    • Fixed width of pills when they're filled or justified
    • Fixed accordion styles - removed unnecessary colors, shadows, added needed borders
    • Fixed local img display in Ecommerce gallery

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

    New component:

    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:

    New features:

    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:

    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:

    New features:

    New templates:

    New plugins:

    Updated plugins:

    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:

    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:


    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:


    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:

    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.