Login with:


Not a member? Sign Up

Forgot Password?

Signup with:


Already have an account? Log in

Migration to 4.3.x

Written by Bartłomiej Malanowski ,

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 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.


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.


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

Do you want to share?

About author

User avatar

Bartłomiej Malanowski

Fullstack Developer, team leader, the biggest enthusiast of MDBootstrap. Big fan of Material Design and passionate of JavaScript

Leave a reply

Card image cap

Create advanced websites and apps

With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.