Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

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

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


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

BrandFlow - Marketing Automation for Bootstrap

Powerful and free software which will automate your Bootstrap project.

Modals creator, scoring system, tag manager & analytics dashboard included in one tool.

Created by MDB Team.

Learn more