Andrey Langovoy Andrey Langovoy - 4 months ago 19
CSS Question

How to use Bootstrap tabs?

I am trying to understand how to do this: http://getbootstrap.com/javascript/#tabs

I think the documentation is not detailed enough, because I can not understand how it works.

<div class="container">
<ul class="nav nav-tabs">
<li class="nav active"><a href="#A" data-toggle="tab">A</a></li>
<li class="nav"><a href="#B" data-toggle="tab">B</a></li>
<li class="nav"><a href="#C" data-toggle="tab">C</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">Content inside tab A</div>
<div class="tab-pane fade" id="B">Content inside tab B</div>
<div class="tab-pane fade" id="C">Content inside tab C</div>
</div>
</div>


This code gives me what I want
enter image description here

However I can't switch between tabs.

So the question is: what JQuery or Javascript code should I add to make it work? What is shown in the example does not work :(

Answer

This code works:

<div class="container">
    <ul class="nav nav-tabs">
        <li class="nav active"><a href="#A" data-toggle="tab">A</a></li>
        <li class="nav"><a href="#B" data-toggle="tab">B</a></li>
        <li class="nav"><a href="#C" data-toggle="tab">C</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane fade in active" id="A">Content inside tab A</div>
        <div class="tab-pane fade" id="B">Content inside tab B</div>
        <div class="tab-pane fade" id="C">Content inside tab C</div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Comments