Bootstrap navbar not functioning with php

Question

I'm using php (mamp stack) and bootstrap.

I have bootstrap.js, bootstrap.css, my index.php file all in the same folder.

Yet the bootstrap styling of the navbar is not functioning. Don't know why this is happening. Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title>Summit</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/bootstrap.js"></script>
  </head>
  <body>
    <h1>Summit</h1>
    <nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <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="#">Brand</a>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>
  </body>
</html>

Answer 1

"I have bootstrap.js, bootstrap.css, my index.php file all in the same folder."

In that case change these lines;

<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.js"></script>

to

<link href="bootstrap.css" rel="stylesheet">
<script src="bootstrap.js"></script>

Bootstrap navbar not functioning with php

Question

1 answers

solution1
2 2013-12-12 12:17:33

Bootstrap navbar not functioning with php

Question

1 answers

solution1 2 2013-12-12 12:17:33

solution1
2 2013-12-12 12:17:33