Dropdowns use in buttons, tabs, nav
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.
Twitter Bootstrap Cheatsheet
Grid 12 columns with a responsive twist
<div class="row">
<div class="span1..12">...</div>
<div class="span4 offset1..12">...</div>
</div>
Tables For, you guessed it, tabular data
<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
<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>
Buttons push it, push it real good
<a class="btn
btn-primary
btn-info
btn-success
btn-warning
btn-danger
btn-inverse
btn-large|-small|-mini
disabled"
>Push it!</a>
<i class="icon-search
icon-white
"></i>
Icons by Glyphicons
<a class="btn dropdown-toggle"
data-toggle="dropdown"
href="#">
Action <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>