CSS - Bootstrap the framework

Bootstrap is a CSS/ Framework .

The Meta tags that include the Bootstrap library are shown below

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> 

Again, there is an interaction between the Bootstap code and the existing code. The interaction is less than that seen when using the W3.css Framework lbrary

the Bootstrap demo

In this demo the tabs are "toggleable" - see the W3C page on the

As expected there is some interaction between my css and Bootstrap. If I link the style sheet and Javascript files for Bootstrap on this page formatting and menus are affected (so I commented them out - originally, it is interesting to add the Bootstrap meta tags back).

Dynamic Tabs

To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.

HOME

To make ths demo display on my template I added a style width of 90% to the div that contains the demo

The content of the tabs is entered into seperate divs. This div is id="home"

Links

External Sources

CSS - Bootstrap