Bootstrap not working correctly with meteor
<p>I am using meteor and Bootstrap via twbs:bootstrap version 3.3.6, and the padding/margins are not as they are supposed to : </p>

<p>I even copy-pasted the code given by bootstrap for <a href="http://getbootstrap.com/examples/starter-template/" rel="nofollow">this</a> navbar for testing, and what I am getting instead is : <a href="http://i.stack.imgur.com/9tClF.png" rel="nofollow">This skewed version</a>.</p>

<p>I.e the padding between the navbar and the individual links are off and things are not centered.</p>

<p>I am  also getting similar problems to several other places, for instance text fields in forms are "squeezed" to the point that letters are cut off!</p>

<p>I have found several threads about problems with twbs:bootstrap and meteor, however most of them are very old (2012-13) and do not provide a solution to this issue.</p>

<p>My questions then are:</p>

<ul>
<li>Any ideas why this is happening?</li>
<li>Are there any fixes, workarounds ?</li>
</ul>

<p>Thanks!</p>

<p><strong>EDIT</strong></p>

<p>In order to <strong>reproduce the error</strong> in under 5 minutes:</p>

<ul>
<li>create a new meteor project : <code>meteor create BootstrapTest</code></li>
<li>Delete all the files under <code>client/</code> and <code>server/</code></li>
<li><p>Install packages : replace the contents of <code>.meteor/packages</code> by:</p>

<p>meteor-base<br>
mobile-experience<br>
mongo<br>
blaze-html-templates<br>
reactive-var<br>
jquery<br>
tracker                  </p>

<p>standard-minifier-css<br>
standard-minifier-js<br>
es5-shim<br>
ecmascript              </p>

<p>autopublish<br>
insecure<br>
iron:router</p>

<p>session</p>

<p>bootstrap</p>

<p>ethereum:web3</p>

<p>sacha:spin</p>

<p>aldeed:collection2</p>

<p>twbs:bootstrap</p>

<p>aldeed:autoform </p>

<p>underscore</p></li>
<li><p>create a folder <code>lib/</code> and a file <code>lib/router.js</code> at the very top lever.</p></li>
<li><p>put the following code in <code>lib/router.js</code> :</p>

<p>Router.configure({
  layoutTemplate:'layout'
});</p></li>
<li><p>create a file <code>client/testcss.css</code> with the following code:<code>body { padding-top: 70px; }</code></p></li>
<li><p>create a file <code>client/layout.html</code> with the following code:</p>

<pre><code>&lt;template name="layout"&gt;&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="navbar" class="collapse navbar-collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
                &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
    &lt;/div&gt;
&lt;/nav&gt;

&lt;div class="container"&gt;

    &lt;div class="starter-template"&gt;
        &lt;h1&gt;Bootstrap starter template&lt;/h1&gt;
        &lt;p class="lead"&gt;Use this document as a way to quickly start any new project.&lt;br&gt; All you get is this text and a mostly barebones HTML document.&lt;/p&gt;
    &lt;/div&gt;

&lt;/div&gt;&lt;/template&gt;
</code></pre></li>
<li><p>Run the application by running <code>$meteor</code> in the application's folder.</p></li>
</ul>