Use Bootstrap without any conflicts.

  • By Kondakov Valeriy
  • Last update: Sep 23, 2022
  • Comments: 2

Isolated Bootstrap

If you decided to use Bootstrap in several places of your site but including Bootstrap CSS rewrites your styles in other places you should use these CSS files to isolate Bootstrap CSS.

Usage

  1. Replace the normal Bootstrap link with one of these in the head of a HTML page.

For Bootstrap 3:

<link rel="stylesheet" href="https://toert.github.io/Isolated-Bootstrap/versions/3.3.7/iso_bootstrap3.3.7min.css">

For Bootstrap 4:

<link rel="stylesheet" href="https://toert.github.io/Isolated-Bootstrap/versions/4.0.0-beta/iso_bootstrap4.0.0min.css">
  1. Create div element with class="bootstrap" where you want to use Bootstrap styles.
  2. It's ready to use:
<!-- there Bootstrap doesn't work -->
<div class="bootstrap">
    <!-- there Bootstrap works-->
</div>
<!-- there Bootstrap doesn't work-->

Github

https://github.com/toert/Isolated-Bootstrap

Comments(2)

  • 1

    Data Tables Boostrap

    Hello,

    First of all, thank you for such a simple solution to isolating bootstrap. I've used this in other projects with success. However, now I'm now using dataTables.boostrap4.min.css and I've tried to apply your bootstrap isolation code and it's not working. Any ideas for work-arounds?

    Here is the head of my html to give you an idea of what I'm trying to do. When I use the bootstrap div, it doesn't isolate (I'm guessing because I have the dataTables version of bootstrap too).

    `

    `
  • 2

    Glyphicons returning 404

    Hi! Thank you so much for this solution. Needed to isolate the Bootstrap CSS to a single input field and this worked like a charm.

    However the Glyphicons are not loading. I get a 404 Screen Shot 2019-04-17 at 3 57 01 PM

    https://github.com/toert/Isolated-Bootstrap/blob/d333ab6934612dc348d700220e5a0e7b54ca9def/versions/3.3.7/iso_bootstrap3.3.7.css#L287

    Am I doing something wrong? Please guide.

Popular Tag

Related