Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Lynda Fisch
Lynda Fisch
42 Points

Bootstrap is currently only being applied to my home page, and not to the rest of other pages. How should I fix this?

I am using node.js to create web server. In order to structure and format it, I am using handlebars (.hbs) and .css.

I can tell that bootstrap is only being applied to my home page, by looking at how bootstrap style I used for my nav bar is only effective on my home page. The nav bar that appears on my other pages (urls are: /home for home.hbs, /create for create.hbs, /mine for mine.hbs) are old styles.

Here is the code for layout.hbs, which is the general layout for ALL handlebars:

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <!-- my CSS -->
            <link rel="stylesheet" href="css/base.css" type="text/css" media="screen" title="no title" charset="utf-8">
            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <title>{{title}}</title>
        </head>
        <body>
            <!-- Optional JavaScript -->
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

            <header>
                {{!-- <img src="/icon.png" alt=""> --}}
                <nav class="navbar navbar-light bg-light">
                    <a class="navbar-brand" href="#">
                        <img src="img/cap.png" width="30" height="30" class="d-inline-block align-top" alt="">
                        Tutor All
                    </a>
                    <ul class="nav justify-content-end">
                        {{!-- <li><a href="/">Tutor All</a></li> --}}
                        <li><a href="/">Home</a></li>
                        <li><a href="/post/mine">My Posts</a></li>
                        <li><a href="/post/create">Create a New Post</a></li>
                        {{!-- <li><a href="/sign_in">Sign In</a></li> --}}
                    </ul>
                </nav>
            </header>
            <div class="container">
                {{{body}}}
            </div>
        </body>
    </html>

Other that that, I have home.hbs, mine.hbs, create.hbs for handlebars. These handlebars files do not contain any tags that are related to nav bar or nav.

Would hugely appreciate your help!

1 Answer

Lynda Fisch
Lynda Fisch
42 Points

It is kind of weird why this solved my problem.... but I will add my solution anyways since it worked. My home page url was '/'. Then 2 urls for my 2 other sub-pages were: '/post/create', '/post/mine' for create.hbs and mind.hbs respectively --> these lines of code were included in my .js file and layout.hbs file. I decided to change these two urls to '/create' and '/mine' and then this solved the problem.