Topic: Existing Project - Replace Bootrap 5.1.3 with MDB 4.2.0
garyj priority asked 5 months ago
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
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.
Are Bootstrap icons also packaged in as well?
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
gulp to build and minify CSS and JS. So replaced the Bootstrap SCSS
Then in our project's SCSS replaced
@import 'bootstrap'; with
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
I then moved onto JS files, and tried to replace:
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.
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
dropdowns will look different.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: 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