Bootstrap Cheat Sheet

by John Mason (masonjo) via cheatography.com/18871/cs/1992/

Rows - Grid System Using Grid Mixin HTML Images

Rows are in .container or .container-fluid <div class="wrapper"> .img-responsive (max-width:100%,

<div class="content-main">...</div> height:auto)
Columns <div class="content-secondary">...</div>
.img-rounded
</div>
.col-xs- Always Full .img-circle

.col-sm- >768 750 wide Typography .img-thumbnail (double border)

.col-md- >992 970 wide

.h1 .h2 .h3
Forms
.col-lg- >1200 1170 wide
.h4 .h5 .h6
NEED TO DO
.small <small> .lead
Resets, Offsets, Pushes, Pulls
@font-size-base | @line-height-base Buttons
.clearfix

.col-xs-offset- (sm, md, lg) <button type="button" class="btn btn-

Align
default">Default</button>
Nest using a .row inside a col
.text-left .text-right <a href="#" class="btn btn-primary btn-lg
.col-xs-push- (sm, md, lg) active" role="button">Primary link</a>
.text-center .text-justify
.col-xs-pull- (sm, md, lg)
Button Classes
.visible-xs (sm, md, lg) Text Helpers

.hidden-xs (sm, md, lg) .btn-default .btn-primary

.text-muted .text-primary
.visible-print .btn-success .btn-info
.text-success .text-info
.hidden-print .btn-warning .btn-danger
.text-warning .text-danger
.btn-link (to look like a link)
.bg-primary .bg-success
Grid Variables
.btn-lg .btn-sm
.bg-info .bg-warning
@grid-columns: 12 .btn-xs .btn-block
.bg-danger
@grid-gutter-width: 30px .active (A tag) .disabled (A tag)
.text-hide .sr-only
@grid-float-breakpoint: 768px disabled="disabled"

Lists
Using Grid Mixin CSS Labels
.list-unstyled .list-inline
.wrapper {.make-row();} .label .label-default
.content-main {.make-lg-column(8);}
Descriptions primary, success, info, warning, danger
.content-secondary {
.make-lg-column(3); <dl> <dt>...</dt> <dd>...</dd> </dl> <span class="label label-default">New</span>
.make-lg-column-offset(1); .dl-horizontal
} Badge

<span class="badge">42</span>

By John Mason (masonjo) Published 29th April, 2014. Sponsored by Readability-Score.com

cheatography.com/masonjo/ Last updated 1st June, 2014. Measure your website readability!
www.e-rehab.com Page 1 of 3. https://readability-score.com
 Bootstrap Cheat Sheet
by John Mason (masonjo) via cheatography.com/18871/cs/1992/

Alerts

.alert .alert-success

success, info, warning, or danger

.alert-dismissable

<button type="button" class="close" data-dismiss="alert" aria-

hidden="true">&times;</button>

<a href="#" class="alert-link">...</a>

By John Mason (masonjo) Published 29th April, 2014. Sponsored by Readability-Score.com

cheatography.com/masonjo/ Last updated 1st June, 2014. Measure your website readability!
www.e-rehab.com Page 2 of 3. https://readability-score.com
 Bootstrap Cheat Sheet
by John Mason (masonjo) via cheatography.com/18871/cs/1992/

Tables Tags (cont)

.table .table-striped close button

.table-bordered .table-hover <button type="button" class="close" aria-

.table-condensed hidden="true">&times;</button>

.table-responsive Caret

Wrap .table in .table-responsive <span class="caret"></span>

<div class='table-responsive'> Floats
...table
.pull-left .pull-right
</div>
Float Mixin
Rows or Cells .element { .pull-left(); }

.active .success .info Clear Floats

.warning .danger .clearfix

Center Block (mixin also)

Tags
.center-block (display:block, margin auto) |
abbr
.center-block();
<abbr title="attribute">attr</abbr>
Show (mixin also)
address
.show | .show();
<address> <strong>Twitter, Inc.</strong>
Hide (mixin also)
<br> 795 Folsom Ave, Suite 600<br> San
Francisco, CA 94107<br> <abbr .hide | .hide();
title="Phone">P:</abbr> (123) 456-7890
Glyphicons
</address>
<span class="glyphicon glyphicon-search">
blockquote </span>
<blockquote> <p>Lorem ipsum dolor sit
amet, consectetur adipiscing elit.
Integer</p> </blockquote>

blockquote footer

<footer>Someone famous in <cite

title="Source Title">Source
Title</cite></footer>

blockquote right justify

.blockquote-reverse

code

<code>&lt;section&gt;</code>

kbd Keyboard Entry

<kbd>cd</kbd>

.pre-scrollable

Max Height 350px box, with y-axis scrollbar.

Used with pre tag

By John Mason (masonjo) Published 29th April, 2014. Sponsored by Readability-Score.com

cheatography.com/masonjo/ Last updated 1st June, 2014. Measure your website readability!
www.e-rehab.com Page 3 of 3. https://readability-score.com