Bootstrap not working correctly with meteor

Question

I am using meteor and Bootstrap via twbs:bootstrap version 3.3.6, and the padding/margins are not as they are supposed to :

I even copy-pasted the code given by bootstrap for this navbar for testing, and what I am getting instead is : This skewed version.

I.e the padding between the navbar and the individual links are off and things are not centered.

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!

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.

My questions then are:

Any ideas why this is happening?
Are there any fixes, workarounds ?

Thanks!

EDIT

In order to reproduce the error in under 5 minutes:

create a new meteor project : meteor create BootstrapTest
Delete all the files under client/ and server/
Install packages : replace the contents of .meteor/packages by:

meteor-base
mobile-experience
mongo
blaze-html-templates
reactive-var
jquery
tracker

standard-minifier-css
standard-minifier-js
es5-shim
ecmascript

autopublish
insecure
iron:router

session

bootstrap

ethereum:web3

sacha:spin

aldeed:collection2

twbs:bootstrap

aldeed:autoform

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

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

create a file client/layout.html with the following code:

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

<div class="container">

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

</div></template>

Run the application by running $meteor in the application's folder.

Are you using any other view-related packages? This may be related to box-sizing. Do you have a reproducible example? — MasterAM
Thanks for advice, I updated the question with the details of how to quickly recreate the error ! — EugVal
Have you checked the CSS in the Dev Tools to see what's being applied and where it is coming from? — CodeChimp
Why are you both the (flagged) bootstrap and twbs:bootstrap packages? In addition, a git repo would have been much simpler as a reproduction. — MasterAM

MasterAM MasterAM · Accepted Answer · 2016-07-16T21:01:53

According to the package listing in the question, you added both the (deprecated) bootstrap and twbs:bootstrap packages.

Remove the bootstrap package to resolve the issue.

You can also add bootstrap directly from npm, without using any meteor-specific package.

In general, you can use the browser's developer tools to see where each style rule originates, which can assist you in detecting the source of the problem.

Bootstrap not working correctly with meteor

1 Answers