1

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.

7
  • what do you exactly mean by tab not working ?? i copy pasted your code model is working tab is there what exactly you want ?? Commented Oct 5, 2016 at 11:31
  • works fine. .. i think you have a problem with your src: jsfiddle.net/DTcHh/25891
    – DTH
    Commented Oct 5, 2016 at 11:31
  • Have you included Bootstrap CSS file? It seems that the result that you have included in the question is not proper if css is included.
    – Shashank
    Commented Oct 5, 2016 at 11:32
  • Tab not working as in the image - it's pretty clear. I have tried jsFiddle and yeah, it works. The underlying page works fully using bootstrap CSS. I used bootstrap customizer to simply change amount of columns and the padding. Nothing else.
    – pee2pee
    Commented Oct 5, 2016 at 11:37
  • Is there an issue with using getbootstrap.com/customize to create the CSS as this seems to be the sticking point
    – pee2pee
    Commented Oct 5, 2016 at 11:43

2 Answers 2

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>

2
  • I used Bootstrap customizer to create the CSS and all I did was change the amount of columns. Could this be the reason - if so, why does the customizer screw it up?
    – pee2pee
    Commented Oct 5, 2016 at 11:43
  • Works now - I just redownloaded another custom CSS and uploaded it and it worked.
    – pee2pee
    Commented Oct 5, 2016 at 11:45
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>
1
  • I am using this within a Modal and it is working fine Commented Aug 15, 2020 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.