php unable to use bootstrap when include() is used

Question

I've below HTML code which I intend to use with index.php file but there seems a problem.

<!-- nav bar -->
<nav id="top">
<nav class="navbar navbar-xs navbar-custom"> 
  <div class="container-fluid" >

        <div  class="nav pull-right">
        <font face="bebas">
      <ul class="list-inline">
        <li><a href="#"> 123456789 </a></li>
        <li class="dropdown"><a href="#" title="My Account" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> My Account <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
                        <li><a href="#">Register</a></li>
            <li><a href="#">Login</a></li>
                      </ul>
        </li>
        <li><a href="#" id="wishlist-total" title="Wish List (0)"><i class="fa fa-heart"></i> Wish List (0)</a></li>
        <li><a href="#" title="Shopping Cart"><i class="fa fa-shopping-cart"></i> Shopping Cart</a></li>
        <li><a href="#" title="Checkout"><i class="fa fa-share"></i> Checkout</a></li>
      </ul>

    </div>
  </div>
</nav>
</nav>

<!-- searchbar and logo -->

<header id="margin">
  <div class="container">
    <div class="row">
      <div class="col-xs-4">
        <div id="logo">
                    <center> <span class="tab-space"></span> <a href="J:\lawn\home\home2.htm"><img src="J:\lawn\home\artwork\lawn.png" height="42px" /></a>
                  </div>
      </div>
      <div class="col-xs-5">
       <div id="search" class="input-group">
        <input type="text" name="search" value="" placeholder="Search" class="form-control" border-rad>
          <span class="input-group-btn">
              <button class="btn btn-secondary" type="button" style="border-radius: 0;">Search</button>
          </span>
       </div>      
      </div>
      <div class="col-xs-3">
      </div>
    </div>
  </div>
  </font>
 </header>

index.php

<!DOCTYPE html>

<html>
<head>

<title> experiment ground </title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- <meta name="viewport" content="width=device=width, initial-scale=1"> omitted to remove unresponsiveness of columns -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">



<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css">

<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css">
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


</head>

<body>

<?php include('includes\header.html'); ?>


</body>
</html>

i want an output like this but all i am getting is this. is it a problem with using bootstrap or something else entirely. my main purpose is to use include() feature of PHP to make my code minimal. is there any other way I can include headers or footers templates or codes to a PHP page? thank you!

Please ensure that the bootstrap files path are correct. Try the link href url in your browser and confirm the files are placed correctly — Prakash P
– Prakash P, Commented Jul 5, 2016 at 11:34
You have local file paths (J:\foo\bar) rather than http paths for your bootstrap assets. These don't look quite right. — Progrock
– Progrock, Commented Jul 5, 2016 at 11:37
file paths were correct, but placing bootstrap files in project directory and updating them, of course somehow made it all worked, i don't know why exactly that should happen and later not, but it works, thanks ! — yugansh sharma
– yugansh sharma, Commented Jul 5, 2016 at 17:39

Joris · Accepted Answer · 2016-07-05 13:22:29Z

1

Link jQuery before you include Bootstrap

<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>  
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>

answered Jul 5, 2016 at 13:22

Joris

1199 bronze badges

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

Comments

D.Samchuk · Accepted Answer · 2016-07-05 13:34:28Z

1

1) open your Developer Tools (F12)

2) refresh page

3) check "console" tab

I think, you'll find answers in console. Anyway, change your paths to relative (assuming file index.php at one tree level with bootstrap directory):

href="bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css"

Instead of:

href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css"

And do it for all files, or just connect it from CDN - it will be great ;)

answered Jul 5, 2016 at 13:34

D.Samchuk

1,2909 silver badges9 bronze badges

Comments

Luiz Gonçalves · Accepted Answer · 2016-07-05 13:45:32Z

1

Call jquery.min.js before bootstrap.min.js

The script bootstrap.min.js uses jQuery plug-in in most actions.

Also, check if the files are actually in the path described. It is highly recommended that you call the files from the main project directory.

answered Jul 5, 2016 at 13:45

Luiz Gonçalves

5474 silver badges11 bronze badges

1 Comment

yugansh sharma Over a year ago

i copied bootstrap files in the project directory and it works like a charm, thank you, you saved my day

Collectives™ on Stack Overflow

php unable to use bootstrap when include() is used

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related