Twitter Bootstrap Cheatsheet

Grid 12 columns with a responsive twist Icons by Glyphicons

<div class="row"> <i class="icon-search
<div class="span1..12">...</div> icon-white
<div class="span4 offset1..12">...</div> "></i>
</div>

Tables For, you guessed it, tabular data Buttons push it, push it real good
<table class="table <a class="btn
table-striped btn-primary
table-bordered btn-info
table-condensed"> btn-success
<thead> btn-warning
<tr> btn-danger
<th>…</th> btn-inverse
<th>…</th> btn-large|-small|-mini
</tr> disabled"
</thead> >Push it!</a>
<tbody>
<tr> Dropdowns use in buttons, tabs, nav
<td>…</td>
<td>…</td> <a class="btn dropdown-toggle"
</tr> data-toggle="dropdown"
</tbody> href="#">
</table> Action <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
Forms four types of forms
<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">Can’t 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.