Bootstrap - Tabs in modal don't work

Question

CODE

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
          <div class="row">
              <div class="col-md-8 m"><img src="http://www.goldmedalmind.net/wp-content/uploads/2014/04/anns-face-round.png"></div>
              <div class="col-md-8 purplebg m">

                    <div>

                      <!-- Nav tabs -->
                      <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
                      </ul>

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

                    </div>  

              </div>
            </div>

      </div>
    </div>
  </div>
</div>

RESULT

The JS files are:

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

**** UPDATE ****

It works when I use https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css instead of the one I got through http://getbootstrap.com/customize but all I did was change the number of columns and the padding.

Answer 1

My guess is you are missing bootstrap CSS. Or are you missing any detail here?

Here's a snippet working fine after including the css:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <!-- Modal --> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block;"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="row"> <div class="col-md-8 m"> <img src="http://www.goldmedalmind.net/wp-content/uploads/2014/04/anns-face-round.png"> </div> <div class="col-md-8 purplebg m"> <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a> </li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a> </li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a> </li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">Home</div> <div role="tabpanel" class="tab-pane" id="profile">Profile</div> <div role="tabpanel" class="tab-pane" id="messages">Message</div> <div role="tabpanel" class="tab-pane" id="settings">Settings</div> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 2

<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="nav-item">
     <a class="nav-link active" aria-controls="personal" data-toggle="tab" role="tab" href="#personal">Personal </a>
  </li>
  <li role="presentation" class="nav-item">
     <a class="nav-link" aria-controls="official" data-toggle="tab" role="tab" href="#official"> Official</a>
  </li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="personal">
     <div class="form-group">
        <div class="col-xs-6">
           <label for="first_name" style="font-weight:bold">First name</label>
           <input type="text" class="form-control" name="first_name" id="first_name" readonly value="Siya">
        </div>
     </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="official">
     <div class="form-group">
        <div class="col-xs-6">
           <label for="isavailable" style="font-weight:bold">Is Available</label>
           <input type="text" class="form-control" name="isavailable" id="isavailable" readonly value="isavailable">
        </div>
     </div>
  </div>