MDB jQuery Free

Download the latest version

Download Learn more
MDB jQuery Pro

Download the latest version

Download Learn more
Newsletter

Would you like to be notified about next update ?

Subscribe to our newsletter

MDB 4.5.14

What's new?

MDB 4.5.14 has landed with medium improvements like fixed a lot of bugs, new version of Chartjs or change design in index.html at MDB PRO/FREE.


You can download the new version of MDB Free on our website and for MDB Pro from your account page.

What's fixed?

  • Fixed select with attributes select and disabled.
  • Fixed disabled material radio button.
  • Fixed arrow in timeline imges.
  • Fixed blinking streak during scrolling the page.
  • Fixed .active class in material dropdown.
  • Fixed bug with missing top border in responsive bordered table.
  • Fixed bug with leaping border in classic tabs.

What's changed?

  • New version of Chart.js - 2.7.3.
  • New exmaples of charts like: Bubble Chart and Scatter Chart.
  • New 'welome page' in index.html at MDB PRO/FREE file.
  • We finished updated documentation.
  • We extened documentation about Charts with explanation of legends, animations and more.
  • We stopped minify bootstrap.css file with gulp and we included exactly the same minimalized file what have Bootstrap.
  • Removed deprecated code of old timeline from _depriceded.scss in scss/pro.

Added new clases like:

  • md-disabled - when you are using disabled material radio button you have to add this class to see disabled color. You can check here.
  • md-dropdown - when you are using select with attributes select and disabled at the same time you have to add this class to have transparent background. You can check here.

MDB 4.5.13

What's new?

MDB 4.5.13 has landed with huge improvements of sticky component, grid usage and fixed bugs.


You can download the new version of MDB Free on our website and for MDB Pro from your account page.

What's changed?

  • Fixed problems with adding shadow classes to cards
  • Fixed 'undefined' bug in Bar Chart in Admin Dashboard Free Template
  • Moved Extended Cards, Timeline styles to the 'addons' catalog in the package

Changed syntax

  • Timeline - added one new class .timeline-basic and added .timeline class to each version of timeline

With this update, we've also rewritten another of our components. Re-factored Sticky.js was rewritten from the scratch and it's fully compatible with previous versions of MDB.

  • Sticky.js was rewritten from the scratch. As of MDB 4.5.13, we use our own plugin instead of 3rd party plugin from Andrew Henderson
  • Made the code of Sticky plugin cleaner and improved its readability
  • Improved usage with Bootstrap grid. While the old plugin had some issues with Bootstrap's grid, a new version of Sticky works well with Bootstrap's flexbox-based grid.

Added two new functions:

  • minWidth allows specifying the minimal width of the viewport to take effect of Sticky
  • startScrolling lets to decide on which moment the Sticky will take effect. This can be set to top (default) or bottom

Deprecated - these settings will be stored only by one version yet

MDB 4.5.12

What's new?

MDB 4.5.12 has landed with a huge improvements like new steppers, new dropdown with search and fixed bugs.


You can download the new version of MDB Free on our website and for MDB Pro from your account page.

What's changed?

What's new?

Added new dropdown with search field.

Added new dynamic steppers . With this new components coming new amenities and changes like:

  • Stepper "Horizontal steppers" is available in MDB Free.
  • Stepper "Vertical steppers" is available in MDB Free.
  • Timelines code css are in MDB Pro package now.
  • Stepper "Registration form with steps" is removed from MDB Pro and will be removed from MDB in future releases.
    Also "Registration form with steps" is available on our snippets.
  • Stepper "Vertical registration form steps" is removed from MDB Pro and will be removed from MDB in future releases.
    Also "Vertical registration form steps" is available on our snippets.
  • Stepper "Steps within form" is removed from MDB Pro and will be removed from MDB in future releases.
    Also "Steps within form" is available on our snippets.

MDB Lite

With 4.5.12, we'd like to introduce MDB Lite. MDB Lite, it's a lean version of MDB where the less-important modules were separated. By removing these modules we've reduced the size of our CSS and JS files. Our MDB Pro and MDB Free packages now include two versions of MDB: Standard and Lite. Packages that were removed from MDB Lite still can be used by attaching an appropriate file from "modules" directory.

From now on you can either still use MDB in the same way as before - by loading mdb.css / mdb.js:

Example:


  <!-- MDB JavaScript -->
  <link href="css/mdb.min.css" rel="stylesheet">

  <!-- MDB Modules (optional) -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  

Or load only a core modules by loading mdb.lite.css / mdb.lite.js, and add modules you need:

