Unable to get bootstrap tabs to work with base-app

[amsharma9]

Hi,

I was trying to use bootstrap tabs with base-app but am unable to get even the basic thing working. The page I am using includes the below code. I copied it from a tutorial and pasted on a page where I was fetching data from table and showing. I have replaced all the old code with below just to see if tabs work but they don't. Kindly let me know what could be the issue and any solutions. Once it works I will replace fixed text with my table data. The tabs do show up but nothing happens when I click on them.

<div class="container">
<ul class="nav nav-tabs">
  <li class="active"><a href="#tab_a" data-toggle="tab">Tab A</a></li>
  <li><a href="#tab_b" data-toggle="tab">Tab B</a></li>
  <li><a href="#tab_c" data-toggle="tab">Tab C</a></li>
  <li><a href="#tab_d" data-toggle="tab">Tab D</a></li>
</ul>
<div class="tab-content">
        <div class="tab-pane fade in active" id="tab_a">
            <h4>Pane A</h4>
            <p>Pane A text</p>
        </div>
        <div class="tab-pane fade" id="tab_b">
            <h4>Pane B</h4>
            <p>Pane B text</p>
        </div>
        <div class="tab-pane fade" id="tab_c">
            <h4>Pane C</h4>
            <p>Pane C text</p>
        </div>
        <div class="tab-pane fade" id="tab_d">
            <h4>Pane D</h4>
            <p>Pane D text</p>
        </div>
</div><!-- tab content -->
</div><!-- end of container -->

Thanks
Amal