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 8.0.0, released 16.09.2024
Breaking changes:
- Changed the version numbering method for plugins. From now on, every release will include a new plugin version to ensure compatibility with the corresponding MDB Standard UI Kit version
- Removed SCSS-based dark theme in favor of the CSS-based dark theme
- eCommerce Gallery - added required
data-mdb-image-wrapper
to the HTML template - Datetimepicker
- removed
invalidLabel
option - removed
appendValidationInfo
option
- removed
- Table Editor - removed
dark
option and the variables used for styling it - Datatable - removed
dark
option and the variables used for styling it - Timepicker - removed
invalidLabel
option
New Features:
- Timepicker
- added
open
method - added
close
method - added
open.mdb.timepicker
event - added
close.mdb.timepicker
event
- added
- Calendar - added
dateFormat
option - Popconfirm - added
cancelClass
option - Progress - added circular progress feature
Fixes & Improvements:
- Timepicker
- fixed keyboard handling bug for inner clock after a mouse click
- fixed issue where showing inline with modal blocks the page
- Calendar - fixed
dateFormat
in datepicker - Vector Maps - updated touch event handling to utilize the touch component
- Alert - fixed autohide not to set up for hidden alerts
- Datepicker - fixed issue with
readonly
breaking the input toggler - Datetimepicker - fixed scroll blinking after cancel button click in timepicker
- Lightbox - fixed initialization via JavaScript
- Perfect Scrollbar - fixed touch behavior
- Select - fixed for focused invalid select
Design Updates:
- Pills - added negative right margin for justified content alignment
Version 7.3.2, released 17.06.2024
See legacy docs for this versionFixed & improved:
- Autocomplete - fixed behavior for
Shift + End
andShift + Home
key combinations - Select - fixed placeholder in single select
- Fixed manual initialization of components
Version 7.3.1, released 10.06.2024
Fixed & improved:
- File upload
- fixed preview not displaying for extensions:
webp
,bmp
,gif
- fixed option
acceptedExtensions
bug for.zip
extension
- fixed preview not displaying for extensions:
- Input fields
- added CSS variables to allow easier outline customization
- fixed error that was triggered on focus after dispose
- fixed the placeholder display for input fields of type:
time
,datetime-local
,month
,week
- Calendar - fixed display issue with long events
- Drag and drop - fixed animation for
blockXAxis
- Multi item carousel - fixed timeout for the first slide display in upward animation
- Treeview - fixed checkbox click toggling collapse
- Vector maps - fixed zoom buttons shadow
- Accordion - fixed downward facing arrows display in light theme
- Select - fixed select outline bug after validation
- Stepper - fixed option
stepperOptional
- Fixed manual initialization breaking auto-initialization for some components
Version 7.3.0, released 27.05.2024
Dependencies:
- Updated Bootstrap to 5.3.3 version
New features:
- Datetimepicker - added information about the current value to
valueChanged.mdb.datetimepicker
event
Fixed & improved:
-
Calendar
- fixed error occurring on view change
- fixed week view header background color
-
Organization chart
- fixed card background color
- fixed vertical line color in dark theme
-
Charts
- fixed bug after update
- fixed styles not updating when switching from dark to light theme
-
Datatable
- fixed
All
as entries option value - fixed active in clickable rows not applying styles
- fixed
-
Datetimepicker
- fixed passing options to pickers
- fixed picker styling on small screens
-
Select
- fixed hiding groups with filtered out options
- fixed not changing active class with focused element in multiple select
-
Timepicker
- fixed styling in dark mode for inline picker
- fixed timepicker dispose breaks dropdowns present on the page
- Drag and drop - fixed z-index in nested elements
- File upload - fixed console error after adding file
- Multi item carousel - fixed first element animation
- Mention - fixed illegal invocation bug after click on no results
- Onboarding - fixed scrolling when no scrollbars are present
- Table editor - fixed styles for table editor hover and striped not applying
- Autocomplete - fixed error while clicking no result
- Input fields - fixed background after autocomplete
- Sidenav - fixed link styles not using variables
Version 7.2.0, released 11.03.2024
New features:
-
Datepicker
- added
viewChanged.mdb.datepicker
event - changed days
aria-label
to be human readable
- added
- Datatable - allow setting table ID
- Select - added
search.mdb.select
event - Timepicker - added
clear.mdb.timepicker
event
Fixed & improved:
-
Transfer
- fixed search input init and style
- fixed triggering
search.mdb.transfer
event - fixed checkbox in transfer header
-
Popconfirm
- fixed triggering
cancel.mdb.popconfirm
event - fixed
dispose
method
- fixed triggering
-
Chips Input
- fixed bug with input init
- fixed enter keydown triggering form submission
-
Datatable
- fixed sort reset pagination
- improved performance while cell formatting many columns
- fixed borders bug with fixed option
-
Datepicker
- fixed datepicker cell width
- added
aria-disabled
to disabled dates, month and years
-
DateTimepicker
- added functionality to save the selected date when the timepicker toggle button is clicked
- fixed navigation to initial time and date on open
-
Select
- added update of
aria-expanded
on open and close - fixed clear button action with hidden option
- added update of
-
Sidenav
- improved marking of active item
- fixed transform with RTL when option
hidden
is set to false
- Animated navbar - fixed auto init
- Calendar - fixed view change select
- Input Mask - fixed bug after backspace keydown
- Table editor - fixed rows per page select
- Treeview - fixed auto select of parent checkbox
- Treetable - fixed animation on open
- Carousel - fixed dark variant
- Modal - fixed
dispose
method - Autocomplete - added update of
aria-expanded
on open and close - Multi Range Slider - fixed
start.mdb.multiRangeSlider
event - Timepicker - fixed RTL styling - clock and button position
- Fixed
$form-check-input-hover-before-box-shadow
SCSS variable
Version 7.1.0, released 04.12.2023
Fixed & improved:
-
Select
- fixed an issue with opening the select using arrow keys
- fixed
valueChanged
event triggering after callsetValue
method - fixed clear button disabled when
disable
attribute is set
-
Datatable
- Added support for setting
entriesOptions
using the data attribute - fixed Datatable styles for option `striped`
- fixed Datatable styles for option `hover`
- Added support for setting
- Popconfirm - fixed focus for modal mode
- Multirange - fixed undefined selector issue
- Stepper - fixed disabled text color
- Timepicker - fixed time change after long click on arrow in inline mode
- Fixed border color
Version 7.0.0, released 20.11.2023
Breaking changes:
- Changed HTML init for all components and plugins to unified data attributes
- Unified event and method names, added new events, removed some methods
- Changed names of Javascript files
- We moved from preparing files with compiled modules for every component to using ES modules.
- Timepicker
- Removed
appendValidationInfo
andenableValidation
options - Renamed
headID
option toheadId
- Renamed
bodyID
option tobodyId
- Renamed
footerID
option tofooterId
- Renamed
modalID
option tomodalId
- Renamed
pickerID
option topickerId
- Removed
To make transition to MDB v7 easier we prepared a list of changes needed in existing projects, which you can find in Migration guide
Design updates:
Introduced a new theming system that allows setting the theme for the entire page, its parts, or selected elements using data attributes
Read Colors modes page to learn more about new theming
Fixed & improved:
-
Select
- fixed dispose to restore custom content
- fixed infinite error after image loading error
- WYSIWYG - fixed padding in the dropdown when WYSIWYG is used in the form
- Calendar - fixed validation issues in the add event modal
- Treeview - added support for custom ID for treeview items
- Table editor - fixed pagination to be responsive
- Datepicker
- Removed option
switchToMonthViewLabel
- Changed default values for
switchToMultiYearViewLabel
andswitchToDayViewLabel
options
- Removed option
- Lightbox - removed option
fontAwesome
- Charts
- Removed option
dataLabelsPlugin
- Added
register
method allowing controllers registration
- Removed option
- enhance the dispose method for all components
Other:
Changed bundler used for compilation to Vite
Version 6.4.2, released 25.09.2023
See legacy docs for this versionFixed:
- Buttons - fixed styles for floating buttons with
a
tag -
Lazy loading
- fixed options types
- fixed infinite error after image loading error
- fixed animations
- Select - fixed cross-site scripting (XSS) issue
-
Sidenav
- fixed icons styles
- fixed issue with sidenav right opening when page scroll is present
- fixed open issue for Sidenav RTL
- fixed issue with sidenav opening when using RTL
- Timepicker - fixed
active
class toggling foram
/pm
toggler - fixed
--mdb-link-decoration
CSS variable
Version 6.4.1, released 31.07.2023
Fixed & improved:
- Autocomplete - fixed
e.preventDefault()
issue with Popper.js open method - Autocomplete - fixed label error on outside click
- Collapse - fixed
e.preventDefautl()
on Mdb events - Cookies management - deleted empty CSS and SCSS files
- Datatable - fixed
thead
border visibility in the dark theme - Datepicker - fixed arrows position in RTL
- Input mask - improved event binding cleanup within the
dispose
method - Lightbox - fixed
z-index
css variable - Loding managment - fixed
dispose
method to remove the backdrop properly - Modal - fixed
e.preventDefault()
on Mdb events - Popconfirm - improved event binding cleanup within the
dispose
method - Popover - fixed
e.preventDefault()
on Mdb events - Storage management - deleted empty CSS and SCSS files
- Tabs - fixed
e.preventDefault()
on Mdb events - Toast - fixed initialization and option passing via jQuery
- Toast - fixed
e.preventDefault()
on Mdb events - Tooltip - fixed
e.preventDefault()
on Mdb events - fixed
$purple
SCSS variable
Version 6.4.0, released 12.06.2023
New features:
- Datepicker -
Added the
headerTemplate
andheaderTemplateModifier
options to allow customization of the header - Select -
Added the
filterFn
option to enable customization of the filtering function - Stepper -
Added the
resizeStepper
method to allow resetting the height and view of the stepper -
The generated sub-element IDs will be based on the element's ID for
Autocomplete,
DateTimepicker,
Datepicker,
Select,
Timepicker,
Popconfirm
components; e.g. setting
my-id
as select ID will result inselect-wrapper-my-id
as select wrapper ID - WYSIWYG editor - Added
wysiwygTextareaName
option that allows setting a customname
for wysywig
Fixed & improved:
-
Datatables
- Fixed hover styles for fixed columns
- Fixed update method not updating
sortField
andsortOrder
options
-
Multi Range Slider
- Fixed thumb position for minimum range of slider
- Fixed thumbs positions when
startValues
are set - Fixed typo in the variable name
-
Sidenav
- Remove duplicated default from SCSS variable
$sidenav-link-font-size
- Fixed the issue of unnecessary padding being added to content when using the
update
method - Fixed bug with using
data-mdb-position="absolute"
with.position-relative
class - Fixed
update
method when passing a new color
- Remove duplicated default from SCSS variable
-
Table editor
- Fixed pagination not updating after new row is added
- Fixed typo in the
.form-notch-middle
selector in SCSS file - Updated
focusTrap.js
to skip disabled elements
-
Timepicker
- Fixed issue with flickering minutes tips
- Fixed setting an incorrect time based on the input value for 12:00 PM
- Fixed small screen ripple animation and styling issues for landscape orientation
- Fixed the button press behavior to consider the duration of the press
-
Tree view
- Fixed events propagation
- Fixed the
filter
method - Changed
margin-bottom
to zero for the lastli
-
WYSIWYG editor
- Fixed wysiwyg doesn't submit value
- Fixed
Insert link
andInsert image
buttons not opening dropdown menu on small screens - Added preventive values to
.wysiwyg-content
class
- Optimization of components code - We separated the common logic of some components that handle events
- Animations - Added option to hide elements before animation start using
.invisible
class - Autocomplete - Fixed dropdown issue with
open
method - Buttons - Adjusted SCSS to use variables for maped styles
- Datepicker - Fixed arrows direction in RTL
- Dropdowns - Fixed alignment when
.dropdown-menu-end
class is used - eCommerce gallery - Fixed issue with thumbnails with the same url
- Infinite scroll - Fixed window scroll condition that resulted in a bug on mobile
- Lazy loading - Fixed error loop and add error message
- Lightbox - Fixed
dispose
method that causedsidenav
toggler to stop working after disposing ofLightbox
oreCommerce gallery
instace - Modal - Fixed non-invasive modal issues after window resize
- Rating - Fixed no tooltips after reinitialization
- Scroll Status - Fixed multiple modal bug
- Select - Fixed issue with label position after reinitializing the component
- Touch - Added event data to touch events
Version 6.3.1, released 22.05.2023
Fixed & improved:
-
Chips - Fixed triggering of the
add.mdb.chips
event after adding a chip -
Datatables - Fixed scrolling behavior when searching in a table with set
maxHeight
- Rating - Fixed the resetting of the default value of the rating on hover
-
Touch - Fixed the bug in the
handleTouchMove
method - Select - Fixed select outline and label styles
Version 6.3.0, released 08.05.2023
Fixed & improved:
-
Select
- Fixed selected value display when more than one option has no value
- Fixed keyboard accessibility. Now
alt
+ArrowDown
can be used to open select dropdown - Fixed select
.form-white
border color on focus - Fixed the
autocomplete="off"
attribute to be copied to the input field" - Added
shown.mdb.select
andhidden.mdb.select
events
-
Color picker
- Fixed slider color update
- Fixed canvas color update when default value is set
- Fixed slider styles for Firefox
- From now
onChange.mdb.colorPicker
event returns selected color
-
Calendar
- Fixed sunday events display in list view
- Fixed select view input to change value after calling
changeView()
method - Added
datepickerOptions
andtimepickerOptions
properties to enable setting custom Datepicker and Timepicker options
-
Charts
- Fixed set options using jQuery init
- Fixed options update using
update()
method - Changed how dependencies are imported. Thanks to this, using MDB in bundlers will not require additional plugins or project configuration
- Timepicker - Fixed font size for hours and minutes on smaller screans
- Datepicker - Fixed buttons styles on focus
- Autocomplete - Fixed keyboard action for
home
andend
keys - Dropdowns - Fixed responsive aligned for dropdown menu display
- Modal - Fixed non-invasive bottom modal display
- Sidenav - Fixed
.sidenav-link
to use css variables for padding left - Clipboard - Fixed copying multiple text lines
Version 6.2.0, released 27.02.2023
New integrations:
In this realease, we have added instructions on how to add our package in backend frameworks. We chose some of the most popular frameworks and described the whole process step by step.
Fixed & improved:
-
Range
- Code refactor
- Fixed
oninput
event
-
Select
- Fixed select arrow display
-
Datepicker
- Added
confirmDateOnSelect
option - Added
removeOkBtn
option - Added
removeCancelBtn
option - Added
removeClearBtn
option
- Added
-
Collapse
- Added
mdb
events
- Added
Version 6.1.0, released 02.01.2023
Dependencies:
- Updated Bootstrap to 5.2.3 version
Fixed & improved:
-
Timepicker
- Fixed events unbind so they don't unbind events e.g. for Sidenav toggler.
- Fixed inline keyboard accessibility.
-
Scrollspy
- Fixed
target
option passed via JS. - Fixed Scrollspy collapsible.
- Fixed
-
Fixed Datetimepicker
validation that caused an error when entering a date in the
dd mmm yyyy
format. - Fixed Select no result message spacing.
- Fixed Sortable for touch screens.
- Fixed Organization chart lines display for collapsed elements.
- Fixed Treetable styles that affect the Organization chart plugin
Version 6.0.1, released 21.11.2022
Version 6.0.0, released 31.10.2022
Dependencies:
- Updated Bootstrap to 5.2.2 version
Breaking changes:
We changed Animations init via jQuery.
In MDB 5.0.0 we fixed init, but didn't take into account that it would break jQ's animation.
Therefore we change $('#example').animate();
to $('#example').animation();
for our animation component.
We also decided that maintaining two similar options for the Timepicker does not make sense.
minHour
and maxHour
options duplicate the functionality of the minTime
and maxTime
options,
which also offer more possibilities. Therefore, we are removing minHour
and maxHour
options.
- Change Animations init via jQuery
- Remove
minHour
andmaxHour
Timepicker options
Fixed & improved:
- Convert MDB components to CSS variables
- Fixed Ripple efect for input
type='button'
- Fixed DateTimePicker open if Datepicker hasn't selected date
- Timepicker
- Fixed
disablePast
is not defined error - Fixed
minTime
andmaxTime
validating - Disabled adding
active
class for disabled hours-tips in 24h format mode - fixed adding
disabled
class for minutes-tips on toggling AM/PM in minutes view
Version 5.0.0, released 29.08.2022
See legacy docs for this versionMDB 5.0.0 brings many improvements, mostly focused on updating our design system.
Design updates:
First of all - our basic color palette has been updated. We toned down our colors to be less flashy and more elegant and subtle. This affects virtually all of our components, so be aware of this before upgrading your project to MDB 5.0.0.
Read colors docs to learn more about new palette.
Breaking changes:
- Our base buttons have a slightly colorful shadow now. For this reason buttons with custom colors (like social buttons) cannot use base modifier classes like
.btn-primary
,.btn-danger
, etc (because they will cast a shadow of a color that may be not consistent with the background color of the buttons). In this case we suggest to remove the modifier class and and add.text-white
class to fix the problem with the text color. - We implemented a hierarchy in the buttons, so the secondary button changes its color and loses its shadow. We also added a new, tertiary button.
- Button groups that uses secondary buttons now require
.shadow-0
class to fix the problem with a shadow by default added to the.btn-group
class. - We replaced classes
bg-grayish
,.text-grayish
, and.link-grayish
with classes.bg-secondary
,.text-secondary
and.link-secondary
Fixed & improved:
- Improved buttons
- Improved existing accordion and added new examples
- Improved stepper design
- Improved badges design and added new examples
- Improved popovers and popconfirm design
- Fixed bottom frame modal bug on mobile
Additionally:
We have also published a new homepage and a few design improvements in our docs. Let us know how do you like it now!
In addition to the design improvements, MDB 5.0.0 introduces several other significant changes.
Breaking changes:
After checking how our events work in the Table editor plugin, we came to the conclusion that this
requires Breaking changes.
So far, using e.preventDefault()
in our events was not supported.
We changed the behavior of events to trigger them before performing a given action and allow to use
e.preventDefault()
-
for example, to prevent the addition of a row that contains data that we do not want.
We also decided that maintaining two similar events does not make sense. Therefore, we are removing
the updateEntry
event.
From now on, event edit
returns the row that has been edited, removed or added.
- Table editor
updateEntry.mdb.tableEditor
event removedupdate.mdb.tableEditor
event emitted after editing, addition or deletion rowadd.mdb.tableEditor
event emitted before adding rowedit.mdb.tableEditor
event emitted before editing rowdelete.mdb.tableEditor
event emitted before deletion row
Fixed & improved:
- Fixed sticky animations on div
- Fixed Animations init via jQuery
- Fixed DateTimePicker padding for inline pickers
- Fixed elemennt width change when Ripple effect is added
- Fixed Datatables pagination with less then 10 rows per page
- Fixed Select default selected options active class issue
- Fixed DateTimepicker console error on mobile after click ok button, without selecting time
- Fixed Drag and drop remove listener after dispose issue
- Fixed Drag and drop
addItem
method - Fixed multiple values issue in Filters
- Fixed Calendar duplicated delete event
- Added possibility to set Input mask initial input value
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
anddispose
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
anddisableFuture
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-secondary
,.text-secondary
,.link-secondary
,.btn-secondary
- Updated icon colors of basic light navbar and footer with secondary 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
andobject-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
anddisableFuture
options - Added
container
option - Timepicker
- Added
update()
method - Added
container
option - Added
disablePast
anddisableFuture
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
anddata-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:
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
andyAxes
renamed tox
andy
and changed from arrays to objectsgridLines
renamed togrid
fontColor
renamed tocolor
fontFamily
,fontSize
,fontStyle
andfontLineHeight
renamed sequentially tofont.family
,font.size
,font.style
,font.lineHeight
legend, title and tooltip
namespaces moved fromoptions
tooptions.plugins
- removed
moment.js
from dependencies - refactored animations
New Design Blocks:
- Product list and grids - Zoom on hover
- Product categories - Three columns with zoom
- Product filters and sorting - Checked color and size
- Product filters and sorting - Advanced filters
- Store navigation - Centered brand logo
- Product details - Gallery and collapsed details
- Product details - Carousel example
- Forms - Login form welcome back
- Forms - Login form with background image
- Forms - Simple registration form
- Forms - Registration form with background image
- Forms - Subscription form in the card
- Forms - 2 columns subscription form
- Forms - Simple contact form
- Forms - Help and contact form
- Forms - Basic restore password form
- Forms - Login and register form
- Checkout - Advanced checkout form
- Checkout - 2 columns with modals
- Shopping cart - Simple cart
- Shopping cart - Single centered column
- Order history - Basic example
- Order history - Single column
- Product features - A big title
- Product features - Two columns with pictures
- Product features - Three columns
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
- moved from
- 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:
Version 3.11.0, released 14.03.2022
Dependencies:
- Updated Font Awesome to 6.0.0 version
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:
Optimization:
- MDB5 docs migration from Wordpress to Hugo
Version 3.10.1, released 22.11.2021
Fixed:
- Fixed placeholder showing on top of a label in type="date" Input field
- Fixed responsiveness of elements with Ripple effect
- Fixed opening Datepicker when other instance is open
- Fixed select children checkbox when parent is selected in Tree view
- Fixed Datepicker and Timepicker opening and closing animations
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 SCSS 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:
- Collapsible Scrollspy
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:
- Prevent toast autohiding if focusing or hovering
- Fix backdrop rootElement not initialized in Modal
- Fix: Click on input outside of dropdown-menu prevents dropdown from closing
- Fixed Sortable
addItem()
method - Prevent to click on toggler when Datetimepicker is open
- Redesign border radius to 0.5rem for components: Accordion, Alerts, Cards, Dropdowns, Modal, List group, Popconfirm, Popover, Toasts, Dateipcker, Timepicker, DateTimePicker
- Add new styles (background color, text color, border radius) for badges
- Add new design of shadows, for now we have shadows soft, shadows standard, shadows strong
- Redesign shadows for components: Cards, Dropdowns, Modal, Popconfirm, Popover, Toasts, Buttons, Button group, Navbar, Pagination, Pills, Sidenav,
- Redesign padding for components: Accordion, Alerts, Cards, List group,
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:
- Updated Bootstrap to 5.0.0 stable version
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-numbered
t 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
andfixedHeader
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
andmax
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
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.