Bootstrap - Tabs in modal don't work
<p><strong>CODE</strong></p>

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

                    &lt;div&gt;

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

                      &lt;!-- Tab panes --&gt;
                      &lt;div class="tab-content"&gt;
                        &lt;div role="tabpanel" class="tab-pane active" id="home"&gt;...&lt;/div&gt;
                        &lt;div role="tabpanel" class="tab-pane" id="profile"&gt;...&lt;/div&gt;
                        &lt;div role="tabpanel" class="tab-pane" id="messages"&gt;...&lt;/div&gt;
                        &lt;div role="tabpanel" class="tab-pane" id="settings"&gt;...&lt;/div&gt;
                      &lt;/div&gt;

                    &lt;/div&gt;  

              &lt;/div&gt;
            &lt;/div&gt;

      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>RESULT</strong></p>

<p><a href="https://i.stack.imgur.com/bIxfe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bIxfe.png" alt="enter image description here"></a></p>

<p>The JS files are:</p>

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

<p>**** UPDATE ****</p>

<p>It works when I use <a href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="nofollow noreferrer">https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css</a> instead of the one I got through <a href="http://getbootstrap.com/customize" rel="nofollow noreferrer">http://getbootstrap.com/customize</a> but all I did was change the number of columns and the padding.</p>