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.
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.
I recommend installing the official Twitter Bootstrap supported package:
meteor add twbs:bootstrap
See their GitHub for more details
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.
Have you tried with other package? For example with : https://atmospherejs.com/mizzao/bootstrap-3
I think that Meteor has dropped core Bootstrap package.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With