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 HTML:

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <link rel="stylesheet" href="">
        <script src=""></script>
        <script src=""></script>

For mobile rendering and touch zooming:

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


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

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

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 -->


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


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

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


Use <dl> for description list.



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.