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 in Bootstrap
The anchors links render differently when the Bootstrap Framework is linked.
This over-rides the default behaviour that I am currently using and also changes the way that w3-bar-item class displays.