Bootstrap

Bootstrap is a popular CSS framework of prewritten stylesheets designed to help you build webpages faster.



Why Use It?

Bootstrap offers solutions to common problems faced by frontend web developers. With Bootstrap, web developers can:

  • Build complex website layouts quickly.
  • Design layouts over a 12-column grid system.
  • Use prewritten JavaScript for dynamic site features.
  • Create device-specific layouts (desktop, tablet or mobile).
  • Create layouts that work on a variety of web browsers.




Getting Started with Bootstrap

Here are a few different ways to use Bootstrap:



Link to a CDN

CDNs, or content delivery networks, are code files hosted on the web that you can include in your project. Using a CDN is the fastest way to get set up with Bootstrap.

Find a CDN for Bootstrap. MaxCDN hosts the latest version: 

    <!-- Latest compiled and minified CSS -->

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

    <!-- Latest compiled and minified JavaScript -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>




Simply include the code above in your HTML head element and you will be good to go!




Use a Local Copy of Bootstrap

Another option is to download your own copy of Bootstrap and integrate it into your project structure.




Step 1. Download Bootstrap

Download Bootstrap as a Zip file here. Next, open your computer’s file manager and locate bootstrap-3.3.7-dist.zip in your Downloads folder. Double-click the file to unzip it.




Step 2. Choose a Project

Our example project is the homepage for Codebrainery.io. Adapt the following instructions for use in your own project or download codebrainery here to follow along.

codebrainery contains three files, index.html, main.css: 

codebrainery
  | - index.html 
  | - main.css




Step 3. Move Bootstrap Into Your Project Folder

Using your command line or file manager, move the newly unzipped bootstrap-3.3.7-dist folder into your project folder. This will create the following folder structure: 

codebrainery
  | - index.html 
  | - main.css 
  | - bootstrap-3.3.7-dist
       | - css
       | - js
       | - fonts




Step 4. Link to Your Copy of Bootstrap

Using your favorite text editor, open index.html and locate the head element. Codebrainery.io’s homepage already links to a Bootstrap CDN:

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

Replace the link‘s href attribute so you can load your locally installed, minified Bootstrap CSS instead:

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>

Later, we will implement Bootstrap features that depend on Bootstrap JavaScript as well as jQuery, so add them to the head element now. Add two script tags below the link tag: 

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>




When to Use Bootstrap

Reach for Bootstrap when you need assistance implementing any of the following:

  • headers and footers
  • responsive navbars
  • glyphicons and fonts
  • banners (called jumbotrons in Bootstrap)
  • supporting feature layouts using multiple columns
  • galleries, slideshows and other dynamic components