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.
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>
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>
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.
<dl>
<dt>Aaa</dt><dd>Apple</dd><dd>Arrow</dd>
<dt>Bbb</dt><dd>Ball</dd><dd>Bear</dd>
</dl>
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.