Twitter Bootstrap Cheatsheet Grid Tables

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">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.