Bootstrap Tab view content is not showing

Question

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:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul class="nav nav-tabs nav-justified" role="tablist">
                <li role="presentation" class="active settingshead"><a href="#first" aria-controls="first" role="tab"
                                        data-toggle="tab" value="first">
                                          1
                                        </a>
                </li>
                <li role="presentation"><a href="#second" class="settingshead" aria-controls="second" role="tab"
                                        data-toggle="tab" value="second">
                                          2
                                        </a>
                </li>
                <li role="presentation"><a href="#third" aria-controls="third" role="tab"
                                        data-toggle="tab" value="third">
                                          3
                                        </a>
                </li>
                <li role="presentation"><a href="#fourth" aria-controls="fourth" role="tab"
                                        data-toggle="tab" value="fourth">
                                          4
                                        </a>
                </li>

            </ul>
  </div>

<div role="tabpanel" class="tab-pane active" id="first">
                  <div class="namedesig">
            <h4>Dr. Jane Doe</h4>
            <p>PhD in Applied Physics</p>
          </div>
              </div>
<div role="tabpanel" class="tab-pane" id="second">
                    <div class="namedesig">
            <h4>Dr. Martin</h4>
            <p>PhD in Applied Chemistry</p>
          </div>
                </div>
  <div role="tabpanel" class="tab-pane" id="third">
                      <div class="namedesig">
            <h4>Dr. John</h4>
            <p>PhD in Applied Biology</p>
          </div>
                  </div>
<div role="tabpanel" class="tab-pane" id="fourth">
                        <div class="namedesig">
            <h4>Dr. Watson</h4>
            <p>PhD in Applied Math</p>
          </div>
                    </div>

Answer 1

Try This maybe Helpful to you.

Mistake

In your code, you are missing <div class="tab-content"> </div> which is main part to target tab content on tab switch event.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script-->

<div>
  <ul class="nav nav-tabs">
    <li class="active settingshead"><a href="#first" data-toggle="tab">1</a></li>
    <li class="settingshead"><a href="#second" data-toggle="tab">2</a></li>
    <li class="settingshead"><a href="#third" data-toggle="tab">3</a></li>
    <li class="settingshead"><a href="#fourth" data-toggle="tab">4</a></li>
  </ul>
</div>
<div class="tab-content">
  <div class="tab-pane active" id="first">
      <div class="namedesig">
        <h4>Dr. Jane Doe</h4>
        <p>PhD in Applied Physics</p>
    </div>
  </div>
  <div class="tab-pane" id="second">
    <div class="namedesig">
      <h4>Dr. Martin</h4>
      <p>PhD in Applied Chemistry</p>
    </div>
  </div>
  <div class="tab-pane" id="third">
    <div class="namedesig">
      <h4>Dr. John</h4>
      <p>PhD in Applied Biology</p>
    </div>
  </div>
  <div class="tab-pane" id="fourth">
    <div class="namedesig">
      <h4>Dr. Watson</h4>
      <p>PhD in Applied Math</p>
    </div>
  </div>
</div>

Answer 2

Follow the order

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">content 1</div>
  <div class="tab-pane" id="profile" role="tabpanel">content 2</div>
  <div class="tab-pane" id="messages" role="tabpanel">content 3</div>
  <div class="tab-pane" id="settings" role="tabpanel">content 4</div>
</div>

Here is a working example http://bootsbin.com/bin/view/47/