Do I have to duplicate the navbar code on every page with Bootstrap?

Question

I'm currently making a site with bootstrap that has multiple pages. My approach was to create multiple html files, e.g. Index.html, Products.html, Contact.html.

Now, do I have to duplicate the code for my navbar in every of those files? This seems rather cumbersome, as when I want to change something in the navbar, I have to go change it in every single file.

(Of course the code won't be an exact duplicate, as e.g. the active class is different on each html page, but like 99% is common code)

I of course know that I could use a CMS like Joomla that would handle this for me. But if I don't want to take that step, is it possible with Bootstrap? Or is that not what Bootstrap is for? Curiously, I couldn't get any google hit on that topic with my queries. Maybe I'm missing something.

Answer 1

Even if you aren't going to use the backend aspect of it, I recommend switching the files to .php and using includes.

EXAMPLE

PHP (page)

<?php
    $active = "ID-THAT-CORRESPONDS-WITH-ID-IN-NAV-ANCHOR"; 
    include '_includes/header.php';
?>

    page body here

<?php
    include '_includes/footer.php';
?>

PHP (header)

<nav class="<?php echo $active; ?>">
    <a href="#" id="home">Home</a>
    <a href="#" id="about">About</a>
    <a href="#" id="contact">Contact</a>
</nav>

CSS/LESS

nav {
    /* if nav has class of home, style id of home to active state */
    &.home #home {
        ...
    }

    /* if nav has class of about, style id of about to active state */
    &.about #about {
        ...
    }
}

In your header.php file is where you would have your nav/header/etc. Lets you update one file and have it update cross-site.

Answer 2

I feel like the best answer to this question is "No, it's not really possible with only Bootstrap", and even more important, "No, it's not what Bootstrap is for".

Bootstrap is a framework for developing the graphics and layout of websites, and it doesn't contain any "logic" for multi-page sides with menus and switching between them and stuff like that. (It does contain some logic, but it's for responsiveness w.r.t. different device sizes, and that's done in CSS).

What you really want is a web framework like Rails or Django, or a CMS, and then use Bootstrap on top of that for the design and layout. Or, any of the other suggested answers in PHP or Javascript for a more "home-built" solution.