Twitter Bootstrap Cheatsheet

Grid 12 columns with a responsive twist

Icons by Glyphicons

<div class="row">
<div class="span1..12">...</div>
<div class="span4 offset1..12">...</div>
</div>

<i class="icon-search
icon-white
"></i>

Tables For, you guessed it, tabular data Buttons push it, push it real good
<table class="table
table-striped
table-bordered
table-condensed">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Forms four types of forms

<a class="btn
btn-primary
btn-info
btn-success
btn-warning
btn-danger
btn-inverse
btn-large|-small|-mini
disabled"
>Push it!</a>

Dropdowns use in buttons, tabs, nav

<a class="btn dropdown-toggle"
data-toggle="dropdown"
href="#">
Action <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>

<form class="form-vertical|form-horizontal|form-inline|form-search">
<fieldset>
<legend>Legend text</legend>
<div class="control-group error|warning|success">
<label class="control-label">Name</label>
<div class="controls">
<input type="text"
class="input-mini|-small|-medium|-large|-xlarge|-xxlarge
span1..12 disabled ">
<label class="checkbox|radio">
<input type="checkbox|radio"> Option
</label>
<span class="uneditable-input">Cant touch this</span>
<span class="help-inline">Supporting inline help text</span>
<p class="help-block">Supporting help text</p>
</div>
</div>
<div class="form-actions">
<button class="btn btn-primary">Save</button>
</div>
</fieldset>
</form>

Twitter Bootstrap is licensed under the Apache License v2.0.

This cheatsheet is brought to you by Dresssed, premium themes for Rails based on Bootstrap.