I am new to sharepoint framework and I have tried to bring the bootstrap tabs design in sharepoint framework. I am able to load bootstrap.css and bootstrap.js and also the design is coming but the tabs in the design is not working.
I have taken the design from
Clicking on tabs is not working.
Depending on how your using jQuery Tabs, I've found it best to add a slight delay (1sec) when loading so that all the information can be loaded and then be tabbed.
setTimeout(function () {
*tabs*
}, 1000 )
If you are just copy/pasting the code from the link you shared, make sure you include the CDN for jQuery as suggested by Marvin.
Its important to use the classes. You have to maintain the same structure.
1) make sure all the structure is same
2) all the css classes are valid (ul classes "nav nav-pills nav-stacked" and content classes tab-content, tab-pane ) and by default u have to make the first one as active.
3) check in chrome console so that jQuery, bootstrap are loaded properly.
If you are using spfx framework, you have to add typescript file for bootstrap.
https://www.npmjs.com/package/@types/bootstrap
I think the reason may be that you didn't load the related JS file and CSS style.
Here is a demo for your reference:
<!DOCTYPE html>
<html>
<head>
<title>jQuery bootstrap-select</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css">
<!-- 3.0 -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- 2.3.2
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
-->
</head>
<body>
<div class="container">
<ul class="nav nav-pills nav-stacked col-md-2">
<li class="active"><a href="#tab_a" data-toggle="pill">Pill A</a></li>
<li><a href="#tab_b" data-toggle="pill">Pill B</a></li>
<li><a href="#tab_c" data-toggle="pill">Pill C</a></li>
<li><a href="#tab_d" data-toggle="pill">Pill D</a></li>
</ul>
<div class="tab-content col-md-10">
<div class="tab-pane active" id="tab_a">
<h4>Pane A</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="tab-pane" id="tab_b">
<h4>Pane B</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="tab-pane" id="tab_c">
<h4>Pane C</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="tab-pane" id="tab_d">
<h4>Pane D</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- tab content -->
</div>
</body>
</html>
Screenshot of result:
jqueryandbootstrap? Are there any console errors ?