Migration to Flexbox

Since Bootstrap 4 alpha 6 switched to flexbox by default, we here in MDBootstrap had to move to flexbox too. A lot of people asked us for help to move to flexbox, so we decided to write a short tutorial that would help you to migrate from MDB 4.2.0 to 4.3.0 and 4.3.1.

From my previous tutorial, you can learn how to use flexbox in MDB 4.3.x. This time I'll show you how to migrate to MDB 4.3.0 and 4.3.1.

Alpha-6 was one of the biggest updates of Bootstrap 4. There are few major changes you should take care of.

Grid System Updates

Alpha-6 is even more in a mobile-first rule. That's why -xs infix was dropped.

Example: in alpha-5 you could use .col-xs-6. In alpha-6 you should use .col-6.

Navbar

Navbar was one of the weaknesses of Bootstrap 4. In alpha-6 navbars are already fixed. Unfortunately, the code of navbar from previous versions of Bootstrap isn't compatible with alpha-6, so you should use the new version instead. Otherwise, your navbar will disappear.

Accordion

In MDB 4.2.0 you could use panels in the accordion. In 4.3.x we are forced by alpha-6 update to use cards. Additionally, to you should replace .in with .show for a currently visible section.

In tabs component, you also have to change .in to .show.

Skins

The biggest update in MDB 4.3.0 was our skins. Since the 4.3.0 update, you can enjoy ten new skins with 3 versions of side nav: flat, gradient or background. By default sideNav type is flat.

To use gradient add .gradient class to #slide-out as following:

<ul id="slide-out" class="side-nav gradient">

If you want to use a background in your sideNav you should follow these steps:

1. Add background option to your #slide-out element. You can choose between .sn-bg-1, .sn-bg-2, .sn-bg-3, .sn-bg-4. You can also add your image using background-image property

2. Add mask just before the end of your sideNav:

<div class="sidenav-bg mask-strong"></div>

For each skin, we have prepared three versions of mask: .mask-strong, .mask-light, .mask-slight