{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/how-to-use-bower-to-install-bootstrap/","result":{"data":{"markdownRemark":{"id":"55058f5f-dc61-5f1d-8298-748b1e94398f","excerpt":"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…","html":"

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.

\n

Pre-requisites: To install Bower you must first have Node.js and npm (another package manager) installed, your computer may have shipped with these pre-installed. To check if you have npm, open your command-line tool and type:

\n
npm -v
\n

If you do not get a version number, you may need to install npm which comes pre-packaged with Node.js

\n

You can find Node.js along with instructions on how-to install it here: NodeJS

\n

Windows Users Only: If you're a Windows user make sure you have Git for Windows installed to work with the Windows Command Prompt with Checkout Windows-Style and commit Unix-style line endings. You can find more information on that here: Git for Windows

\n

Installation:

\n

Provided that you have both Node.js and npm installed, run the following command in your Command-line tool:

\n
npm install -g bower
\n

Usage:

\n

Once Bower is installed it's as easy as going to your project folder in Command-line and typing:

\n
bower install bootstrap
\n

followed by:

\n
bower install jquery
\n

This will install the files required for Bootstrap in the newly created 'bower_components' folder.

\n

In this folder you will have 2 new folders 'bootstrap' and 'jquery'.

\n

The next step is to include the files for both jQuery and Bootstrap into your project file(s).

\n

...And that's it, you're good to go.

\n

Updating

\n

If you need to update a project and are unsure which bower packages you have installed that might need an update, you can type

\n
bower list
\n

in your project directory for a listing of packages you installed via Bower and which ones are due for an update.

\n

in this case if we wanted to update our bootstrap install we would do:

\n
bower update bootstrap
\n

Making your Bower configurations portable

\n

Once you have figured out your configurations and installed all of your desired Bower packages you can use:

\n
bower init
\n

Follow the steps provided in your Command-line.

\n

This will initialize a bower.json file which will store your configurations.

\n

Once you have your Bower.json file you can move it around to other locations or projects and you can get Bower to reinstall all of your packages and configurations by typing:

\n
bower install
\n

This will get Bower to create another 'bower_components' folder with the same packages and configurations specified in your bower.json file.

\n

For further information on using or configuring Bower You can checkout the official website

\n","headings":[{"value":"Installation:","depth":2},{"value":"Usage:","depth":2},{"value":"Updating","depth":2},{"value":"Making your Bower configurations portable","depth":2}],"fields":{"slug":"/engineering/how-to-use-bower-to-install-bootstrap/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"Learn how the Bower package manager helps into quick components deploy and install Bootstrap using Bower","title":"Install Bootstrap with Bower","canonical":null,"date":"July 05, 2017","updated_date":null,"tags":["Bootstrap","Bower"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.1363636363636365,"src":"/static/f22ed4623c0a1e31c973ed6e1f0ba4bd/03979/bower-logo.png","srcSet":"/static/f22ed4623c0a1e31c973ed6e1f0ba4bd/f5f11/bower-logo.png 200w,\n/static/f22ed4623c0a1e31c973ed6e1f0ba4bd/6d133/bower-logo.png 400w,\n/static/f22ed4623c0a1e31c973ed6e1f0ba4bd/03979/bower-logo.png 800w,\n/static/f22ed4623c0a1e31c973ed6e1f0ba4bd/5825a/bower-logo.png 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Pascal Noel","github":null,"bio":"Software Engineer and adventure seeker with a knack for fun facts. Originally from the East Coast of Canada, moved to Vancouver to enjoy its mild climate and now staying for its scenic hikes.","avatar":null}}}},"pageContext":{"id":"55058f5f-dc61-5f1d-8298-748b1e94398f","fields__slug":"/engineering/how-to-use-bower-to-install-bootstrap/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}