How to Install Twitter Bootstrap

By Nikhil Abraham

Twitter Bootstrap is a free toolkit that allows users to create web pages quickly and with great consistency. Install and add Bootstrap to your HTML file by following these two steps:

  1. Include this line of code between your opening and closing <head> tag:

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    The <link> tag refers to version 3.2.0 of the Bootstrap CSS file hosted on the Internet, so you must be connected to the Internet for this method to work.

  2. Include both these lines of code immediately before your closing HTML </body> tag.

    <!--jQuery (needed for Bootstrap's JavaScript plugins) →
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!--Bootstrap Javascript plugin file →
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    The first <script> tag references a JavaScript library called jQuery. At a high level, jQuery simplifies tasks performed using JavaScript. The second <script> tag references Bootstrap JavaScript plugins, including animated effects such as drop-down menus. If your website does not use any animated effects or Bootstrap JavaScript plugins, you don’t need to include this file.

    Bootstrap is free to use for personal and commercial purposes, but does require including the Bootstrap license and copyright notice.

If you will not have reliable access to an Internet connection, you can also download and locally host the Bootstrap CSS and JavaScript files. To do this, after unzipping the Bootstrap file, use the <link> and <script> tags to link to the local version of your file. Visit the Bootstrap Getting Started page to download the files and to access additional instructions and examples.