Containers

Use .container for a responsive fixed width container.

Use .container-fluid for a full width container, spanning the entire width
of your viewport.

Bootstrap grid
The Bootstrap grid system has four classes:

xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
example
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
create a row (<div class="row">). Then, add the desired number of columns

Button Styles
Bootstrap provides seven styles of buttons:

.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

The button classes can be used on an <a>, <button>, or <input> element:

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

The <button> tag can be one of three things:

1. A regular button that does something you specify upon click (type = button).
2. A submit button that submits the form when clicked (type = submit).
3. A reset button that resets the form to its inital values when clicked (type = rest).

Bootstrap Tables
<table>
<thead>
<tbody>
<tr>
<td>

Wrapping element for displaying data in a tabular format

Container element for table header rows (<tr>) to label table columns.
Container element for table rows (<tr>) in the body of the table.
Container element for a set of table cells (<td> or <th>) that appears on a single row.
Default table cell.
Special table cell for column (or row, depending on scope and placement) labels. Must be
<th>
used within a <thead>
<caption> Description or summary of what the table holds.

Basic Table
<table class="table">
<table class="table table-striped">
<table class="table table-bordered">
<table class="table table-hover">
<table class="table table-condensed">

Responsive tables
<div class="table-responsive">
<table class="table">
</table>
</div>

Contextual classes
Class
Description
.active Applies the hover color to a particular row or cell

.success Indicates a successful or positive action

.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

Bootstrap Images
.img-rounded : adds border-radius:6px to give the image rounded corners.
.img-circle : makes the entire image round by adding border-radius:500px.
.img-thumbnail : adds a bit of padding and a gray border:
The .img-responsive class applies max-width: 100%; and height: auto; to the image:
You can also use Bootstrap's grid system in conjunction with the .thumbnail class to create an image gallery:
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
</a>
</div>

Jumbotron
Use a <div> element with class .jumbotron to create a jumbotron:
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
</div></div>

Page Header
Use a <div> element with class .page-header to create a page header:

<div class="page-header">
<h1>Example Page Header</h1>
</div>

Wells
The .well class adds a rounded border around an element with a gray background color and some
padding:
<div class="well">Basic Well</div>

Change the size of the well by adding the .well-sm class for small wells or .well-lg class for large
wells:

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

Pager
Pager is also a form of pagination . to create previous/next buttons, add the .pager class to an <ul>
element:
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
the .previous and .next classes to align each button to the sides of the page:
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>

Bootstrap Dropdowns
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" datatoggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
The .dropdown class indicates a dropdown menu.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the datatoggle="dropdown" attribute.
The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.
The .divider class is used to separate links inside the dropdown menu:
<li class="divider"></li>
The .dropdown-header class is used to add headers inside the dropdown menu:
<li class="dropdown-header">Dropdown header 1</li>
To disable an item in the dropdown menu, use the .disabled class:
<li class="disabled"><a href="#">CSS</a></li>
To right-align the dropdown, add the .dropdown-menu-right class to the element with
.dropdown-menu:
<ul class="dropdown-menu dropdown-menu-right">
to expand upwards instead of downwards, change the <div> element with class="dropdown" to
"dropup":
<div class="dropup">

Menus
a menu is often defined in an unordered list <ul>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
horizontal menu of the list above, add the .list-inline class to <ul>

Tabs
Tabs are created with <ul class="nav nav-tabs">:
<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>
<li><a href="#">Menu 3</a></li>
</ul>