Learning Bootstrap: Part 1: Installing and Using

Learning Bootstrap

Bootstrap is a free and open-source front-end framework for designing HTML- and CSS-based website and web applications.


Installing and Using

Bootstrap

The Bootstrap website includes many different ways to install the files through different existing package management tools. There is a NPM package, Ruby gem, and package for PHP Composer. When using these tools in connection to Bootstrap, follow their own instructions or the default installation methods.


Downloading

The Download page for Bootstrap contains links for both compressed and source files. For those projects in development, consider using the uncompressed, source files. Otherwise, the compressed files might work better.

Once downloaded, copy the js and css files into a new or existing project folder. 


Using

To use the downloaded version of the compressed or source files in a project, include the CSS file in the HEAD and the JavaScript file in the HEAD or BODY. (To help with loading, it is often recommended to place all JavaScript loading until the end of the document to allow all visual elements to appear and load first.)


Using with CDN

The Home and Download pages for Bootstrap also includes the links for the Content Delivery Network (CDN) versions of the CSS and JS files. These can be included in projects where additional files cannot be saved or to quickly prototype ideas.


See the example on Repl.it!