Example:


  <!-- Material Design Bootstrap Lite -->
  <link href="css/mdb.lite.min.css" rel="stylesheet">
  <!-- MDB Modules (optional) -->
  <link href="css/modules/accordion-extended.min.css" rel="stylesheet">
  <link href="css/modules/animations-extended.min.css" rel="stylesheet">
  <link href="css/modules/cards-extended.min.css" rel="stylesheet">
  <link href="css/modules/charts.min.css" rel="stylesheet">
  <link href="css/modules/lightbox.min.css" rel="stylesheet">
  <link href="css/modules/megamenu.min.css" rel="stylesheet">
  <link href="css/modules/parallax.min.css" rel="stylesheet">

  <!-- MDB JavaScript light -->
  <script type="text/javascript" src="js/mdb.lite.min.js"></script>

  <!-- MDB Modules (optional) -->
  <script type="text/javascript" src="js/modules/chart.js"></script>
  <script type="text/javascript" src="js/modules/chips.js"></script>
  <script type="text/javascript" src="js/modules/jarallax.js"></script>
  <script type="text/javascript" src="js/modules/jarallax-video.js"></script>
  <script type="text/javascript" src="js/modules/jquery.easypiechart.js"></script>
  <script type="text/javascript" src="js/modules/lightbox.js"></script>
  <script type="text/javascript" src="js/modules/picker.js"></script>
  <script type="text/javascript" src="js/modules/picker-date.js"></script>
  <script type="text/javascript" src="js/modules/picker-time.js"></script>
  

MDB 4.5.11

What's new?

MDB 4.5.11 has landed with a few small improvements, two updates and new styles for carousel and gradients.


You can download the new version of MDB Free on our website and for MDB Pro from your account page.

What's changed?

  • Updated popper.js to the newest version - 1.14.4
  • Updated jarallax.js to the newest version - 1.10.4
  • Created new carousel - Carousel with lightbox
  • Fixed bug with YouTube video in SAAS Template - home-video page
  • Fixed problems with not centered tooltips
  • Fixed problems with color of search input within skins
  • Moved colors loops from the _colors.scss file to the _global.scss file
  • Added new free gradients

Changed syntax

  • Text color replaced .default-text, .primary-text, .secondary-text, .success-text, .danger-text, .warning-text, .info-text classes with Bootstrap ones: .text-default, .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info

Deprecated - these settings will be stored only by one version yet

  • .default-text, .primary-text, .secondary-text, .success-text, .danger-text, .warning-text, .info-text classes

We removed these classes from the package as we wrote in previous changelogs:

  • .full-bg-img
  • .full-height
  • .side-nav .double-navbar .bc-min
  • .no-padding
  • .ql-modal, .product-panel
  • .no-radius
  • .section-blog-fw
  • .personal-sm
  • .classic-tabs (previous syntax not classic tabs at all)
  • .naked-card
  • .pricing-card .heading .card-overlay

MDB 4.5.10

What's new?

MDB 4.5.10 has landed with medium improvements and new components - like new cards, animations and also fixed a lot of bugs.


You can download the new version of MDB Free on our website and for MDB Pro from your account page.

What's changed?

  • Added new cards: presenting combination of colors
  • Added new class .darker-striped to _pricing.scss
  • Align height of our inputs - standard one, select, file input, time picker, date picker
  • Fixed bug with not loading files names in file input
  • Fixed bug with links in a list inside fixed action button
  • Fixed animation card
  • Fixed accordion gradient background
  • Fixed color of text in light badge
  • Fixed bug with shadow in simple and images timeline
  • Fixed bug with animation filed-in in checkboxes
  • Fixed bug with bootstrap slider depend value on MDB slider
  • Updated animations to the newest version. New classes have been added, such as: .slow, .slower, .fast, .faster, .delay-1s, .delay-2s, .delay-3s, .delay-4s, .delay-5s and the new animation .heartBeat
  • Deleted unnecessary code in DataTable HTML
  • Changed display of table on mobile and tablet devices in Ecommerce Template Pro

Changed syntax

  • Select - added .md-form class to the <select> tag

Also few bugs in Material Select has been fixed:

  • Changing properties of <options> was crashing the browser. The problem was with MutationObserver which weren't disconnected before re-rendering the select and they were multiplicating exponentially on each select change
  • The "Toggle all" option in the multiselect was setting wrong values and submitting a form wasn't working as expected
  • If the Material Select was marked as [required] in the form, each change was resulting in duplicating the styles of the native <select> element

MDB 4.5.9

What's new?

MDB 4.5.9 has landed with big improvements and new components - completely rewritten material select and fixed its bugs, updated Bootstrap to the newest version, fixed some small bugs in mdb package and updated documentation.


