twitter-bootstrap,meteor,bower , Meteor.js: nemo64:bootstrap or bower bootstrap?


Meteor.js: nemo64:bootstrap or bower bootstrap?

Question:

Tag: twitter-bootstrap,meteor,bower

Given that we're living in a post Meteor 1.0 world, is it "better" to use the meteor package nemo64:bootstrap or to install the bower (meteor package) and then manage bootstrap as a bower dependency?

I feel like if I were going to start from frontend scratch I would use nemo64:bootstrap, but if I have a prepackaged frontend with a million packages loaded up already, with working dependency trees, I should manage dependencies through bower?

Using the mquandalle (https://github.com/mquandalle/meteor-bower) package to minify all my bower assets, it re-installs jquery! Doubling up on that can't be good!


Answer:

Our company has begun converting some of our bower dependencies to Meteor packages. We do this because you can not publish your own Meteor packages if they require bower dependencies.

Sidenote: We use nemo64:bootstrap and it works very well for us.


Related:


after puttin php syntax, my website get stuck at preloader


php,twitter-bootstrap,session
I have this code on my php file for navbar: <?php if(!$session->is_logged_in()) { echo ' <a href="login.php" role="button" aria-expanded="false"> Login <span class="label"> login to system</span> </a> </li>';} else { echo ' <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false"> ' . $session->user_name; . '<span class="badge bg-default">2</span> <span class="caret"></span> <span class="label">it is you</span> </a>';...

how can I add a caption on hover with a img-circle image in bootstrap


javascript,jquery,html,css,twitter-bootstrap
I have a grid of responsive ing-circle link images in bootstrap which I would like to have caption appear on hover. I cannot figure out a way to do this without distorting the shape of the circular image, or have it appear outside the circle. My CSS: .pic{ -webkit-filter: saturate(50%)...

Turning the Stripe Checkout into a Synch function


meteor,stripe-payments
I am trying to use wrapAsync for Stripe.charges call using Stripe Checkout, but I cant seem to get it working Client code Template.bookingPost2.events({ "click #accept": function(event, template){ event.preventDefault(); StripeCheckout.open({ key: 'public_key', amount: 5000, // this is equivalent to $50 name: 'Meteor Tutorial', description: 'On how to use Stripe ($50.00)', panelLabel:...

Datepicker not showing days - Bootstrap


javascript,jquery,html,twitter-bootstrap,datepicker
I'm struggling with the answer to this, the reason I'm struggling is because the datepicker is working on one of my pages. Could an issue be that i'm loading a datatable at the same time as the datepicker? Because on the broken page, i'm loading the datatable which uses the...

Insert data in collection at Meteor's startup


javascript,json,meteor,data,startup
I would like to insert data at Meteor's startup. (And after from a JSON file) At startup, I create a new account and I would like to insert data and link it to this account once this one created. This is the code that creates the new account at startup:...

How to return value in Meteor.JS from HTTP.call “GET”


javascript,ajax,http,meteor,facebook-javascript-sdk
I'm writing a meteor method, which should return a Facebook response for HTTP.call on graph api, but HTTP.call has only a callback function to show error/response, so I can't take this data outside, and Method can not return any value. Here's my method code: loadUserFBEvents: function () { var accessToken...

Meteor: onRendered doesn't get fired again after second render iron-route


javascript,meteor,iron-router
I have an iron-router route: Router.route('/profiel/bewerken', { subscriptions: function () { return Meteor.subscribe('currentUser'); }, action: function () { if (this.ready()) this.render('profielBewerken', { to: 'container', data: function () { return Meteor.user(); } }); else this.render('profielBewerken', { to: 'container', data: { loading: true } }); } }); It waits until the subscription...

Left and Right Carousel Controls not Working when Smooth Scroll for Anchor Tags Used


javascript,jquery,twitter-bootstrap,carousel
I am using the following script for smooth scroll effect for anchor tags: $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false;...

End to end alignment of 3 Columns using Bootstrap


twitter-bootstrap
I am new to bootstrap. I tried aligning three sections end to end (horizontal manner) with equal space. (1st column should be aligned to extreme left of the container and last should be aligned to extreme right.) There is extra space at the third column. I have added bootstrap css...

Use JSON file to insert data in database


javascript,json,mongodb,meteor,data
I'm using my JSON file like this to insert data in my collection : var content = JSON.parse(Assets.getText('test.json')); console.log('inserting...'); Profiles.insert({ user: id, data:content }; But I would like to have a "data's tree" like that : [ user: "rtegert23423131", firstname:"test", surname:"test2", // ... ] Not like that : [ user:...

Bootstrap Modal popup not scrolling with keyboard


jquery,twitter-bootstrap
I'm using bootstrap modal, I added a scroll bar and it works fine with the mouse, but when I use the keyboard only the background page scrolls. What can I do to solve this. This is the css code that I'm using. .modal .modal-body { height: 520px; overflow-y: auto; }...

Bootstrap Grid on the screen


twitter-bootstrap
I am new to Bootstrap. I just created a sample web app using layoutit.com. When I do the preview on the website, the columns are aligned properly. I used md-2 and md-10, thereby dividing the screen into 2 layouts with 2 and 10. The first column with 2 grids, starts...

MvcSiteMapProvider - Enhanced bootstrap dropdown menu


c#,twitter-bootstrap,asp.net-mvc-5,mvcsitemapprovider,mvcsitemap
I'm trying to build a menu like this: For reference I'm using this library https://github.com/behigh/bootstrap_dropdowns_enhancement @Html.MvcSiteMap().Menu("BootstrapMenuHelperModel") @model MenuHelperModel <nav class="navbar" role="navigation"> <div class="container-fluid menu-container"> <div class="collapse navbar-collapse"> <div class="navbar-header"> <span class="navbar-brand">FAR BACKOFFICE</span> </div> <ul class="nav nav-pills"> @foreach (var node in Model.Nodes) { if...

Meteor - Requests randomly failing


meteor,request-cancelling
I have this weird problem where some requests fails randomly. I have no idea what is causing this behavior. Sometimes it is images not loading and sometimes it is ajax request (cfs/severtime or algolia-search) and some other times everything is fine. It also happen in local and online. Here are...

Why does my hover button dropdown not stay open when I mouse-over?


javascript,jquery,twitter-bootstrap
First things first: http://jsfiddle.net/9L81kfah/ I have a Bootstrap dropdown that's supposed to open and stay open if somebody does a mouse-over for more than 200ms, especially if they then move the mouse over the menu content, but it's not staying open. What am I doing wrong here? This is the...

Disabling tail.sh for specific server ( or environment )?


javascript,meteor
While testing my meteor app i keep receiving emails saying my application went offline. How does i disable this feature for an specific environment or hostname ( for instance, "localhost" ) ?...

.NET MVC: Finding default Bootsrap JavaScripts


javascript,asp.net-mvc,twitter-bootstrap
In an out-of-the-box implementation of an MVC app using Bootstrap in Visual Studio 2013, there seems to be some javasvript that works on this element: <li role="presentation" class="dropdown"> .... </li> When that element is clicked, there is, somewhere, some JavaScript that changes the class in this element to: <li role="presentation"...

Bootstrap 3 DatePicker - How to reset selected date without resetting the picker configuration?


jquery,twitter-bootstrap,datepicker
I'm trying to reset the selected date on button click, but so far I'm only able to clear the input element, without the actual date on the picker. The following code resets everything, including the configuration and the date, so its obviously not what I need. $('#datepicker').datepicker('update',''); //resets everything To...

CKeditor outputs Html. How to format it for displaying properly, not just lame html?


javascript,html,css,meteor,ckeditor
I am using CKeditor, and this is my code: ...othercode.. <div class="input-field col s12"> <textarea id="textarea1" class="materialize-textarea"></textarea> <label for="textarea1">Body of the Post</label> </div> <input type="submit" name="Submit" id="sub"> </form> </div> </div> </div> {{else}} <div>You are not logged in.</div> {{/if}} <script> CKEDITOR.replace('textarea1'); </script> In Javascript, I use the same id to extract...

How to set CSS class in AngularJS directive and default if none set?


javascript,angularjs,twitter-bootstrap
I've created a custom directive which creates an "upload button". It has the bootstrap button CSS applied to it like so: <div class="btn btn-primary btn-upload" ng-click="openModal()"> <i class="fa fa-upload"></i> Upload </div> How do I override the CSS classes and default to btn btn-primary btn-upload if no override specified? The goal...

RequiredFieldValidator not working in my ASp site


c#,css,asp.net,twitter-bootstrap
I'm trying to learn some C# & asp, while creating a booking page in Visual Studio. I have faced a little problem with the RequiredFieldValidator, because when i click the button, nothing happens. I'm using the bootstrap css files to make in a little more shiny. Some code of the...

Meteor - Multiple data contexts with Iron Router


meteor,iron-router
I just started using Meteor and Iron Router. Here I'm trying to use two data contexts but appearantly I'm doing it wrong. I've googled it but it doesn't seem this is a very common problem, but I guess it got to be possible to pass on two or more data...

Bootstrap toggle doesn't display well when added dynamically


javascript,jquery,twitter-bootstrap
I'm trying to add bootstrap toggle switch dynamically but it does not display well after adding it. Thanks for your help! <input id="TheCheckBox" type="checkbox" data-off-text="Yes" data-on-text="No" checked="false" class="BSswitch"> <p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p> $('.btn').on('click', function () { $('p').after( '<input id="TheCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="BSswitch">' ); });...

Creating meteor autoform w/ array of radio buttons


meteor,meteor-autoform
I'd like to build an autoform in meteor that presents user with a twelve radio buttons and records an entry for each of the 12 buttons. I can get the form working easily enough if I create 12 different buttons—see below, but I'm wondering if it is possible to create...

Bootstrap navbar toggle button not collapsing


javascript,jquery,html,css,twitter-bootstrap
Important: I checked similar questions on Stack Overflow, but none seems to fix my problem: 1. I did include Bootstrap JS file. 2. It does not seem like I included JS files twice. 3. I deleted the navbar-default class because I needed to restyle it otherwise (as seen in the...

Calling AngularJS function from a remote page loaded by Bootstrap modal


javascript,angularjs,twitter-bootstrap
I use Bootstrap 3 modal component to load a remote form, in which I define an Angular controller and several functions. But the browser said "Tried to Load Angular More Than Once". Main page: (omitted: ng-app="manageAppCollections", ng-controller="manageAppController") <button type="button" class="btn btn-success" ng-href="./appConfForm" data-toggle="modal" data-target="#saveModal">Add an App</button> <div id="saveModal" class="modal inmodal...

Modal from inside Bootstrap Tabs using Knockout foreach


jquery,twitter-bootstrap,knockout.js,twitter-bootstrap-3
I have Bootstrap tabs bound to a KnockoutJS observable array using a foreach binding, which is working fine. I now want to launch a Bootstrap modal from inside the active tab. <div class="tab-content"> <!-- ko foreach: trueData --> <div class="tab-pane fade in" data-bind="css:{active: $index() == 0}, attr :{'id': 'tab' +...

bootstrap center 3 col-md-3 divs


css,twitter-bootstrap
I have a wrapper like so: <div class="community-images"></div> and inside this wrapper I have 3 col-md-3 divs: <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> what I am trying to do is center these 3 divs inside the wrapper, how would I accomplish this ? Here is the CSS: .community-images { padding:...

What is cursor?


meteor
In discover meteor, posts: function() { return Posts.find(); } is used, not this: posts: function() { return Posts.find().fetch(); } I tried function below, it also works, and can realtime update. What is cursor exactly? And What is the different of above two functions?...

How to make background body overlay when use twitter-bootstrap popover?


html,css,twitter-bootstrap
Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

Bootstrap dropdown on hover not working, what am I doing wrong?


javascript,jquery,twitter-bootstrap
I am trying to open a dropdown on hover in Bootstrap but somehow it's not working. I suspect that my jQuery code is wrong but I can't figure out what? Here is my HTML: <a href="#" id="dropdown-filter" data-target="#" data-toggle="dropdown"> <button type="button" class="btn btn-primary">Filters</button> </a> <ul class="dropdown-menu pull-right" role="menu"> <li> <div...

How to prevent bootstrap from making font bold?


javascript,jquery,html,css,twitter-bootstrap
Without including the bootstrap link in this simple example, the following code performs as expected: Hovering over any word turns the word red, and hovering away returns it to black. With the bootstrap link included, the change from red/black still works fine, but for some reason, the font becomes bold...

Owl Carousel implementation


jquery,twitter-bootstrap,carousel,owl
I can't use the Owl Carousel 2 I would like to use. I think it has something to do witht the files I have connected to my html but there might be a another problem. Do I even have the right files? This is my HTML so far. I already...

AngularJS & Bootstrap Modal - loading template outside controller


angularjs,twitter-bootstrap,angular-bootstrap
I have a dialog which is being used in 3 scenarios within the same page. I have created a controller similar to the below: var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', size: size, resolve: { items: function () { return $scope.items; } } }); <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header">...

Centering navbar pills vertically within the navbar using flexbox


html,css,twitter-bootstrap,flexbox
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

MeteorJS Blaze.getData() occasionally returns undefined


meteor,meteor-blaze
I'm currently rendering bootstrap modals on my webpage using MeteorJS's "renderWithData" method to load each template when it's needed. I'm running into an issue where my helper methods which access the data in the modal using "Blaze.getData()" will occasionally return undefined and I'm unsure how to fix that. The only...

CSS - Bootstrap centering col-md-3 with weird results


css,twitter-bootstrap
I was having an issue center col-md-3 divs inside a wrapper. When I have 3 col-md-3 and use this code in my wrapper: .wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } the results are great! but when I have...

Use a “months” array to perform calculations for each month in a for loop


javascript,arrays,meteor,meteor-helper
I have a mongo collection to store "projects", each document stores a project with different calculations for each month of the year a_jan : 10, a_feb : 20, a_mar : 25, a_apr : 70 ... b_jan : 30, b_feb : 10, b_mar : 20, b_apr : 70 ... c_jan :...

Meteor/MongoDB limiting the result


mongodb,meteor
I am trying to find all documents and publish at most 5 from the results. Following this section of the MongoDB doc, I am trying to do this: Meteor.publish('teams', function () { return Teams.find().limit(5); }); Yet, in the server console, I get an exception: Exception from sub teams id Pm6jKL8Sv3FSDSTfM...

adding background image in style rails 4


ruby-on-rails,twitter-bootstrap,ruby-on-rails-4,asset-pipeline
I am trying to add background image on my web page, it was working when I was using plane html, but now I am integrating it to my rails application. I am using this code to embed the image in my rails application <div class="jumbotron" style="background-image: "url(image-url('lines3.png')"; background-repeat: repeat-x; background-position:...

Content section overlap footer


html,css,twitter-bootstrap,css3,twitter-bootstrap-3
I have a a page as following that works fine in big screens but in small screens the mainsection overlap the footer. How can I have the footer always at the bottom of the page. Also in small screens the location of the footer should be based on content of...

Move icon up and inline with my main heading


html,css,twitter-bootstrap
I'm trying to move around with my main icon in the top, which is placed in the navbar. I'm using bootstrap and a normal css file called "Site.css" In my masterpage i i'm getting the files down by these: <link href="Content/Site.css" rel="stylesheet" /> <link href="Content/bootstrap.css" rel="stylesheet" /> Some code: <div...

Meteor Iron Router not loading template


javascript,meteor,iron-router
I am trying to load templates using iron router and none of the templates for the routes load. The url will change when the items are clicked but the current page never changes. Lib/router.js - Router.configure({ // we use the appBody template to define the layout for the entire app...

Setting up the page grid using push and pull


html,twitter-bootstrap,css3,twitter-bootstrap-3
I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below? This is what I've got so far, <div class="row"> <div class="col-xs-5 col-sm-3 col-md-3">A</div> <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div> <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div> </div> ...

Meteor: Passing Session values from client to server


javascript,node.js,session,meteor
I am using the following code on the client side to set the Session variable: Template.download.events({ 'click button': function() { var clientid=Random.id(); UserSession.set("songsearcher", clientid); console.log(clientid + UserSession.get("songsearcher")); I am using the following pacakge: Meteor-User-session, which will explain the use of UserSession in place of Session. Now, this works fine. But...

change icon on collapse in Bootstrap 2.3 not in bootstrap 3


javascript,jquery,css,html5,twitter-bootstrap
I am using bootstrap 2.3 collapse in my project. I need to change icons on collapse means on show and hide I need to change icons. with bootstrap 3 some shown and hidden functions are showing in internet but I need with Bootstrap 2.3. Please let me know how to...

Bootstrap 'form-group has-error' not working with php codes [closed]


php,html,twitter-bootstrap
Inputs don't turn red and does not print the error messages when I'm submitting empty fields. How can I show the error messages and make the input boxes turn red when I'm sending empty fields with this code. <?php if ( !empty($_POST)) { require 'db.php'; // validation errors $fnameError =...

How to fit the title to the entire page


html,css,twitter-bootstrap
I'm trying to fit this title to the entire page. For some reason, there is a padding around the text that's not allowing me to fit it. I set the padding of the column (Bootstrap) to 0, but that doesn't seem to help. As soon as I increase the font-size...

Border spacing between the columns


html,css,twitter-bootstrap
I have 3 columns in a row, each of which has the class col-xs-4 and so they cover up the entire row. Now I need to add border for each of these columns and I don't want them to overlap. Currently, am using border but there's no spacing between the...

Meteor collections: how to connect to different collections referring to each other?


meteor,meteor-helper,meteor-collections
I have two collections: Contracts = new Mongo.Collection('contracts'); Reminders = new Mongo.Collection('reminders'); These are structured in the database more or less like this: Contracts: { "id": "4432234", "contract": "C-42432432", "description": "Description of contract", "counterpart": "Company name", "status": "awarded" }, etc. Reminders: { "name": "Contract expiring", "type": "expiring", "contract": "C-42432432", "reminderDate":...