Sign in

Sign up

Migration to 4.3.x

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?

Facebook Twitter Google +

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

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us