After using Bootstrap for many years, I recently started a project where I incorporated the Bootstrap CDN. However, I realized that I also needed certain features and components from MDBootstrap. When I added MDBootstrap, it caused conflicts with the Bootstrap CDN, resulting in confusion with my buttons and other components. Some of my components got corrupted as a result. What can I do to resolve this issue? Below are the CDNs I have used:
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
/>
<!-- MDBootstrap CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css"
/>
<!-- Bootstrap CDN -->
<link
href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae6fae4f9b6b1a0b5e5">[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
These are the CDNs I have at the end of the body tag:
<!-- MDB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.js"></script>
<!-- FontAwesome CDN -->
<script
src="https://kit.fontawesome.com/d455f30832.js"
crossorigin="anonymous"
></script>
<!-- Bootstrap js -->
<script
src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7858888939493958697a7d2c9d5c9d7ca85829386d6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
I would greatly appreciate any solutions you may have. Kindly consider upvoting my question to help me build my reputation. Thank you.