I have a webforms old project using bootstrap 3 and i´m starting to build new implementantios with React JS.
I create a bundle.js (a transpilation of my main index of the React pages folder) and execute this bundle in a WebForm page:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<section >
<div id="app">
</div>
</section>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageScripts" runat="server">
<script src="React/dist/bundle.js" type="text/javascript"></script>
</asp:Content>
The problems is: My React´s scripts are using Bootstrap 4 and when they´re renderized, it happens some conflits between the two versions of bootstrap.
Anyone has an idea of how could i isolated a div or a page only with the version 4 and keep the 3 for the old pages?
What I have tried:
I´ve tried using SASS and LESS styles to create a CSS tag to apply the version 4 only for a div, but with no success.
<section class="bootstrap-iso">
<div id="app">
</div>
</section>
And the scss style:
.bootstrap-iso {
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css");
}