twitter-bootstrap,gruntjs,less,workflow,bower , Development Workflow - Bootstrap (Less), Bower and Grunt


Development Workflow - Bootstrap (Less), Bower and Grunt

Question:

Tag: twitter-bootstrap,gruntjs,less,workflow,bower

I am trying to step up my game as far as my folder structure and workflow is considered. I have recently discovered that front end package management and automation of tasks are key to improve speed, decreasing dev time, decrease file size and increase profit.

My issue is I am not too sure what the best method of using these tools are. I have a builds folder, which includes a dev and prod folder. My components are outside this folder in the bower_components folder.

I usually customise bootstrap and take advantage of it's variables file and mixins. I have copied the bootstrap.less file, and the variables.less file, and placed them in builds->dev->less. I then have grunt compiling the less using the bootstrap.less file from this new directory.

Is this the best way to go about using bootstrap and it's less files in this setup? I want to use bower due to it's power, but I also want to keep the power of customising bootstrap and it's less files.

What do you guys think?

NB: I usually code themes for brochure websites and very small applications.


Answer:

As posted above by Bass Jobsen:

you don't have to copy bootstrap.less and variables.less. Less uses lazy loading and last declaration wins for variables, so to can put their definition afterwards to (re)assign them. Create a project.less file which @imports bootstrap.less from your bower folder and put your custom variables assignments, mixins, and code after the @import


Related:


Disabling right-click for not yet loaded content


jquery,twitter-bootstrap
I want to disable people from downloading the images from my bootstrap image gallery, but since it isn't loaded until it shows up it is still clickable. If I disable right-click for body instead of img, then it works fine.. But I don't want to disable the whole body. I'm...

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;...

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...

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...

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:...

JSLint error: “Expected a newline at EOF”, conflict with Beautify plugin


javascript,gruntjs,jslint,beautify
I have a problem while building the sources using Grunt, with JSLint task for error check: L177: Expected a newline at the end of the file. Warning: Formatting check failed. Use --force to continue. Aborted due to warnings. The problem is obvious, but I use also the Beautify plugin for...

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...

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...

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...

$http.get returns actual php script instead of running it (yeoman, grunt)


php,angularjs,pdo,gruntjs
I'm building a "simple" AngularJS app with an articles newsfeed. My articles are stored in a mysql database, and I extract them using php PDO. I used to do this using AJAX with a simple LAMP configuration (php5, mysql, apache2), and everything worked as intended. Now I'm trying to rebuild...

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...

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...

Responsive background with its height based on the adjacent column using bootstrap


css,twitter-bootstrap
How can I have a full image background inside a column but without knowing the height of it? Im using bootstrap and I need the image to be responsive. Please look at the image for a better understanding <div class=" col-xs-12 col-sm-5 col-md-5 col-lg-4 bgimage"> </div> <div class=" col-xs-12 col-sm-7...

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...

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...

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 =...

Marionette CompositeView - change in template each nth items


twitter-bootstrap,backbone.js,marionette,composite-view
I'm using Marionette for a while, but I'm not sure how I can do what I want, in a simple manner. I have a composite view, which renders something like this: <div class="row"> <div class="col-xs-12"> <div id="items"></div> </div> </div> Each of my item is being rendered as a: <div class="col-xs-3">foo</div>...

Remove weird space bootstrap


html,css,twitter-bootstrap
I want to remove some weird bottom space from the following markup: .container { border: 1px solid blue; } img { border: 1px solid red; height: 100%; width: 100%; } /** * Bootstrap */ .container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-left: .833333rem; padding-right: 15px; padding-right: .833333rem; } @media...

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...

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>';...

Popup is not getting shown - bootstrap


jquery,twitter-bootstrap
Bootstrap popup is not showing up on click. Only "modal-open class" and "modal-backdropin" open in browser. But popup window is not showing. Here is my code <script> $(function () { $('#signup').on('click', function () { $(this).attr('data-target') ; $('#myModal').load('register.html');{ $(this).modal({ show: true }); }; }); }); </script> <a href="register.html" id="signup" data-toggle="modal" data-target="#myModal">Sign...

