Click here to Skip to main content
15,895,011 members

Use bundle with bootstrap 4 inside webforms project with bootstrap 3

Member 11879193 asked:

Open original thread
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");
}
Tags: WebForms, Bootstrap, ReactJS

Plain Text
ASM
ASP
ASP.NET
BASIC
BAT
C#
C++
COBOL
CoffeeScript
CSS
Dart
dbase
F#
FORTRAN
HTML
Java
Javascript
Kotlin
Lua
MIDL
MSIL
ObjectiveC
Pascal
PERL
PHP
PowerShell
Python
Razor
Ruby
Scala
Shell
SLN
SQL
Swift
T4
Terminal
TypeScript
VB
VBScript
XML
YAML

Preview



When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the http://www.codeproject.com/info/cpol10.aspx.



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