Click here to Skip to main content
14,423,173 members
Rate this:
Please Sign up or sign in to vote.
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 5 days ago
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

Rate this:
Please Sign up or sign in to vote.

Solution 1

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>.
   

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100