Twitter Bootstrap Question posted in

Bootstrap – Tabs in modal don't work – Twitter bootstrap

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

enter image description here

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0 
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search