You can download the new version of MDB Free on our website and for MDB Pro from your account page.

What's changed?

  • Added new cards: promoting-card, weather-card, gradient-card, booking-card, chart-card
  • Splited premium .accordion and .cards SCSS files to basic and extended ones
  • Added new class .bs-switch and new free switch styles within free/_switch.scss file
  • Fixed an img path variable which means fixed masks and lightbox arrows
  • Removed @extend .white-text from placeholder mixin in _sidenav.scss file
  • Added new premium .collapse-content class within_msc.scss file
  • Added .z-depth-1 class to the .chip class
  • Added 6 new accordion styles to the package within _accordion-extended.scss file
  • Added new .mml-1 class for left margin to _helpers.scss file
  • Fixed full height modal - added min-height settings

Changed syntax

  • Accordion - changed premium class .accordion to .md-accordion
  • Tabs - changed premium class .nav-tabs do .md-tabs
  • Progress - changed premium class .progress to .md-progress
  • Range - wrapped all range styles within .range-field class
  • Megamenu - removed class .news-title-2 and created new _megamenu.scss file with premium styles

Updated Bootstrap files to the 4.1.3 version

  • Pay attention to the change to .form-controls which adds a new fixed height.
  • Fixed: Moved the browserslist config from our package.json to a separate file to avoid unintended inherited browser settings across npm projects.
  • Fixed: Removed the :not(:root) selector from our svg Reboot styles, resolving an issue that caused all inline SVGs ignore vertical-align styles via single class due to higher specificity.
  • Fixed: Buttons in custom file inputs are once again clickable when focused.
  • Improved: Bootstrap’s plugins can now be imported separately in any contexts because they are now UMD ready.
  • Improved: .form-controls now have a fixed height to compensate for differences in computed height across different types. This also fixes some IE alignment issues.
  • Improved: Added Noto Color Emoji to our system font stack for better rendering in Linux OSes.

