0

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

https://bootsnipp.com/snippets/lvNXO

Clicking on tabs is not working.

  • It will work if you include the jquery file or link to code.jquery.com <script type="text/javascript" src="code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> – Marvin Jan 7 '18 at 10:34
  • do you mean aading jquery link to config.json? – KumarV Jan 7 '18 at 10:41
  • Please share some code as to how you are loading jquery and bootstrap ? Are there any console errors ? – Gautam Sheth Jan 9 '18 at 14:20
0

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.

0

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

0

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: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.