title: Bootstrap Tab view content is not showing
body: <p>I have implemented tab using bootstrap, there are 4 tabs and each of them has contents in them, but while I am executing the code all the contents of that tab along with all other tabs content are showing under the first tab and the other tabs content are blank.here is the code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
  &lt;ul class="nav nav-tabs nav-justified" role="tablist"&gt;
                  &lt;li role="presentation" class="active settingshead"&gt;&lt;a href="#first" aria-controls="first" role="tab"
                                          data-toggle="tab" value="first"&gt;
                                            1
                                          &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li role="presentation"&gt;&lt;a href="#second" class="settingshead" aria-controls="second" role="tab"
                                          data-toggle="tab" value="second"&gt;
                                            2
                                          &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li role="presentation"&gt;&lt;a href="#third" aria-controls="third" role="tab"
                                          data-toggle="tab" value="third"&gt;
                                            3
                                          &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li role="presentation"&gt;&lt;a href="#fourth" aria-controls="fourth" role="tab"
                                          data-toggle="tab" value="fourth"&gt;
                                            4
                                          &lt;/a&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
    &lt;/div&gt;
  
  &lt;div role="tabpanel" class="tab-pane active" id="first"&gt;
                    &lt;div class="namedesig"&gt;
              &lt;h4&gt;Dr. Jane Doe&lt;/h4&gt;
              &lt;p&gt;PhD in Applied Physics&lt;/p&gt;
            &lt;/div&gt;
                &lt;/div&gt;
  &lt;div role="tabpanel" class="tab-pane" id="second"&gt;
                      &lt;div class="namedesig"&gt;
              &lt;h4&gt;Dr. Martin&lt;/h4&gt;
              &lt;p&gt;PhD in Applied Chemistry&lt;/p&gt;
            &lt;/div&gt;
                  &lt;/div&gt;
    &lt;div role="tabpanel" class="tab-pane" id="third"&gt;
                        &lt;div class="namedesig"&gt;
              &lt;h4&gt;Dr. John&lt;/h4&gt;
              &lt;p&gt;PhD in Applied Biology&lt;/p&gt;
            &lt;/div&gt;
                    &lt;/div&gt;
  &lt;div role="tabpanel" class="tab-pane" id="fourth"&gt;
                          &lt;div class="namedesig"&gt;
              &lt;h4&gt;Dr. Watson&lt;/h4&gt;
              &lt;p&gt;PhD in Applied Math&lt;/p&gt;
            &lt;/div&gt;
                      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>