Question

I have downloaded a bootstrap template for a website, and Im trying to learn how it all works. Looks good so far, but the template I have downloaded has much of the same content across the 5 main pages, and it is not generated or referred to from a single place. Since the navbar is the same across all the webpages, how could I refer all of the pages to include the same header (or other html), without a server side? This seems like a simple HTML or JS solution, just can’t seem to find what I’m looking for….

Lets say this is the navbar (saved as /component/navbar.html ¿maybe?):

<div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="index.html">
                    <b>Your</b>Site
                </a>
                <div class="nav-collapse fr">
                    <ul class="nav">
                        <li><a href="index.html">Home</a></li>
                        <li class="active"><a href="work.html">Our work</a></li>
                        <li><a href="about.html">About us</a></li>
                        <!-- <li><a href="plans.html">Pricing</a></li> -->
                        <li><a href="explore.html">Explore</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                        <li><a href="alt.html">Alt</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li><button class="btn btn-primary">Sign In</button></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div><!-- end .container -->
        </div><!-- end .navbar-inner -->
    </div><!-- end .navbar -->

How do I link the pages to this piece of HTML to be included?

Answer 1

You can do it with jQuery, always present in boostrap.

Port the content inside <div class="navbar"> to a file as you suggest called /component/navbar.html – so the HTML looks like this

<div class="navbar" id="navbar"> 
</div>

in a script, load the content from navbar.html into #navbar via AJAX

$(document).ready(function(){
    $.ajax({
        url : 'component/navbar.html',
        success(html) {
            $("#navbar").html(html);
        }
    });
});

Edit : or simply $("#navbar").load('component/navbar.html');
This is maybe the solution you are looking for, it behaves more like a kind of “include” you can place in the headers.