Click here to Skip to main content
15,887,683 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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");
}
Posted
Updated 15-Jan-20 1:45am
v2
Comments
Kornfeld Eliyahu Peter 14-Jan-20 3:17am    
You probably should add
  all: unset;

or
  all: initial;

to clean the previous rules from bootstrap 3...

1 solution

You can't isolate a single element to use a different version of Bootstrap. The Bootstrap CSS rules apply to the entire HTML document, as do the Bootstrap scripts.

You'll need to create a separate page which references the BS4 stylesheets and scripts, and which doesn't reference the BS3 files. Since those files are probably referenced from your master page, you'll need to create a new master page for your BS4 pages.

If your site has a lot of UI in the master page which is using BS3, then you'll probably want to keep your BS4 master page mostly empty, and embed your BS4 pages in an <iframe>.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900