How to include Bootstrap navbar in a Meteor application

4,145 views
Skip to first unread message

curiou...@gmail.com

unread,
Oct 12, 2013, 10:33:56 PM10/12/13
to meteo...@googlegroups.com
Is anyone using bootstrap navbar in their Meteor application (with iron-router)? I would appreciate how you are doing this. 

I tried the following, but this shows only the navbar header. There is no background and other elements do not appear on the screen (I don't see the "Link" text from the code below). This navbar code works fine outside meteor when I tried it in a static html file (where I explicitly linked to bootstrap.css, jquery.js and bootstrap.js in the <head> section of the html file. 

<body>
    <div class="navbar navbar-default">

        <div class="navbar-header">
            Navbar Heading
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Logout</a></li>
            </ul>
        </div>

    </div>

    <!-- iron-router renders its code here -->
    <div>
        {{renderRouter}}
    </div>

</body>

Ry Walker

unread,
Oct 12, 2013, 10:59:01 PM10/12/13
to meteo...@googlegroups.com
I'm using bootstrap navbar + iron-router in this open source Meteor project: https://github.com/bedifferential/lister

-Ry

Ry Walker | Partner at Differential | 513.417.2163 | @rywalker | LinkedIn


--
You received this message because you are subscribed to the Google Groups "meteor-talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to meteor-talk...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.


curiou...@gmail.com

unread,
Oct 13, 2013, 12:03:10 AM10/13/13
to meteo...@googlegroups.com
Ry,

Thanks very much for sharing. First, a beautiful application. It looks great.

Regarding the navbar, it does not appear you are doing anything special to make the navbar work? Can you please confirm? I then don't understand why it does not work in my case. The only difference is that in your main file (which is named lister.html), you include footer from a template, rather than directly including the navbar code. Could that play a role? Another difference I see is that you have some custom navbar style settings. Are these necessary to make navbar work? 

Thank you.

Adrian Lanning

unread,
Oct 13, 2013, 2:47:50 PM10/13/13
to meteo...@googlegroups.com
Here are some more examples of using Bootstrap navbar with iron-router, mini-pages, and meteor-router:

Not sure why its not working for you but you may want to check which bootstrap version is being pulled in just to rule out any difference there.

Tobias J

unread,
Oct 13, 2013, 3:37:38 PM10/13/13
to meteo...@googlegroups.com
Have you checked whether Bootstrap is actually loaded? I just recently started playing with Meteor, and so thus far I've been linking it manually by adding it to the <head> portion of the html file. Also, you should probably just do {{yield}} if you're just gonna render one template. That'll allow you to route like:
Router.map(function() { 
  this.route('home', {path: '/'});
  this.route('aboutUs');
});
Otherwise I'm guessing you'll have to add a renderTemplates section to your routes, which could be avoided. Unless you've just provided a minimal example, in which case you can ignore this. :)

curiou...@gmail.com

unread,
Oct 13, 2013, 3:53:12 PM10/13/13
to meteo...@googlegroups.com
Adrian, thank you for sharing these example. I copied and pasted your navbar code (except the material following the list item 'Start Page', I remembered to close the <ul> that starts before "Start Page") and it gives me a Navbar, but with two problems:

(1) The text "Start Page" is not aligned with brand name "Roles Examples App" (the former appears on the right of the latter but slightly below vertically). 
(2) The navbar hides the heading of the template that follows (that is rendered by the iron-router), even though the template starts with <div class="row-fluid">, and hence I expect it to give a new row. 

As you said, version could be an issue? How do I check it? Also, should it not be the same since I am using meteor add bootstrap.

Thank you.

Tobias J

unread,
Oct 14, 2013, 11:11:45 AM10/14/13
to meteo...@googlegroups.com
Are you trying to use Bootstrap 3 features? Turns out that meteor add bootstrap will give you version 2.3.0, whereas the Bootstrap site is updated for bootstrap 3.
If you have Meteorite, first remove the package added by Meteor, then simply run mrt add bootstrap-3 and it should work. If you don't have Meteorite, I guess maybe now is the time to get it. Or you could "update" Bootstrap manually by downloading the package and placing the files correctly in the .meteor/local/build/programs/client/ folder of your project.

Scott Beck

unread,
Oct 14, 2013, 12:34:37 PM10/14/13
to meteo...@googlegroups.com
also if you are using bootstrap3-less, be sure no packages are pulling in bootstrap-3, this one bit me


Adrian Lanning

unread,
Oct 14, 2013, 10:08:44 PM10/14/13
to meteo...@googlegroups.com
Glad you've found them useful!  If you are using `meteor add bootstrap` then you are using bootstrap 2 and it should be compatible with the examples I posted.  

To debug problem #1, I would start with the roles example and progressively modify pieces until your content is all added.  That way you can see which piece, if any, causes the problem.

Re: #2, that is expected behavior of how bootstrap navbar works.  In the example.css file you can find code to account for that.  See the answers to this SO question for details and other possible fixes:

curiou...@gmail.com

unread,
Oct 15, 2013, 10:18:53 PM10/15/13
to meteo...@googlegroups.com
Adrian, thanks again. I will need to look into these more carefully.
Reply all
Reply to author
Forward
0 new messages