Displaying navbar on multiple html pages using bootstrap

javascript html css twitter-bootstrap twitter-bootstrap-3

13,758

Solution 1

First off, I congratulate you on your question.
It addresses one of the fundamental needs and most important principles in programming: DRY, which is the main reason behind the development and implementation of most common web technologies, such as php or CSS (which can be further DRY-ed by LESS or SASS).

php, for example, was invented and instantly widely adopted mostly because of this "very cool new (at the time) feature": All you had to do was change the extension from .html to .php and you were able to include other parts using:

<?php include "part.html"; ?>

Usually referenced as template/component loading, this is also a common task using JavaScript. Quite a few libraries provide it. For example jQuery provides $.load() while AngularJS enables you to use directives to include templates, which could either be defined as inline or external HTML. In fact, all package dependency managers and all frameworks provide it in a form or another, because today's web is unthinkable without reusable components.

If you want to find more options, I suggest you start searching for combinations of html, include, templates, loading and components.

Be warned, most JavaScript libraries come with overhead. The most popular, however, usually provide some flexibility, allowing you to selectively build only the functionality you want.

Including templates will, most probably, become part of core HTML if (and when) Microsoft's HTML Components submission to the World Wide Web Consortium will be adopted, using the <component> tag.
Currently, this is possible using AngularJSs type:"E" directives.

Solution 2

In order to include your navbar in every page you have to use either php or javascript. Otherwise you will simply have to copy paste the html mark-up in every page. just try this two steps--

HTML

<div class="container-fluid" id="footer">
</div>

JAVASCRIPT

<script type="text/javascript">
 $(function(){
 $("#footer").load("footer.html"); 
 });
   </script>

NOTE: Make sure you are not adding bootstrap CDN s in the footer.html file.

Edit

As mentioned in the comment by andrei, yes it is very important to know that my answer requires jquery.

In order to use jquery you need to use the following cdn in your head tag or you can download jquery and serve it from your own file system.

<script     src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

13,758

Abby

Updated on September 15, 2022

Comments

Abby 3 months
I have been searching for the answer to this for a little while now. I am using the Bootstrap framework to create a portfolio website. I have completed my index.html with a fixed-top navbar:

This is the home page. The top shows the navbar.

This navbar has links to a "bio" page, a "projects" dropdown menu, and a "contact" page. I have created separate html pages for each of these (ex: I have index.html, bio.html, contact.html, video.html, design.html, etc.). However, when I press the links, they do not show the navbar, nor any other formatting.

I have this code for the graphic design html:
```
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Graphic Design</title>
</head>
<body>
     <h1>Graphic Design</h1>
    <p>Creating</p>
</body>
</html>
```
And this is what shows up: graphicdesign.html page

I wanted to know if there is a way to have the navbar consistent on every HTML page in a project.

I have seen this: Bootstrap Navbar in multiple pages but I am having a hard time loading it using jQuery.

I have also seen this: Do I have to duplicate the navbar code on every page with Bootstrap? but I don't want to use PHP.

Thank you for your time.
neophyte almost 6 years

Greate hope it helps!
neophyte almost 6 years

@Abby: when you are copying the mark-up don't copy the entire mark-up. Just copy the header portion. also don't forget to include the necessary styling css sheets. but jquery is thebetter way to do it.
tao almost 6 years

I'd love to know the reason for the down-vote and what exactly the down-voter thinks is either wrong or incomplete about my answer. I'd be happy to improve it.
tao almost 6 years

@neophyte: there's nothing wrong with your answer. I believe we have a troll lurking around, as I've been downvoted too. What stops me from upvoting your answer is that you don't specify it uses jQuery. It's quite important, it will not work without jQuery.
neophyte almost 6 years

@AndreiGheorghiu: Thanks for pointing it out I am editing my answer.
ppajer almost 6 years

I like how this answer addresses the problem at its core. I would also list some static site generators here. However I think it's worth noting that all of the javascript solutions currently come with an overhead by requiring extra libraries and HTTP requests compared to PHP and SSGs. -(not the downvote)
BruceWayne about 5 years

I'm trying to do the same thing - and trying your suggestion above isn't working. I have the javascript in the main HTML file, above the footer. Is it supposed to go somewhere else?
ManuelJE almost 4 years

It may seem obvious but PHP is a server-side feature that you have to enable in order for this technique to work. Installing and configuring PHP is easy and instructions may be found elsewhere. Javascript runs on the client (browser), it should be enabled by default and doesn't require server configuration. For PHP production pages make sure that your hosting service supports PHP (many of them do).