This is a simpleminded approach to creating consistent headers and footers across a multi-page site using Bootstrap.js and Javascript includes. There is probably a better, more Bootstrappy way to do it but this should be robust and is certainly easy to understand.

We start with a minimal but complete Bootstrap site, as described in Bootstrap tutorial: Using Bootstrap.js with a CDN:

We’d like to put a footer like this at the bottom of every page, but without having to copy and paste the HTML every time. The solution is including a Javascript file that writes to the HTML document.

The advantage is that if you want to change the footer, you’ll only have to change it in one place. The disadvantage is that instead of writing pure HTML, you will be writing Javascript to generate that HTML. The translation is almost mechanical, but you’ll have to watch the syntax to make sure you nest single quotes in double quotes or vice versa.

You could break the footer up into smaller pieces using the Javascript string concatenation operator, which products the string "hello, world" from the expression "hello, " + "world". It’s not necessary at the moment, but it will make sense later. The previous listing could just as well look like this. They would produce the equivalent HTML output.

First, a seemingly pointless exercise to illustrate the first step toward creating our footer. Let’s use Javascript to generate HTML right in the home page. The relevant lines are 48-50.

These lines output HTML directly to the document. Run this example and view source on it. Pointless because you could do the same thing in HTML with no Javascript. The previous listing shows you all in one place what you’re now going to do in separate files.

Create a file named footer.js containing the following code exactly. It will look very much like the previous HTML listing, but the code is moved into its own file. The name footer.js has no special meaning. You could call it anything.


Beware of single vs. double quotes

Be careful when you type it in. Note that double quotes and single quotes have been swapped. To see why, let’s just say we’re writing the opening div tag. If you write something like document.write("<div class="footer">") then Javascript will get confused. It will think the second double-quote mark, the one after the = sign, is closing the string. So you have to nest double quote strings inside single quoted strings, as in document.write("<div class='footer'>") Save the following as index1.html, and make sure it’s in the same directory as footer.js:

Save the following as about1.html, in the same directory as index1.html and footer.js. Pay attention to the highlighted lines in this example and the previous one.

Run this example and click the About link. Notice that they both have the same footer. It is not explicitly in the  HTML, and is instead being generated by Javascript.

Final cleanup: Generating the Header

Using Javascript to output a single line of HTML is… whelming. Let’s take on something more interesting: the header code. Save the following as header.js:

Eliminate those same lines from index1.html. Save the following as index.html:

And do something similar with index1.html. Save the following as about.html:

Run the finished version of index.html and click the About link. View source on each. Note that both index.html and about.html now have both header and footer supplied by Javascript files. They are no longer inline HTML.


Report Error

Report ErrorClose

Comments are closed.