Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use bootstrap in Meteor?

I'm trying to use bootstrap in meteor 1.0. I add bootstrap package in meteor with this command: "meteor add bootstrap". But it can't works for me correctly.

I need one row with two columns. This is my html:

    <head>
    <meta charset="utf-8">
    <title>Аггрегатор новостей</title>
</head>

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>
</body>

But I see two rows with 100% width. Wherein container or container-fluid works, I see this is one the screen. What is the problem? I need to link bootstrap.css in header? But Meteor do this automatically IMHO.

Thank you.

like image 726
dvplut Avatar asked Nov 03 '14 09:11

dvplut


4 Answers

By using meteor add bootstrap you are actually adding Bootstrap 2.3, which does not know the col-md-x classes. Either switch to using Bootstrap 3 using meteor add twbs:bootstrap which will install the official Bootstrap framework (v3) or adjust your code to

<div class="span6">span4</div>

Personally, I prefer using Bootstrap 3 instead of the core bootstrap package coming with Meteor core. Also, the boostrap package provided by MDG is marked as deprecated.

like image 75
Stephan Avatar answered Oct 15 '22 07:10

Stephan


I recommend installing the official Twitter Bootstrap supported package:

meteor add twbs:bootstrap

See their GitHub for more details

like image 38
FullStack Avatar answered Oct 15 '22 06:10

FullStack


Starting from Meteor 1.3 which offers first-class npm support, the recommended approach is to install Bootstrap directly from npm.

$ meteor npm install --save bootstrap

(This also saves bootstrap in your package.json file so someone else who checks out your app can install it with meteor npm install.)

Then, in any client-side JS file (e.g. /client/main.js):

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

If you're interested in more customized Bootstrap installs using SASS/SCSS, etc. check out this post.

like image 34
Andrew Mao Avatar answered Oct 15 '22 05:10

Andrew Mao


Have you tried with other package? For example with : https://atmospherejs.com/mizzao/bootstrap-3

I think that Meteor has dropped core Bootstrap package.

like image 24
juliancwirko Avatar answered Oct 15 '22 06:10

juliancwirko