Topic: Existing Project - Replace Bootrap 5.1.3 with MDB 4.2.0
We are currently building a project which uses Bootstrap 5.1.3. Although not live yet, majority of the design is already done, and we are nearing production.
There are quite a few nice components we came across in MDB Pro which we'd like to use, which will also save us a bit of time. If we were to buy MDB Pro, can we simply use it as a drop in replacement via an npm install and replace "bootstrap": "^5.1.3" in package.json.
This wont break any of the designs and styles that already rely on functionality from Bootstrap 5.1.3?
Based on a few other answers I read on the forum this seems to be the case, but I just wanted to confirm.
Thank you
Thank you
Are Bootstrap icons also packaged in as well?
Gary
Grzegorz Bujański staff commented 2 years ago
Our package contains only Bottstrap. You need to import bootstrap icons separately
Our pack has bootstrap included. So please remove bootstrap import add check our documentation for elements that still won't work correctly. Because for some elements we have different implementation.
It actually worked quite well even with the free MDB Version.
I installed MDB using npm i mdb-ui-kit
We use gulp to build and minify CSS and JS. So replaced the Bootstrap SCSS node_modules/bootstrap/scss with node_mododules/mdb-ui-kit/src/scss.
Then in our project's SCSS replaced @import 'bootstrap'; with @import 'mdb.free';.
Reran the gulp tasks and everything came up perfectly. However as you said there are some differences in styles. In saying that the buttons for example look a lot better with MDB when compared to the Vanilla Bootsrap that we had.
MDB's secondary color (Secondary (#B23CFD)) didn't really work for us in the current design. That was easy to return back to Bootstap's gray secondary in our customization SCSS by simply adding $secondary: #6c757d; before @import 'mdb.free';
I then moved onto JS files, and tried to replace: node_modules/bootstrap/dist/js/bootstrap.js with node_modules/mdb-ui-kit/js/mdb.min.js. However some of the functionality we had that relied on Bootstrap's JS stopped working. So I ended up leaving node_modules/bootstrap/dist/js/bootstrap.js and also adding node_modules/mdb-ui-kit/js/mdb.min.js. Do you think this could be problematic in the future?
Anyway, great work guys, going to grab the PRO version now.
Thanks
You can do that and it should work. But you need to take into consideration that we do change bootstrap styles in our package so even basic components such as buttons or dropdowns will look different.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 4.2.0
- Device: Django / Vanilla Bootrap 5.1.3
- Browser: Chrome
- OS: Linux
- Provided sample code: Yes
- Provided link: No