Question: I am trying to understand how the Token system works between Web api and Angular JS for the authentication purpose. Please correct me if I am wrong. The token is stored in a database table and add the token manually on our client application to accompany every request we make from the client. Thanks.

Answer: 
Rather than trying to make Bootstrap 3 work with the ISIS template, why not find a new template that uses Bootstrap 3?
If the component is private, I'd follow David Taiaroa's advice. If it's for distribution that might not be possible.

Joomla v4 is not far away, and will upgrade both admin and site to Bootstrap v4, as far as maintainability issues in your approach.

The template override approach has the problem that you can't use Bootstrap v2 and v3 together in the same page, as they have name collisions. I think there is a way to do it - it seems to me that Jomsocial did when they started using v3 at the time that v2 was common in Joomla front-end templates. I'd guess they renamed everything throughout the Bootstrap code (css and javascript) and then namespaced it to their own vendor name, but don't know.

You can get at the Bootstrap rendering functions. Joomla uses a layout system mapped to Bootstrap classes (and other Joomla widgets), and you can override those layouts. The class is JLayout. The JHTML class might be relevant also, I think there was a move away from it between Joomla 2.x and 3.x.

I don't share your pessimism about iframes. The scenario here is serving an iframe from a trusted domain. The security issues with iframes concern your website being embedded in an iframe on a hostile domain (for traffic sniffing), and third-party (untrusted) providers serving iframe content on your site. They can be abused by malicious code injected onto your site (XSS), but this concerns that malicious code creating its own iframe for abusive ends. Your top-level document is essentially an iframe; there's no reason not to divide up the canvas as you see fit if it meets your needs. 

I don't understand your reason for not being able to use web components (shadow DOM). The downside is pushing your HTML templating into the Javascript for those areas, via `.attachShadow()` and subsequent `.innerHtml()` calls. You could load and namespace the Bootstrap v3 CSS and Javascript and use it in web components this way.