< Bootstrap Tutorial

Bootstrap environment

← Previous Next →

Bootstrap Environment

Getting Bootstrap

The latest version of Bootstrap can be downloaded from here. The Bootstrap website provides two different download options which are Compiled CSS and JSS download or the Source File download. Compiled download contains compiled and minified version of CSS and JavaScript files as well as icons in font format for faster and easier web development, while the source contains original source files for all CSS and JavaScript, along with a local copy of the docs.

We also have another option to include Bootstrap in our project by the use of CDN or the Content Delivery Network. Using this we can get the Bootstrap files on-the-fly on the users machine and render the website accordingy. Different URLs are there to obtain only CSS or only JS or the complete package. The URLs are as follows:

CSS only:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

JS, Popper and JQuery:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

The attributes integrity and crossorigin have been added to Bootstrap CDN to implement Subresource Integrity (SRI). It is a security feature that enables to mitigate the risk of attacks originating from compromised CDNs, by ensuring that the files our website fetches (from a CDN or anywhere) have been delivered without unexpected manipulation. It works by allowing us to provide a cryptographic hash that a fetched file must match.

File Structure

Once the compiled Bootstrap is downloaded, unzip the compressed folder to see the structure. We'll find the following file structure and contents.

|—— css/
|   |—— bootstrap.css
|   |—— bootstrap.min.css
|   |—— bootstrap-theme.css
|   |—— bootstrap-theme.min.css
|—— js/
|   |—— bootstrap.js
|   |—— bootstrap.min.js
|—— fonts/
|   |—— glyphicons-halflings-regular.eot
|   |—— glyphicons-halflings-regular.svg
|   |—— glyphicons-halflings-regular.ttf
|   |—— glyphicons-halflings-regular.woff

The compiled version of Bootstrap provides compiled CSS and JS files (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*).


← Previous Next →