Bootstrap Starter template navbar not working

Question

I am trying to run Bootstrap latest version starter template for my custom site. But couldnt get it working. It works well when run from the examples folder of the source. But when I moved to the bootstrap folder it stopped working. Couldnt find what I missed.

My current source

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

The output is

enter image description here

UPDATE:

Current folder hierarchy is index.html and starter-template.css is in the same folder and along with it I have css,img,js folders

can you inspect(chrome or mozilla). and check for the console. and paste the error here. — Pir Abdul
– Pir Abdul, Commented Nov 18, 2013 at 6:51
Is the starter-template.css also located in the css-folder? If yes you just forgot to put the right path here: <link href="css/starter-template.css" rel="stylesheet"> — Igl3
– Igl3, Commented Nov 18, 2013 at 7:12

Hossein · Accepted Answer · 2013-12-09 05:28:38Z

10

It seems to me that starter-template.css is a custom style which is not part of the Bootstrap styles. If you inspect the corresponding element, for example using Firebug, you will see it is defined as follows:

body {
    padding-top: 50px;
}
.starter-template {
    padding: 40px 15px;
    text-align: center;
}

Copy this custom style in a file named as starter-template.css and put it in the same folder as your html file. It should work now.

answered Dec 9, 2013 at 5:28

Hossein

1161 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Weber · Accepted Answer · 2015-09-25 00:51:44Z

0

I had the same problem and the exact same set-up as you, with the proper index.html and starter-template.css saved in the same folder. Along with that I have the css, font, and js folders. Basically nothing in your code is wrong. The solution is to get the files from their github repository and download the whole folder as zip.

https://github.com/twbs/bootstrap

Unzip the file, and then copy out the css, font, and js folders to your project folder. This will generate the top navigation bar properly, exactly like:

http://getbootstrap.com/examples/starter-template/

answered Sep 25, 2015 at 0:51

Weber

11 bronze badge

3 Comments

Weber Over a year ago

I forgot to mention that it is best if you first remove the original css/font/js folders downloaded from the Bootstrap home page before copying in the new ones from Github.

Null Over a year ago

You can edit anything you forgot into your answer by clicking the "edit" button in the lower left corner.

Weber Over a year ago

Thanks Null. It's my first post and glad to learn that early.

Collectives™ on Stack Overflow

Bootstrap Starter template navbar not working

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related