CODEWITHSUNDEEP
phpjqueryhtmlfooter
user5638822
user5638822

Reputation:

How to create a footer once and then use it in all my pages

The question is simple, but maybe the answer not.

I am wondering how can copy and paste my <footer>CONTENT HERE</footer> created by Bootstrap in all my pages automatically.

Is there some easy way to do that? Because on the Internet I only can read very complex ways.

Thanks

Upvotes: 0

Views: 370

Answers (3)

Naresh Kumar P
Naresh Kumar P

Reputation: 4210

Here is a sample structure of how to include the layout structure in HTML page.

<!DOCTYPE html>
<html>
<head>
<?php include('includes/meta.php'); ?>    <!--[if IE]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <![endif]-->
<?php include('includes/page_title.php') ?>
    <!-- BOOTSTRAP CORE STYLE  -->
<?php include('includes/header_scripts.php'); ?>
</head>
<body>
  <?php include('includes/header.php'); ?>
    <!-- LOGO HEADER END-->
  <?php include('includes/header_menu.php'); ?>

<!-- MENU SECTION END-->
    <div class="content-wrapper">
      <div class="container">
        <div class="row pad-botm">
            <div class="col-md-12">
                <h4 class="header-line">Blank Page</h4>
            </div>
        </div>
    </div>
    </div>
     <!-- CONTENT-WRAPPER SECTION END-->
  <?php include('includes/footer.php'); ?>
  <!-- FOOTER SECTION END-->
    <!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME  -->
    <!-- CORE JQUERY  -->
  <?php include('includes/footer_scripts.php'); ?>

</body>
</html>

footer.php

<footer>CONTENT HERE</footer>

Like this if you put a separate file and call it in all the other pages and it will be created dynamically in all the pages if you edit or change in this file alone.

Like the above way you need to create all the pages and include it into your project file.

Folder Structure

Project Folder

  • includes(folder)
    • header.php
    • footer.php
  • index.php(file)

Upvotes: 1

Edison Biba
Edison Biba

Reputation: 4423

You can accomplish this with jquery.

Place this code in index.html

<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script> 
$(function(){ 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="footer"></div>
</body>
</html

Here is a stack overflow page that can help you with this

Also if you are using php this will be more simple 

<html>
<body>

<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>

</body>
</html>

Just create your footer in footer.php

Here is w3schools post if you want to know more about php and how to include this.

Upvotes: 0

Lazar Ljubenović
Lazar Ljubenović

Reputation: 19764

You seem to be confusing how the page gets rendered. CSS is used for styling content which is already there provided by the HTML, so Bootstrap cannot help you here. Bootstarp did not "create" the content of the footer, it jsut gives it some styling.

Depending on the back-end technology you use for generating pages (maybe Jade, EJS, PHP?), you need to do some sort of inclusion of the footer template.

Upvotes: 1

Related Questions