1

I'm developing a web app which must have an option to see an area with Bootstrap4.1 or Bootstrap3. All app is developed with Bootstrap3: Exmaple

I have logic implemented to switch between BT4 and BT3

But when I insert the Bootstrap4 all page is affected.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

How can I apply Bootstrap4.1 only into specific area?

Dragonthoughts
  • 2,180
  • 8
  • 25
  • 28
DMC19
  • 825
  • 2
  • 14
  • 33

1 Answers1

4

OK. You've got some work to do.

  • First download Bootstrap 4's source files and open the bootstrap.scss file.
  • Enclose the whole CSS with a class-name of your choice.

Example: 

.your_class_name {
  /*Source files*/
}

Now you have an SCSS file.

  • Then go to this link and copy paste your code and convert it to CSS file.

You'll notice that all the Bootstrap's classes have be preceded with your class name.

  • Copy that file to your project.

In the HTML code, whenever you want to use the Bootstrap 4 classes, simply start with

<div class="your_class_name"> and enclose your contents in it.

Bootstrap 4's classes will be applied only to the enclosed div's children.

Klooven
  • 3,858
  • 1
  • 23
  • 41
Allan Jebaraj
  • 1,062
  • 8
  • 25