CODEWITHSUNDEEP
phphtmlcsstwitter-bootstrap
user3095257
user3095257

Reputation: 1

Bootstrap navbar not functioning with php

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>

Upvotes: 0

Views: 811

Answers (1)

Novocaine
Novocaine

Reputation: 4786

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

Upvotes: 2

Related Questions