“Arguments to path.resolve must be strings” when calling 'gitbook build' from a Git hook


node.js,git,gruntjs,githooks,gitbook
I am trying to run gitbook build within a post-receive Git hook on my (Gitlab, Debian 7, virtual private) server. Basically I want to: checkout the bare repository to a temporary dir run gitbook build in that temporary dir sync with the webspace through rsync The post-receive script runs something...

list checkboxes displayed horizontal


html,css,html5,twitter-bootstrap,css3
I have the following markup:- <div class="fil hori now"> <span class="label-new"> <ul class="ngc"> <li> <input class="any" id="any" name="any" type="checkbox"> <label id="any" for="any">Any</label> </li> <li class="new-select"> <input id="item1" name="item1" type="checkbox"> <label id="item1" for="item1">item1</label> </li> <li class="new-select"> <input id="item2" name="item2" type="checkbox"> <label id="item2"...

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...

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:...

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...

boostrap & Normalize.css: spacing problems


html5,twitter-bootstrap,css3
Boostrap normalize does not seem to remove top and left/right spacing from theme i am developing. Could somebody give hint where is the problem in my code. I have tried several reset css files also without any effects. Index <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- GOOGLE FONTS -->...

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...

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...

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">...

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...

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">' ); });...

Spinning icon, next to edit box


twitter-bootstrap
I am trying to create an edit box, and next to it, a small spinner, that when finished, will show based on a button click, indicating 'busy'. The edit box AND the icon, should use 100% of the containers width (col-xs-12). However, with my current code, the icon goes on...

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...

.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"...

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...

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; }...

React js css transitions on class removal


twitter-bootstrap,reactjs,css-transitions
I have column that should have different width depending on some flag. I use Bootstrap, so I assign col-xs-12 and col-xs-2 depending on the flag. Now I want it to change width slowly with css transition. I've read official React.js doc about transitions, but it doesn't apply to my case:...

Bootstrap Navbar vertically align Brand with other links


html,css,twitter-bootstrap
I want to vertically align the Brand in a Bootstrap Navbar with the other links, such that bottom of each element is aligned vertically. The current alignment is either center aligned or just unaligned. The HTML is something like: <nav class="navbar navbar-inverse navbar-fixed-top"> <ul class="nav navbar-nav"> <li><a href="/" class="navbar-brand">Brand</a> <li><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%)...

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...

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">...

Is express similar to grunt? what is the difference? what are the advantages of express over grunt?


node.js,express,gruntjs,mean-stack
I've been working on node,grunt,bower and yeoman from couple of months. I came across MEAN stack applications, in which expressjs is providing the server environment(my understanding). Are both grunt and express similar? Requesting for some helpful link on express and MEAN stack. ...

Bootstrap 3 collapsed menu not working on mobile screens


jquery,css,twitter-bootstrap,twitter-bootstrap-3
It seems a lot of people are having this trouble (https://github.com/twbs/bootstrap/issues/7968), but the solution that worked for some is not working for me. If you try to open my website at http://axxon.co and resize the window until the burger menu appears, you'll notice that nothing happens if you click on...

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...

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...

Bootstrap 3 col-sm-4 creates two columns instead of 3


html,css,twitter-bootstrap
Following the TutsPlus Power Up Your Portfolio With Bootstrap tutorial. Trying to implement a 3 column portfolio with Bootstrap 3's col-sm-4 class , to get something like: Instead, here is what I get: And here is what I get when I zoom out: HTML code: <!doctype html> <html class="no-js" lang="">...

How to update the value of data attribute using jquery


javascript,jquery,twitter-bootstrap
I have the following bootstrap data toggle markup and I want to change the icon and the text to change on toggle. I can get the text to change but not the icon. What I'm I doing wrong? <div id="collapseDiv" > <dl> <dt>...</dt> <dd>...</dd> </dl> </div> <a href="#collapseDiv" data-toggle="collapse" class="icon-before"...

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> ...

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' +...