Downloading Bootstrap's source files

There are many other ways to download Bootstrap, but not all ways of downloading Bootstrap are equal. For what follows, we must be sure to get the Sass files, as these files give us the power to customize and innovate upon Bootstrap's underlying style rules. For this exercise, we'll go straight to the source, that is, http://getbootstrap.com/. You will encounter the following screenshot:

Once there, the large Download source button is your friend. At least as of Version 4.0, this is the second largest button on the homepage of Bootstrap:

In case something should change, you can always follow the GitHub project link at https://github.com/twbs/bootstrap, and once at the GitHub repository, click on the Download ZIP button. Or run the following command in your console to clone the repo:

git clone https://github.com/twbs/bootstrap.git

The files you'll have

Once you've downloaded the Bootstrap source files, you should see a file structure that is similar to the following screenshot:

The preceding files contain not only Bootstrap's source files, including the SCSS code and EM6 code for the jQuery plugins, but also the files to set up Bootstrap's build process. Bootstrap is built with Grunt by default. Admittedly, that's a lot of files, and we don't need them all. On the plus side, we have everything we want from Bootstrap. Notice that the source does not contain font files since the Glyphicon Halflings set has been dropped as described earlier. Bootstrap's default fonts are set by CSS only and do not require a font file.

While the exact contents of the repository will change over time, the main contents will remain relatively consistent. Most notably, in the scss folder, you will find all the important Sass files, which are key to every project in this book. Another benefit is that the js folder contains Bootstrap's individual JavaScript plugins so that these may be selectively included as needed.

On the other hand, if you want Bootstrap's default, precompiled CSS or JavaScript files (such as bootstrap.css or bootstrap.min.js), they are still available within the dist folder. The structure of the precompiled files will look like the following:

The umd folder in the preceding screenshot contains the plugin files ready to require() this file in a CommonJS environment. These files are UMD ready (Universal Module Definition). Both CommonJS and AMD are script loaders which ensure that different JavaScript components load in the right order and play nice together. The universal pattern of UMD supports both CommonJS and AMD.

As a bonus, you'll find the example HTML templates in the docs/examples folder. In fact, we'll use one of these examples to set up our first project template folder.

Other ways to download and integrate Bootstrap

Instead of directly downloading Bootstrap, you can also use other tool and package managers to get the files. In the overview below, you will find a list of commands and tools:

• Install with npm: npm install bootstrap
• Install with Meteor: meteor add twbs:bootstrap
• Install with Composer: composer require twbs/bootstrap
• Install with Bower: bower install bootstrap
• Install with NuGet:
  • CSS: Install-Package bootstrap -Pre
  • Sass: Install-Package bootstrap.sass -Pre