Bootstrap Bower. Bower is a popular package manager to help you quickly deploy components. In this article I'm going to show you how to install Bower and how to use it to install Bootstrap.
Bower provides hooks to facilitate using packages in your tools and workflows. Bower is optimized for the front-end. If multiple packages depend on a package - jQuery for example - Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load.
Bower depends on Node. js and npm. Also make sure that git is installed as some bower packages require it to be fetched and installed.
I finally ended using the following :
bower install --save http://twitter.github.com/bootstrap/assets/bootstrap.zip
Seems cleaner to me since it doesn't clone the whole repo, it only unzip the required assests.
The downside of that is that it breaks the bower philosophy since a bower update
will not update bootstrap.
But I think it's still cleaner than using bower install bootstrap
and then building bootstrap in your workflow.
It's a matter of choice I guess.
Update : seems they now version a dist folder (see: https://github.com/twbs/bootstrap/pull/6342), so just use bower install bootstrap
and point to the assets in the dist
folder
There is a prebuilt bootstrap bower package called bootstrap-css. I think this is what you (and I) were hoping to find.
bower install bootstrap-css
Thanks Nico.
The css and js files are located within the package: bootstrap/docs/assets/
UPDATE:
since v3 there is a dist
folder in the package that contains all css, js and fonts.
Another option (if you just want to fetch single files) might be: pulldown. Configuration is extremely simple and you can easily add your own files/urls to the list.
assuming you have npm installed and bower installed globally
bower init
(this will generate the bower.json file in your directory)to set the path where bootstrap will be installed:
manually create a .bowerrc
file next to the bower.json file and add the following to it:
{ "directory" : "public/components" }
bower install bootstrap --save
Note: to install other components:
bower search {component-name-here}
I ended up going with a shell script that you should only really have to run once when you first checkout a project
#!/usr/bin/env bash
mkdir -p webroot/js
mkdir -p webroot/css
mkdir -p webroot/css-min
mkdir -p webroot/img
mkdir -p webroot/font
npm i
bower i
# boostrap
pushd components/bootstrap
npm i
make bootstrap
popd
cp components/bootstrap/bootstrap/css/*.min.css webroot/css-min/
cp components/bootstrap/bootstrap/js/bootstrap.js src/js/deps/
cp components/bootstrap/bootstrap/img/* webroot/img/
# fontawesome
cp components/font-awesome/css/*.min.css webroot/css-min/
cp components/font-awesome/font/* webroot/font/
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