bootstrap tabs not working in localhost

Question

When I'm links to local, they do not work. When I'm using the Internet link, and then work. Please tell me, without an internet connection, how can I use. And I'll use this tab to codeigniter. Basically, I want to manage the activities of the localhost. I like to use is not slowing down.

Example-

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Tabs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="jquery/3.1.1/jquery.min.js"></script>

<!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 -->
</head>

<body>

<div class="container">

  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
    </div>
  </div>
</div>

</body>
</html>

include jquery before bootstrap.js. Also I suspect that your relative paths of js and css files may be incorrect. Are you sure you have 'jquery', 'bootstrap-3.3.7-dist' etc. directories in the same directory where this html file is? — Mohit Bhardwaj, Nov 22 '16 at 12:53

score 0 · Answer 1 · edited Nov 22 '16 at 14:00

0

You can learn more on bootstrap: http://getbootstrap.com/getting-started/ Which things you need to add that bootstrap works properly can be found there too.

Also, you need to include jquery before making bootstrap work.

edited Nov 22 '16 at 14:00

theoretisch

1,718
5
24
34

answered Nov 22 '16 at 12:54

Mayank Nimje

573
4
16

score 0 · Accepted Answer · edited May 23 '17 at 12:24

Bootstrap is built with jQuery, so, it is jQuery dependent. When you use libraries or frameworks that have dependencies, make sure you include them before the library/framework, otherwise will don't work.

<script src="jquery/3.1.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

Another advice is that you should put your scripts before close body. This because when you ask for a page, the DOM will start to load from the head and when the parser find a script tag, the parser loads it but block the document loading until the script is complete loaded. If you have many scripts in the head certainly the page load will take much longer than you thought.

You can put the scripts just before closing the body tag or add the defer attribute inside the script tag. This attribute causes the scripts to be loaded asynchronously but respecting the order in which they are declared. Take in mind that when you use defer the scripts will be loaded after entire document is loaded.

bootstrap tabs not working in localhost

2 Answers2