Use Bootstrap 3 and Bootstrap 4 simultaneously - css

Question

I have a single page web application that still uses Bootstrap 3, which is getting rather annoying in parts. So I'd like to switch to Bootstrap 4, but not the entire application at once. I'd like to convert some parts of the application first, without disturbing other parts that still use Bootstrap 3.
The Bootstrap 3 CSS is added globally in the application right now. The parts I'd like to convert to Bootstrap 4 first are children of the main application, I can't cleanly separate the Bootstrap 3 and Bootstrap 4 parts into separate hierarchies just yet.
The problem is that I obviously can't just embed both stylesheets, as the selectors will conflict. I can think of some really ugly hacks to solve this like manually modifying all selectors for one of the Bootstrap versions, but that is not really something I would like to do unless absolutely necessary.
Is there a reasonable way to gradually migrate an application from Boostrap 3 to 4? Essentially some way to declare that Bootstrap 4 should be used inside a specific HTML element and all its children, with Bootstrap 3 being used outside of it?

Answer 1

You can add a namespace to one or both of the Bootstrap CSS files. For example, you could prefix all of your Bootstrap 4 class names with .bs4, so the .btn class would look like this:
.bs4 .btn {
display: inline-block;
font-weight: 400;
/*etc/*
}
Then on your page, wrap the content where you want to use Bootstrap 4 in a container with your namespace's class. E.g.
<div class="bs4">
<button class="btn btn-primary">Test</button>
</div>
It doesn't need to be as onerous to achieve this as it might sound. I followed the instructions on this page a while back to recompile the Bootstrap LESS files to add a prefix and it was pretty straightforward.