Installing Twitter Bootstrap

Twitter Bootstrap is a frontend HTML5 framework that allows anyone to easily construct reliable interfaces. At the time of writing, the version of Bootstrap used is version 3.1.1.

We will use Twitter Bootstrap throughout this book to provide the framework for all view files and templates. We will look at how to download Twitter Bootstrap and how to install it in the CodeIgniter filesystem.

Firstly, we will need to download the Twitter Bootstrap files. To do that, perform the following steps:

Once the download is finished, go to its location on your machine and unpack the archived file. Inside the unpacked file, you should see something similar to what is shown in the following structure:

bootstrap/
├── css/
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap.css
│   └── bootstrap.css.map
│   └── bootstrap.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

Move the bootstrap folder to your CodeIgniter installation so that the file hierarchy looks like the following:

/path/to/web/root/
├── application/
└── views/
    ├── common
        ├── header.php
        ├── footer.php
├── system/
├── bootstrap/
├── index.php
├── license.txt

In the preceding tree structure, the application and system directories are to do with CodeIgniter, as are the index.php and license.txt files; however, the bootstrap directory contains the contents of your Bootstrap download.

I have also indicated the location of the common header.php and footer.php files. These files are used throughout the book and act as a wrapper for every other view file.