Bootstrap Complete Guide

Basic Setup

Add the following to your HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

Container and Layout

Container

.container - Adds left/right margins

Grid System

Reference: W3Schools Bootstrap Grid System

Typography and Text

Text Alignment

.text-left
.text-center
.text-right
.text-justify

Text Format

.text-lowercase
.text-uppercase
.text-capitalize

Contextual Colors

Text colors:

.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger

Background colors:

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger

Buttons

Button Styles

<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Button Sizes

.btn-lg - Large
.btn-md - Medium
.btn-sm - Small
.btn-xs - Extra small

Full Width Button

<button type="button" class="btn btn-primary btn-block">Full Width Button</button>

Button States

<button type="button" class="btn btn-primary active">Active</button>
<button type="button" class="btn btn-primary disabled">Disabled</button>

Button Groups

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Size variations: .btn-group-lg, .btn-group-sm, .btn-group-xs

Layout options:

.btn-group-vertical - Vertical buttons
.btn-group-justified - Full width distributed

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown Example <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-header">Header 1</li>
    <li class="active"><a href="#">HTML</a></li>
    <li class="disabled"><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">Header 2</li>
    <li><a href="#">About Us</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>

Tables

Table Classes

.table - Basic horizontal lines
.table-striped - Striped rows
.table-bordered - Bordered cells
.table-hover - Hover effect on rows
.table-condensed - Reduced padding
.table-responsive - Horizontal scroll

Contextual Classes for Rows

.active
.success
.info
.warning
.danger

<table class="table table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr class="success">
      <td>John</td>
      <td>john@example.com</td>
    </tr>
    <tr class="danger">
      <td>Mary</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

Images

Image Classes

.img-rounded - Rounded corners
.img-circle - Circle shape
.img-thumbnail - Thumbnail border
.img-responsive - Responsive sizing

<img src="photo.jpg" class="img-responsive img-rounded" alt="Photo">

Thumbnail Gallery

<div class="thumbnail">
  <a href="/images/nature.jpg">
    <img src="/images/nature.jpg" alt="Nature" style="width:100%">
    <div class="caption">
      <p>Description text here</p>
    </div>
  </a>
</div>

Alerts

Alert Types

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful action.
</div>
<div class="alert alert-info">
  <strong>Info!</strong> Indicates informative change.
</div>
<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning.
</div>
<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous action.
</div>

Dismissible Alert

<div class="alert alert-success alert-dismissable fade in">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Message here.
</div>

Badges and Labels

Badge

<a href="#">News <span class="badge">5</span></a>
<button type="button" class="btn btn-primary">
  Primary <span class="badge">7</span>
</button>

Labels

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Progress Bars

Basic Progress Bar

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
       aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70%
  </div>
</div>

Colors

.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger

Striped and Animated

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped active"
       role="progressbar" style="width:40%">
    40%
  </div>
</div>

Stacked Progress Bar

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:40%">Free</div>
  <div class="progress-bar progress-bar-warning" style="width:10%">Warning</div>
  <div class="progress-bar progress-bar-danger" style="width:20%">Danger</div>
</div>

Lists and Panels

Unstyled List

<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Inline List

<ul class="list-inline">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

List Group with Badges

<ul class="list-group">
  <li class="list-group-item">New <span class="badge">12</span></li>
  <li class="list-group-item">Deleted <span class="badge">5</span></li>
</ul>

List Group with Links

<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item disabled">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Contextual List Items

.list-group-item-success
.list-group-item-info
.list-group-item-warning
.list-group-item-danger

Panel

<div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class="panel-body">Panel Content</div>
  <div class="panel-footer">Panel Footer</div>
</div>

Panel colors: .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger

Panel Group

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
</div>

Reference: W3Schools Bootstrap Navbar

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
</ul>

Reference: W3Schools Bootstrap Tabs Pills

Pagination

Basic Pagination

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
</ul>

Sizes: .pagination-lg, .pagination-sm

<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

Breadcrumbs

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li class="active">Pictures</li>
</ul>

Jumbotron and Well

Jumbotron

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Welcome message here</p>
  </div>
</div>

Well

<div class="well">Basic Well</div>
<div class="well well-sm">Small Well</div>
<div class="well well-lg">Large Well</div>

<div class="container">
  <div class="page-header">
    <h1>Example Page Header</h1>
  </div>
  <p>Content here</p>
</div>

Glyphicons

<!-- Icon -->
<span class="glyphicon glyphicon-envelope"></span>

<!-- Link with icon -->
<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>

<!-- Button with icon -->
<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-search"></span> Search
</button>

Common icons: glyphicon-envelope, glyphicon-search, glyphicon-print

Collapse

Basic Collapse

<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
  Content here...
</div>

Default Expanded

<div id="demo" class="collapse in">
  Expanded by default
</div>

Collapsible Panel

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
    </div>
  </div>
</div>

JavaScript Control

$(window.location.hash).collapse('show');
$(window.location.hash).collapse('hide');

Scrollspy

Active navigation item changes based on scroll position. Clicking navigation items scrolls to that section.

Reference: W3Schools Bootstrap Scrollspy

Affix

Fix header position during scroll.

Carousel (Slide)

Image slideshow component.

Reference: W3Schools Bootstrap Carousel

Reference:

Small popup labels.

Reference: W3Schools Bootstrap Tooltip

Responsive Video

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
</div>

Aspect ratios:

.embed-responsive-16by9
.embed-responsive-4by3

Scrollable Pre

<pre class="pre-scrollable">
  Long preformatted text...
</pre>

Forms