Big update of material select

  • It has been rewritten from scratch. The code is far more cleaner and straight. Similar to the SideNav component, there is a class called MaterialSelect thanks to which the whole code is more simple and easier to customize if needed.
  • When you set the value of the material select, the native change event is emitted which allows you to capture it either by jQuery.on() or Element.addEventListener(). The change is that previously the event was triggered by jQuery.trigger() method and this is why the native event wasn't emitted and it was impossible to detect a change in VanillaJS. Currently, the KeyboardEvent is dispatched on the native select element and it is fully possible to capture it using mentioned methods.
  • Each change in <option>'s attributes or subtree of the native select is observed and when detected, the material select is re-rendered so there is no need of doing it manually anymore. We use MutationObserver to observe all the changes made to attributes, childList, characterData or subtree and when the change qualifies for refresh- it happens, so the view is always updated. Also, since value cannot be observed, the prototype of the jQuery.val() method has been extended so setting a value manually also will re-render the select.
  • If the select is marked as [required] and put into <form>, the browser will validate it when the form is submitted- when no value is selected, the submission will be stopped. It was impossible previously because the native select has display:none; property meaning it was non-focusable for the browser and as such, it wasn't validated. Now, when the native select is marked as required it is "squeezed" so that it is still invisible for the user and also cannot be activated using tab key but has display:inline property so the browser can validate it.
  • Keyboard support is now working as expected. You can switch to the material select using tab key, you can select options using arrow keys and confirm the selection using Enter. Also, you can search an option in regular select using letter keys (the first matching option will be selected).
  • There is also two new attributes which are supported:
    • data-stop-refresh - controls auto refresh of the material select. As auto refreshing of the material select is a big change in the way you work with it, we introduced the way to stop new behaviour. If you don't want it to be refreshed on each change as described above, you can add data-stop-refresh="true" to the select or call jQuery.data('stop-refresh', true);. The first way stops the select from refreshing for the whole page load time. The second option allows you to control auto refreshing on demand (meaning, you can disable it and enable during script execution). Default is set to false.
    • data-inherit-tabindex - controls copying the tabindex attribute from the native select. While most of the time, you will want to copy the attribute to the material select, there may be cases when such behavior is not wanted (an example case is described above when we're talking about validation). If you don't want it to be copied to the material select, you can add data-inherit-tabindex="false" to the select or call jQuery.data('inherit-tabindex', false);. The first way stops copying the attribute for the whole page load time. The second options allows you to control copying it on demand (meaning, you can disable it and enable during script execution). Default is set to true.
  • The "Toggle all" option has been added to the mutliselect.
  • When you select more that 4 options in the multiselect, the "X options selected" is shown instead of all selected options.
  • Known bugs has been fixed:
    • The select with a lot of options does not close when clicked in the scrollbar and does not stay opened when an option is selected
    • Multiselect with optgroups is displaying checkboxes correctly and correct options are selected
    • Pre-selected options are also selected after material select rendering and have active class
    • When an option has long description it does not overflow on the caret
    • When you hold the mousedown for a while, the dropdown does not close
    • When the material select is opened, its width is responsive and changes along with the resolution
    • The select with icons has been fixed

Depreciated

  • Components Material Select and Chips use right now camelCase syntax. Old syntax still works, but it will be removed in the third releases.

MDB 4.5.8

What's new?

MDB 4.5.8 has landed with small improvements


You can download the new version of MDB Free on our website and for MDB Pro from your account page.

What's changed?

  • Brought back checkboxes to Material Select multiple
  • Decreased transition time on Material Select
  • Fixed Multiple Select's closing issues on iOS
  • Fixed npm free installation issues

MDB 4.5.7

What's new?

MDB 4.5.7 brings huge quality improvements of MDBootstrap JavaScript code.

Another important change is the integration with powerful Datatables.

We have also created a few new generators - table, buttons and modals.

See the details below. All the changes are backward compatible.


You can download the new version of MDB Free on our website and for MDB Pro from your account page.

1. What's changed?

  • Rewritten modules to ES6 using best practices
  • Took care of code readability
  • Removed VelocityJS as a dependency from Buttons.js and Cards.js

2. Improved

  • Added aria-busy to preloading script
  • Updated VelocityJS
  • Replaced unnecessary comments with more descriptive names

3. Fixed

  • Linter validation errors

4. Changed syntax

  • material_chip was renamed to materialChip

5. Tables

6. Generators

MDB 4.5.6

What's new?

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

1. Changed syntax

2. Main fixes

  • Fixed alignment in the blockquotes
  • Fixed inputs with success and error labels
  • Fixed bug with date-picker inside tabs
  • Fixed bug with z-index in classic tabs
  • Fixed navbar color in the intros

3. New components and styles

  • Updated Bootstrap to 4.1.1 version and added missed mixins
  • Upadated CSS and Javascript code of Waves
  • Added new color of line chart in Admin Dashboard
  • Added custom Bootstrap form validation
  • Added indeterminate checkbox

MDB 4.5.5

What's new?

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

2. Main fixes

  • Fixed issues with autocomplete within navbar
  • Fixed shaking of parallax on Firefox browser
  • Fixed issues with cursor on hover in file input
  • Fixed bugs with open modals and inputs

3. New components and styles

  • Possibility of adding YouTube movies to the parallax effect
  • Added a lot of new options to the parallax effect
  • Added new version of navbar with centered logo

MDB 4.5.4

What's new?

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

1. Changed syntax

2. Main fixes

  • Fixed appearance of Bootstrap custom forms in MDB package
  • Fixed appearance of carousel with thumbnails on mobile devices
  • Added hover effects and waves to the chips
  • Fixed nesting ordinary cards inside cascading cards
  • Added possibility of adding a mask and a picture to the sidenav without the skin
  • Fixed material menu styles in .dropup, .dropleft, .dropright variations

3. New components and styles

4. Deprecated - these settings will be stored only by one version yet

  • .personal-sm class
  • .comments-list, .reply-form classes in blog components
  • .classic-tabs class in this line ul class="nav classic-tabs tabs-cyan" role="tablist", now .classic-tabs class is a wrapper for tabs

MDB 4.5.3

What's new?

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

1. Changed syntax

2. Main fixes

  • Updated our packages to jQuery 3.3.1 version
  • Added possibility to have both versions of input group - Bootstrap or MDB one
  • Fixed issues with search input and input group within navbar
  • Fixed issues in modal with tabs within MDB Free version
  • Added new animation - Jack In The Box (you can find it within "attention seekers" select, Jack In The Box is the last one animation in this select)
  • Fixed issues with rounded corners of card within classic tabs

MDB 4.5.2

What's new?

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

1. Changed syntax

2. Main fixes

Integration with Bootstrap 4.1.0 version
  • Added new .w-responsive class which adds margins to the section description
  • Errors in compiling Bootstrap and MDB colors variables solved
  • Added margin-bottom to the .md-form class
  • Added _custom-variables.scss and _custom-skin.scss files
  • Described in the documentation how to add custom skin
  • Added a list of things which change under the influence of skins
  • Bug with video within modal fixed
  • Example code of .table-responsive in the documentation fixed
  • Added possibility to change box-shadow of .card
  • Bug with border radius within pricing cards fixed

3. New and deprecated classes (Bootstrap ones)

  • Added new .carousel-fade modifier to switch carousel from horizontal sliding to crossfade.
  • Added new .dropdown-item-text for plaintext dropdown items.
  • Added new .flex-fill, .flex-grow-*, and .flex-shrink-* utilities.
  • Added new .table-borderless variant for tables.
  • Added new .text-monospace utility.
  • Added new .text-body (default body color), .text-black-50 (50% opacity black), and .text-white-50 (50% opacity white) utilities.
  • Deprecated .text-hide—you’ll see a warning during compilation—as it’s a dated and undocumented feature.

4. Deprecated - these settings will be stored only by one version yet

  • .heading, .card-overlay, .naked-card classes within .pricing-card class
  • .no-radius class
  • .section-blog-fw class

MDB 4.5.1

What's new?

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

1. Changed syntax

2. Main fixes

  • Added the class.card-img-top to the img tag within .card class, which set border-radius and width
  • Bug 'magp-get' fixed
  • Added '!default' flag to all our variables and objects
  • Removed function from make-button and make-badge mixins
  • Removed min-height and background settings from .jarallax class
  • Saved all our material colors as variables
  • An image path in variables and masks files fixed
  • Added material color versions of .bg-* classes
  • Horizontal steppers on small screens fixed
  • Improved overwriting button icons with .fa-2x .fa-3x etc.
  • Neccessary to use e.g. .text-secondary with .card-text class to change color
  • Added .card-header-title class (which add font-weight: 500) within .gradient-card-header class
  • Added margins to help text for inputs with prefix (to the .form-text class)
  • Added .form-header class to the forms
  • Removed .no-padding class from ecommerce components
  • Added figcaption to the pictures in the lightbox
  • Removed unnecessary settings from .avatar class
  • Restored .waves-effect to the .nav-tabs
  • Possibility of adding custom skin

3. Deprecated - these settings will be stored only by one version yet

  • .full-bg-img class
  • .full-height class
  • .double-navbar .bc-min classes (Button Collapse Without Navbar)
  • .ql-modal and .product-panel classes
  • .no-padding class
  • Settings for .parallax class BUT ONLY IN SCSS files. This class still exists for javascript settings. If you need the scss settings, please, uncomment the class in deprecated.scss file and recompile it.

MDB 4.5.0

Note: Clear your browser cache to provide a proper functioning for updated mdbootstrap.com

Warning: Read carefully before update

MDB 4.5.0 can cause incompatibility with the previous versions.

We have refactored most of the components for better performance, design, and functionality. Now they are lighter and faster.

However, this implies some change in syntax, therefore some of components are not backward compatible

Below you can find a list of components with changed syntax. Read it carefully before updating your project to MDB 4.5.0

MDB Pro package

If you use MDB Pro package - this time within your package you will find 2 packages: MDB 4.5.0 (newest version) and MDB 4.4.5 (previous version).

For the new projects, we recommend using newest version 4.5.0.

If you want to use newest version 4.5.0 in existing projects - it will require a migration. If you don't want to do it - use MDB 4.4.5.

Legacy docs for MDB 4.4.5

Here you can find a legacy documentation for MDB 4.4.5

MDB 4.4.5 documentation

Main goal of MDB 4.5.0 release and future plans

Main goal of this release was to rewrite and improve our SASS code. We'll continue to work on our sass to provide maximum flexibility and customizability. Our goal is to allow you to use almost every component and functionalities separately and create your own package strict adjusted to your needs.

Goals for the next releases stay similar - to make MDB lighter, faster, easier and more flexible.

What's new?

1. Changed syntax

2. Main fixes

  • Range input bugs fixed
  • Material select z-index bug fixed
  • Checkbox & radio buttons .active class bug fixed
  • Waves effect bugs fixed
  • Multiselect bugs fixed
  • Updated charts
  • Fixed bug "Uncaught TypeError: Cannot read property 'top' of undefined"
  • Dotted scrollspy bug fixed
  • Time picker bug fixed
  • Sort table bugs fixed
  • Modals bugs fixed
  • Preloaders bugs fixed
  • Social buttons bugs fixed
  • Collapse bugs fixed
  • Gulp package bugs fixed

3. Updated & improved

4. Deprecated

  • Input alternate
  • .font-bold, fold-light, fold-up - Instead of this we use standard bootstrap text utilities

MDB 4.4.5

What's new?


MDB 4.4.5 comes up with integration with Bootstrap 4.0.0 (stable version) and some improvements

It's fully compatible with the previous version and guarantees no breaking changes

Read detailed info about Bootstrap 4.0.0 (Stable Version)

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

    Major changes:

  1. Integration with Bootstrap 4.0.0 (stable version)

    What's new:

  1. Added responsive .order-0 and .order-last classes

  2. Added gulp file

    What's changed

  1. .input-group-addon was renamed to .input-group-text

  2. Improved design performance for buttons

MDB 4.4.4

What's new?


With this small update we've made MDBootstrap even more stable

In MDB 4.4.4 you can notice integration with the latest version of Bootstrap and some various fixes

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

    What we've changed:

  1. Integration with Bootstrap 4 beta-3

  2. Removed unnecessary outline from buttons

  3. Fixed search in material select

  4. Update popper.js to the latest version

  5. Improved scrolling navbar

  6. Improved buttons

  7. Fixed positioning in alerts

MDB 4.4.3

What's new?


Just a small update with various bug fixes

MDB 4.4.3 comes with the integration of the newest Bootstrap and with few fixes and improvements.

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

    What we've changed:

  1. Changed sideNav construction

  2. Fixed waves effect in buttons

MDB 4.4.2

What's new?


Recently, Bootstrap 4 beta 2 has been released.

MDB 4.4.2 comes with the integration of the newest Bootstrap and with few fixes and improvements.

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

    What we've changed:

  1. Integration with Bootstrap 4 beta-2

  2. Fixed Scrolling Navbar (MDB Free)

  3. Improved buttons

  4. Updated Autocomplete component

  5. Fixed fade effect in Carousel

  6. Removed default background color from footer

  7. Fixed select in Date Picker

  8. Fixed dropdown alignment

  9. Fixed SideNav in White Skin

  10. Fixed nested tabs

  11. Improved wow effect on Internet Explorer/Edge

  12. Improved SideNav on Internet Explorer/Edge

  13. Dropped support for Bower

    What's new in Bootstrap 4 beta-2:

  1. Restored `.offset-*` classes

  2. Switched Breadcrumbs from `float` to Flexbox

  3. Dropped support for Bower

MDB 4.4.1 stable version

What's new?

MDB 4.4.1 brings one major change - integration with freshly released Bootstra 4 beta.

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

Note 1: If you already use MDB 4.4 beta, there are no breaking changes for you. You can update your project to 4.4.1 without fear of conflict. Backward compatibility is provided.

Note 2: If you use version MDB 4.3.2 or lower - read carefully the detailed list of changes in MDB 4.4 release note. These changes apply to MDB 4.4 and Bootstrap 4 beta as well.

MDB 4.4 Beta version

What's new?


That's the most significant update in the history of MDBootstrap. Together with the newest Bootstrap, we introduce you a brand new, completely rewritten MDB.

We took a lot of effort to provide a backward compatibility with the previous versions. Nonetheless, some syntax changes are inevitable (mostly caused by Bootstrap changes).

We've prepared a detailed list of syntax changes. The process of migration won't be painful, don't worry. However, we recommend you to read carefully a detailed list of changes. You can find it below.

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

Note 1: For MDB 4.4 beta we use an experimental version of Bootstrap 4 beta, not published yet. You can find a documentation for this Bootstrap version here.

Note 2: If you wish you can still download a stable version of MDB Free 4.3.2 here. Legacy documentation for MDB 4.3.2 is available here.

Note 3: If you are MDB Pro User and you whish to download MDB Pro 4.3.2 version write us on email: office@mdbootstrap.com .

Note 4: To provide a proper rendering of our website we recommend to clear the browser cache.


    Most important changes (backward compatibility provided):

  1. BrandFlow - powerful and free marketing automation and analytics software for Bootstrap projects

  2. New, stack-like support forum

  3. Completely rewritten, with the highest standards, SASS code

  4. Updated and improved JS plugins

  5. Unified and simplified syntax

  6. Updated jQuery to 3.2.1

  7. Customization made easier

  8. Improved design

  9. Replaced Tether.js with Popper.js

  10. Dropped wow.js for our custom library (no syntax changes and fully backward compatibility)

  11. New, improved and extended documentation

  12. New tutorials updated to MDB 4.4 and Bootstrap Beta

    Other changes (backward compatibility provided) :

  1. Removed unused variables and classes

  2. New, better parallax

  3. Updated colors

  4. Changed sidenav breakpoint from 910px to 992px

  5. Added _custom.scss file for easier sass customization

  6. Added new contact forms

  7. Added new progress bars

  8. Added reset buttons for inputs

  9. Introduced gradients

  10. Dropped _prefixes.scss for autoprefixer

  11. Dropped Normalize.css for Reboot.css (which is actually built upon Normalize.css)

  12. Added new cards

  13. Improved existing cards

  14. Improved enhanced bootstrap modals

  15. Improved pricings sections

  16. Recreated intros

  17. Improved dotted scrollspy

  18. Improved sidenav

  19. Added new versions of streaks

  20. Improved accordion

  21. Social list moved to deprecated

  22. Improved overlay cards

  23. Improved charts

  24. Improved charts

    Changes that can cause issues to project built with previous versions of MDB:

  1. .navbar-expand instead of .navbar-toggleable

  2. Removed offset classes, so you should replace offset-*-* class with ml-*-auto. Read more in the new Grid Documentation

  3. Changed values of spacing utilities

  4. .card-body instead of .card-block

  5. Removed nearly all .hidden-* classes in favor of our newer .d-* display utilities

  6. Renamed .navbard-dark to .navbar-dark

  7. .btn-sm and .btn-lg instead of .btn-small and .btn-large for .btn-floating

  8. Droped cascading jumbotron for cascading card reverse for sake of syntax simplification and unification.

  9. Renamed .btn-mdb to .btn-mdb-color for better naming scheme

    Coming soon:

  1. MDB Angular Admin Dashboard

  2. MDB React

  3. MDB Vue

Beta Disclaimer

It is up to you to take precaution against damages resulting from this beta software. Software in beta testing should for example not be used on sensitive and/or valuable data. The usage of beta software is at your own risk and may void the warranty on your products. If you are not an experienced user, or otherwise in any doubt of your capabilities to make such a decision, please user our stable release MDB 4.3.2. In no event the software provider shall be liable to you for any damages, including damages arising out of the use or inability to use the beta software.


MDB 4.3.2

What's new?


MDB 4.3.2 brings 2 huge improvements - Enhanced Bootstrap Modals plugin and BrandFlow Software

EBM (Enhanced Bootstrap Modals) is a powerful plugin which extends functionality and features of the standard Bootstrap plugin.

Static UI elements aren't enough in modern web development. Enhanced Bootstrap Modals lets you create a dynamic and reactive environment similarly to the websites and apps of the biggest companies.

It can enhance UI of your projects and let you create Automated Rule and Scoring system, Related Content system, Shopping Carts Recovery system and much more.

Read more about Enhanced Bootstrap Modals

Note: Enhanced Bootstrap Modals are part of both MDB Free and MBD Pro.

You can download the new version of MDB Free on our website and for MDB Pro from your account page.

Note 2: MDB 4.3.2 is fully compatible with MDB 4.3.1 and you can update it without fear of any conflict.


BrandFlow is a free tool which will automate your Bootstrap project and help you manage your modals.

Read more about BrandFlow


What else?:

  1. New option for inputs: Small Inputs
  2. New List Style Types

MDB 4.3.1

What's new?


MDBootstrap 4.3.1 is just a small update with many bugs fixes.

You can download the new version of MDB Free on our website and for MDB Pro from your account page.


Fixed:

  1. Dropdowns & dropdowns animations
  2. Horizontal steppers bug
  3. Navbar items padding
  4. Split buttons
  5. Hamburger fix for Firefox

Read our Flexbox tutorial.

MDB 4.3.0

What's new?


MDBootstrap 4.3.0 is here! It is one of the biggest updates of Material Design for Bootstrap.

You can download the new version of MDB Free on our website and for MDB Pro from your account page.


Most important: Integration with Bootstrap 4 alpha-6 and Flexbox


Fixed:

  1. Navbars
  2. Removed gradients for IE
  3. Accordion
  4. Product Cards
  5. Tabs

Improved:

  1. Smooth Scroll
  2. Free and pro templates
  3. Coding performance
  4. Text inputs
  5. Carousel
  6. Design performance
  7. Dropped IE9 Support
  8. Forms
  9. Flexbox grid
  10. Progress bars

New components:

  1. New skins
  2. Autocomplete
  3. Social Section
  4. Slack buttons
  5. Alternate version of input

Syntax changes:

  1. Dropped -xs infix
  2. .tag renamed to .badge
  3. .collapse.show instead of .collapse.in
  4. .show > .dropdown-menu instead of .open > .dropdown-menu

MDB 4.2.0

What's new?


MDBootstrap 4.2.0 has arrived two months after MDB 4.1.1 with new components, major improvements, and bugs fixes.

You can download the new version of MDB Free on our website and for MDB Pro from your account page.


Most important: Integration with Bootstrap 4 alpha-5 and jQuery 3.1.1


Fixed:

  1. Blinking cursor within Material Select on iOS
  2. Added width to group list

Improved:

  1. Lightbox
  2. Skins
  3. Sidenav
  4. Free and pro templates
  5. Buttons
  6. Code performance
  7. Shadows
  8. Font styles

New components:

  1. Steppers
  2. Dotted scrollspy
  3. Classic tabs
  4. Streaks
  5. Stack Overflow button
  6. Edge Headers
  7. New gallery
  8. Vertical-align utilities with .align-top, .align-middle, and more
  9. New skins: pink, light gray

Syntax changes:

  1. .btn-outline-* instead of .btn-*-outline
  2. Simpler margin and padding syntax (e.g. .mx-auto instead of m-x-auto)
  3. .rounded and .rounded-circle instead of .img-rounded and .img-circle
  4. .float-*-* instead of .pull-*-*

MDB 4.1.1

What's new?


It's small but important update which integrates MDB with the latest version of Bootstrap 4.

You can download the new version of MDB Free on our HomePage and for MDB Pro from your account page.


Most important: Integration with Bootstrap 4 alpha-3


Fixed:

  1. Bug with dropdown colors inside the Navbar

Improved:

  1. .mobile-nofixed class to keep Fixed Navbar fixed only on large screens

New components:

  1. Tags
  2. Parallax

Syntax changes:

  1. .offset-*-* instead of col-*-offset-*
  2. New markup for breadcrumb
  3. .tag instead of label

MDB 4.1.0

What's new?


Kicking off an exciting summer with another Material Design for Bootstrap 4.1.0 software update.

Our tech team tinker away daily to develop new features, fix bugs, and make sure we’re delivering the best possible quality. While we believe all our updates are important, some are more ‘sexier’ than others. Release 4.1.0 is definitely one of them. The upgrade makes it significantly easier (yeah, we also didn't believe that can be possible until now ;)) to develop your websites and apps. With separate bugs fixes, 10 improvements, 500+ new components categories and brand new elements like 42 new sections, 10 fresh templates, and 17 documentation chapters will make August really exciting.

Note: Please read carefully entire release notes. Please DO NOT UPDATE your production environments without testing changes on your development/test environments as new updates bring a lot of changes within syntax. Unfortunately, some of them were not able to make them backward compatible, therefore, please read carefully the following post to verify whether changes may affect your project directly.

You can download new version of MDB Free on our HomePage and for MDB Pro from your account.


Fixed:

  1. Prevent collapse of accordion menu in sidenav on page load
  2. btn-block alignment
  3. "word-wrap" for buttons with long text

Improved:

  1. Waves effect for nav icons
  2. Typography responsivness
  3. Multi-item carousel responsivness
  4. Better DataPicker
  5. Better Material Select
  6. Better SideNav
  7. Better DoubleNavigation
  8. Better Navbars
  9. Better Accordion
  10. Many small design improvements

New components:

  1. Page layouts
  2. Skins
  3. Regular buttons
  4. Social buttons
  5. E-commerce
  6. Blog
  7. Forms
  8. Overlay cards
  9. Cascading cards
  10. New dropdowns
  11. New Navbars
  12. New Tabs & Pills
  13. New Pagination
  14. New Material Selects

New sections ( we've replaced "sets" with "sections"):

  1. 4 Blog listings
  2. 2 Contact sections
  3. 5 Product sections
  4. 5 pricing sections
  5. 4Features sections
  6. 7 Intros
  7. 3 Magazine newsfeeds
  8. 4 Projects sections
  9. 4 Team sections
  10. 4 Testimonials section

New templates:

  1. E-commerce HomePage
  2. Product Page
  3. Blog HomePage
  4. Blog Post
  5. 7 new Landing Pages

New documentation:

  1. Bootstrap grid
  2. Page layouts
  3. E-commerce components
  4. Blog components
  5. Inputs
  6. Forms
  7. Pagination
  8. Footers
  9. Material select
  10. Intros sections
  11. Blog sections
  12. Magazine sections
  13. E-commerce sections
  14. Features sections
  15. Testimonials sections
  16. Team sections
  17. Contact sections

MDB 4.0.1

What's new?


This is the first update for MDB4 and Bootstrap 4. You can download the new version of MDB Free on our HomePage and for MDB Pro from your account.


Fixed:

  1. SideNav issue with draging-out on mobile
  2. Fixed action button issue on mobile
  3. Input button transparency issue
  4. Material select issue with flickering on Firefox
  5. Multiple DatePickers issue
  6. Waves effect in Navbar's links issue
  7. _footer.scss and _variables.scss file issue with sass to css compilation

Added:

  1. Preloading script

Improved:

  1. Video background
  2. Removed blue buttons outline added by default by Google Chrome
  3. Changed property overflow: hidden to overflow: visible for .card
  4. Changed html markup for reveal animations in Card
  5. Improved padding and animation in Rotating Card
  6. Updated script for touch gestures