135

I'm trying to use bootstrap with bower, but since it clones the whole repo, there is no CSS and other stuff.

Does it means that I need to include building Bootstrap in my own build process? Or if I'm wrong, what's the right workflow?

Léo Lam
  • 3,375
  • 3
  • 30
  • 43
xavier.seignard
  • 10,084
  • 12
  • 44
  • 71
  • 28
    Not a dumb question at all. This is the first package I tried to install with bower. The resulting lack of clarity and mess made me overlook the tool for a long time. – jhappoldt May 06 '13 at 17:23

7 Answers7

84

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

xavier.seignard
  • 10,084
  • 12
  • 44
  • 71
  • 2
    Just updated `npm` and `bower` and having `"bootstrap": "http://twitter.github.com/bootstrap/assets/bootstrap.zip"` in `component.json` also seems to work. – antitoxic Apr 03 '13 at 20:28
  • 8
    Doesn't this defeat the purpose of using bower in the first place? – namuol Apr 30 '13 at 08:27
  • 5
    Yes it kinda suck. But what's sucking more is to re-build bootstrap in your own build process since they don't version builds in their repo. – xavier.seignard Apr 30 '13 at 08:34
  • 1
    @namuol ,exactly, I thought bower was created for those who didn't know how to make the dir structure for any library, like jquery, bootstrap... it doesn't make sense to provide source files to those who doesn't know, it confuses them more ! – alexserver Feb 21 '14 at 02:52
  • Updating npm was the solution for me. – Yves Van Broekhoven May 20 '14 at 18:35
  • @xavier.seignard, I have tried this "bower install bootstrap" but sill the entire repo is getting cloned. What might went wrong? – Purushoth Mar 05 '15 at 17:29
78

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.

Terry Roe
  • 1,124
  • 10
  • 15
28

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.

Dziad Borowy
  • 11,740
  • 4
  • 37
  • 51
  • This is incorrect as of at least today for Bootstrap 3. The only files in bower_components/bootstrap/docs/assets/css/ are docs.css and pygments-manni.css. Neither of these are the Bootstrap css files. – coffee-grinder Aug 21 '13 at 15:01
4

assuming you have npm installed and bower installed globally

  1. navigate to your project
  2. bower init (this will generate the bower.json file in your directory)
  3. (then keep clicking yes)...

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

  5. bower install bootstrap --save

Note: to install other components:

 bower search {component-name-here}
Mahmoud Zalt
  • 24,048
  • 7
  • 74
  • 78
3

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/
Felix Rabe
  • 3,856
  • 4
  • 22
  • 33
slf
  • 22,091
  • 10
  • 73
  • 98
  • 1
    @lenswipe yeah, me neither, not now anyway. three years later things have evolved where one shouldn't need to do this any more – slf Nov 11 '16 at 18:36
2

Also remember that with a command like:

bower search twitter

You get a result with a list of any package related to twitter. This way you are up to date of everything regarding Twitter and Bower like for instance knowing if there is brand new bower component.

joaquindev
  • 125
  • 1
  • 5
  • Thanks, that helps to show everything that's related to Twitter but it shows many options to install. If you like to install the latest twitter bootstrap, use 'bower install twitter' that installs https://github.com/twbs/bootstrap and that does also include the compiled sources in the dist directory. – AWolf Oct 04 '14 at 21:51
  • Perfect, so with a combination of both, you can always know what's going to be installed in your computer. – joaquindev Jan 29 '18 at 05:27
0

You have install nodeJs on your system in order to execute npm commands. Once npm is properly working you can visit bower.io. There you will find complete documentation on this topic. You will find a command $ npm install bower. this will install bower on your machine. After installing bower you can install Bootstrap easily.

Here is a video tutorial on that

Leonardo Alves Machado
  • 2,481
  • 7
  • 31
  • 43
asad khan
  • 1