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>

What makes you think this is related to php?

Novocaine
– Novocaine

2013-12-12 12:16:11 +00:00
Commented Dec 12, 2013 at 12:16 — Novocaine
– Novocaine, Commented Dec 12, 2013 at 12:16

Novocaine · Accepted Answer · 2013-12-12 12:17:33Z

2

"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>

answered Dec 12, 2013 at 12:17

Novocaine

4,8064 gold badges48 silver badges68 bronze badges

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

1 Comment

BENARD Patrick Over a year ago

I like your answer ^^

Collectives™ on Stack Overflow

Bootstrap navbar not functioning with php

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related