Bootstrap tab with content not working

Question

Completely new to HTML and CSS but I found code on this site for tabs with content that I would love to use as it is perfect for what I need, however I can't get it to work. I checked all the answers and followed every advise giving, including the ordering of the links/script tags but it is still not working. It worked perfect in all the jfiddle code but not for me

<!DOCTYPE html>
<html lang="en">
<head>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<title>TEST tabs</title>

</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
    <li><a href="#orange" data-toggle="tab">Orange</a></li>
    <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
    <li><a href="#green" data-toggle="tab">Green</a></li>
    <li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
    </div>
</div>


<script type="text/javascript">
$(document).ready(function () {
    $('#tabs').tab();
});
</script>    
</div> <!-- container -->


<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

</body>
</html>

The only difference I found was this link I am using "link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css""

Without this, the page does not display as tags. Is there another link I can use that will do the same job and get the code to work? Or is there an alternative way to get this working?

Help is much appreciate, thank you

Remove two bootstrap.js. One is in head and other one is before </body> . Then check console in debugger. — CodeRomeos
where is your jquery please bootstrap.js need jquery to perform so add it in the end of body tag — Amit singh
@jayD that is already there in head in minified version. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> — CodeRomeos

Amit singh Amit singh · Accepted Answer · 2015-09-16T07:12:50

Check this it will help you..

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Bootstrap, from Twitter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <!-- Le styles -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <style>
  </style>
</head>

<body>
  <div class="container">


    <div id="content">
      <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a>
        </li>
        <li><a href="#orange" data-toggle="tab">Orange</a>
        </li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a>
        </li>
        <li><a href="#green" data-toggle="tab">Green</a>
        </li>
        <li><a href="#blue" data-toggle="tab">Blue</a>
        </li>
      </ul>
    </div>
    <div id="my-tab-content" class="tab-content">
      <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
      </div>
      <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
      </div>
      <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
      </div>
      <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
      </div>
      <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
      </div>
    </div>
  </div>




  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


</body>

</html>

Bootstrap tab with content not working

2 Answers