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"