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.