Bootstrap

A front-end framework for web development. Makes GUI creation easy. Includes HTML/CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, etc.

Provides responsive designs that automatically adjust themselves to different screen/browser sizes. Designs are compatible with all major browsers.

Built on jQuery.

Getting Started

Minimal

Minimal HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <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"></script>
    </head>
</html>

For mobile rendering and touch zooming:

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

Container

Bootstrap requires a containing element to wrap site contents. Containers cannot be nested, but you can have more than one per page.

Full width option: .container
Viewport width option: .container-fluid


<body>
    <div class="container">
        <!-- site contents -->
    </div>
</body>

Grid System

Horizontal space is split into 12 units. "1" is 1/12 of the parent element width.

The class names are formatted as "col-<size>-<units>". Size options are xs (phones), sm (tablets), md (desktops), and lg (larger desktops). Units can be any integer from 1 to 12.


<div class="col-md-4"></div> <!-- 4/12 = 1/3 of parent width -->
<div class="col-md-1"></div> <!-- 1/12 of parent width -->

Typography

Defaults to 14px font size, 1.428 line height, with 10px bottom margin on paragraphs.

Headers

Use <h1> through <h6> for headers. Use <small> for secondary text within a header.


<h2>Title <small>Subtitle</small></h2>

List

Use <dl> for description list.


<dl>
    <dt>Aaa</dt><dd>Apple</dd><dd>Arrow</dd>
    <dt>Bbb</dt><dd>Ball</dd><dd>Bear</dd>
</dl>

Misc

Use <mark> to highlight text.

Use <blockquote> to inset a section of text.

Use <code> to enclose code syntax.

Use <kbd> to style a keyboard command like Ctrl-P.