1

Edited:

I am trying to use PHP include function to call "Navbar Header", "Navigation" and "Footer" section of my Bootstrap code, so that I do not have to make changes to all my HTML files when something changes in any of the above 3.

I am using Bootstrap 3.

Please assist me here, as I am not able to use the PHP functionality with Bootstrap 3. Thanks..

Below is my code:

--> index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Test PHP</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="css/styles.css" rel="stylesheet">
</head>
<body>

<?php include("includes/header.html");?>

<?php include("includes/navigation.html");?>

<div class="container-fluid">

     <!-- START Page Heading -->
     <div id="page-wrapper">
        <div class="container-fluid">
            <!-- Page Heading -->
            <div class="row">
                <div class="col-lg-10">
                    <a><h1 class="page-header">Home </h1></a>
                    <ol class="breadcrumb">
                        <li class="active">
                            <i class="glyphicon glyphicon-home"></i> Home
                        </li>
                    </ol>

                    <div class="container">
                      <div class="jumbotron text-center">
                        <h1>Sample Website</h1>                            
                        <div class="row">                              
                        </div>
                      </div>
                    </div>

                </div>
            </div>
          </div>
        </div>
        <!-- END Page Heading -->       
    </div>
   </div>

 <?php include("includes/footer.html");?>

  <!-- Script References -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
  </body>
  </html>

1) Navbar Header.html

<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><strong>Sample Website</strong></a>
    </div>
</div>
</div>

2) Navigation.html

<div class="container-fluid">
<div class="row">
    <div class="col-sm-2">
        <a href="index.html"><strong><i class="glyphicon glyphicon-home active"></i> HOME</strong></a>
        <hr>
        <ul class="nav nav-pills nav-stacked">
            <li class="nav-header"></li>
            <li><a href="overview.html"><i class="glyphicon glyphicon-cloud"></i><strong> Overview</strong></a></li>
            <li><a href="about.html"><i class="glyphicon glyphicon-picture"></i><strong> About</strong></a></li>                
        </ul>

        <div class="clearfix"></div>                   
        <hr>

        <a><strong><i class="glyphicon glyphicon-user"></i> VIEW 1 </strong></a>
        <hr>
        <ul class="nav nav-stacked">
            <li><a><i class="glyphicon glyphicon-list-alt"></i><strong> Type</strong></a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Type1</a>
                        <ul class="dropdown-menu">
                            <li><a href="View1_desc.html">Description</a></li>
                              <li class="divider"></li>                                  
                              <li class="dropdown-submenu">                                             
                                <!-- <li role="menu" class="dropdown-header">Schema Type</li> -->
                                <li class="dropdown-submenu">
                                <a tabindex="-1">Inner view1</a>
                                <ul class="dropdown-menu">
                                  <li class="dropdown-submenu">
                                    <li><a href="Innerview1_about.html">About</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-submenu">
                                    <a tabindex="-1">Detail</a>
                                    <ul class="dropdown-menu">
                                      <li><a tabindex="-1" href="detail1.html">Detail 1</a></li>
                                      <li><a tabindex="-1" href="detail2.html">Detail 2</a></li>
                                    </ul>
                                  </li>
                                </ul>
                              </li>
                            <li class="dropdown-submenu">
                            <a tabindex="-1">Type2/a>
                                <ul class="dropdown-menu">
                                  <li class="dropdown-submenu">
                                    <li><a href="type2desc.html">Description</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-submenu">
                                    <a tabindex="-1">Inner view 2</a>
                                    <ul class="dropdown-menu">
                                      <li><a tabindex="-1" href="idetail1.html">Detail 1</a></li>
                                      <li><a tabindex="-1" href="idetail2.html">Detail 2</a></li>
                                    </ul>
                                  </li>
                                </ul>
                        </ul>
                    </li>
                  </ul>         
        </ul>

        <hr>            
    </div>          
   </div>

3) Footer.html

 <footer class="row">
 <div class="container">
     <div class="col-lg-4 col-lg-push-4 col-md-4 col-md-push-4 col-sm-4 col-sm-push-4 col-xs-12">
         <div class="text-center">
           <p>Copyright &copy; 2015 <a href="http://www.banes.com" title="Banes">
              <strong>Banes Ltd.</strong></a>
            </p>
         </div>
     </div>        
 </div>
 </footer>
Improve this question
2
  • You have the header section repeated in all of your includes... Commented Aug 9, 2015 at 11:47
  • If you included what your files currently have, you would effective "nest" the <html> tag and it won't work. For files you include you should only have what you want directly inserted in that spot to contain. Commented Aug 9, 2015 at 11:50

2 Answers 2

Reset to default
2

You have too much duplication in your index.file. Code should only exist once. Look at your include lines and imagine the file being 'included' at that point...

Header.html

<html>
    <head>
        ...tags...
    </head>
    <body>

Index.php

<?php include("includes/header.html");?>

<div class="container-fluid">
   ...stuff here..   
</div>

<?php include("includes/footer.html");?>

Footer.html

        <script>...</script>
        <script>...</script>
    </body>
</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for your comments...ive shared the edited code, but still it does not works. Not showing the header, navig and footer sections.
Then your paths must be wrong... Put the files in the same directory, and remove 'includes/'
I've removed the includes/ directory, and moved the 3 files to same directory as index.php is in. Still its not working.
0

You're including a whole page in every file.

The header footer and navigation files should only contain the parts of the html you want to include

So you have 4 head elements each calling in bootstrap.

This is never going to play nicely. Delete all of the tags in the partial files that do not contain markup specific to that page, and have one page with html>head>body structure that includes the parts of the other files

Improve this answer

8 Comments

Thanks for your comments...ive shared the edited code, but still it does not works. Not showing the header, navig and footer sections.
Is the include directory correct? I.e is it relative to the index.php file? Also it looks like you're still including the header markup in the index.php file so it will appear twice
Ive removed the includes directory and moved the 3 HTMLs to index.php directory location. Header markup has been removed from the 3 HTMLs and only appears in index.php. Still its not working.
Are you running this on a Dev server? It sounds like php it's running
Im running this on my laptop running Windows 7 (64-bit).
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.