Bootstrap Basics

Bootstrap itself is surprisingly simple to use. This page explains how to prepare Bootstrap and the basic source code.

What is Bootstrap?

Web site development has changed dramatically over the past few years. One major reason is the smartphone. Smartphone screens are smaller and taller than PC screens, so pages designed only for PCs are often hard to read on mobile devices. Maintaining separate PC and smartphone pages is inefficient because the same content must be updated twice.

Responsive design solves this by detecting the screen environment and showing an appropriate layout automatically. Bootstrap is a front-end web application framework that makes responsive design easier. Unlike server-side web application frameworks, Bootstrap runs on the front end, in the browser.

Bootstrap is an open source project originally developed inside Twitter by Mark Otto and Jacob Thornton. It bundles many UI components, so developers can create clean UI and UX with simple HTML, CSS, and JavaScript. It is especially useful for demos and prototypes, and it also provides many JavaScript actions that are difficult to implement from scratch.

http://getbootstrap.com/

Bootstrap can be used by downloading the files and including them in your site, or by loading them from a CDN. If you use a CDN, you do not need to download the files yourself.

Bootstrap file structure

The Bootstrap distribution is provided as a ZIP file. After extracting it, the required files are organized by folder.

Download Bootstrap

Download it from GitHub. https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

Or download it from the Bootstrap Getting Started page. http://getbootstrap.com/getting-started/

The Bootstrap folder has the following structure.

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

The files are grouped into style sheets, fonts, and JavaScript. Files with min in their names are minified versions of the same files. In practice, you only need one version.

Bootstrap also requires jQuery. The Bootstrap distribution does not include jQuery itself, so if you do not use a CDN, download jQuery separately and place it in the js folder.

Download jQuery

https://jquery.com/download/

Basic Bootstrap code

The following is the basic HTML structure when Bootstrap files are installed locally. Save it as index.html in the Bootstrap folder.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
  <h1>Hello, world!</h1>
  <p>This is Bootstrap sample page!</p>
</div>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>

Loading `bootstrap.css` and `bootstrap-theme.css`

Bootstrap relies heavily on its style sheets. Load both bootstrap.css and bootstrap-theme.css, or their minified versions.

Where to load scripts

There are two script files: jQuery and Bootstrap. Bootstrap templates load them after the body content. Loading them in <head> can also work because Bootstrap waits for page load, but following the template structure is clearer.

Write content inside `<div class="container">`

The container class adds appropriate margins around page content. Without it, content can fill the window from edge to edge and lose Bootstrap’s responsive layout characteristics.

Using a CDN

If uploading Bootstrap files is cumbersome or you want to reduce local file management, use a CDN.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" crossorigin="anonymous">
</head>
<body>
<div class="container">
  <h1>Hello, world!</h1>
  <p>This is Bootstrap sample page!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

bootstrapcdn.com provides Bootstrap CSS and JavaScript. Google Ajax API provides jQuery. CDN use makes version upgrades and file maintenance easier, although page loading can be affected if the CDN has a problem.

Compile and use Bootstrap

You can also download the source package that includes Less, JavaScript, and fonts. https://github.com/twbs/bootstrap/archive/v3.3.7.zip

Install Bootstrap with Bower

bower install bootstrap

Bootstrap provides several installation methods. Choose the one that fits your usage and skill level.

About `<meta>` tags

Bootstrap pages should include a few important meta tags.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

This prevents Internet Explorer from using Compatibility View and forces standards mode.

<meta name="viewport" content="width=device-width, initial-scale=1">

This configures the viewport scale for smartphones. It allows pages to render consistently across mobile devices.

Bootstrap components

Bootstrap usage can be broadly divided into three areas.

CSS style sheets
Reusable components
JavaScript components