Scribd
Upload
77 views

Bootstrap Cheat Sheet: by Via

The document provides a cheat sheet summary of Bootstrap components including: the grid system for rows and columns, typography styles, buttons, forms, images, alerts, tables, tags, and glyphs. It lists the classes and mixins for common Bootstrap elements and their usage.

Uploaded by

Tarb
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
77 views

Bootstrap Cheat Sheet: by Via

The document provides a cheat sheet summary of Bootstrap components including: the grid system for rows and columns, typography styles, buttons, forms, images, alerts, tables, tags, and glyphs. It lists the classes and mixins for common Bootstrap elements and their usage.

Uploaded by

Tarb
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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)

<div class="content-secondary">...</div>

.img-rounded

Columns

</div>

.col-xs-

Always

Full

.col-sm-

>768

750 wide

.col-md-

>992

970 wide

.col-lg-

>1200

1170 wide

Resets, Offsets, Pushes, Pulls

.img-circle
.img-thumbnail (double border)

Typography
.h1

.h2

.h3

.h4

.h5

.h6

.small

<small>

.lead

@font-size-base | @line-height-base

.clearfix
.col-xs-offset- (sm, md, lg)

.col-xs-push- (sm, md, lg)


.col-xs-pull- (sm, md, lg)

.text-right

.text-center

.text-justify

.hidden-xs (sm, md, lg)

.text-muted

.text-primary

.visible-print

.text-success

.text-info

.hidden-print

.text-warning

.text-danger

.bg-primary

.bg-success

.bg-info

.bg-warning

12

@grid-gutter-width:

30px

@grid-float-breakpoint:

768px

Using Grid Mixin CSS


.wrapper {.make-row();}
.content-main {.make-lg-column(8);}

.bg-danger
.text-hide

<a href="#" class="btn btn-primary btn-lg


active" role="button">Primary link</a>
Button Classes

Text Helpers

@grid-columns:

Buttons

default">Default</button>

.text-left

.visible-xs (sm, md, lg)

Grid Variables

NEED TO DO

<button type="button" class="btn btn-

Align

Nest using a .row inside a col

Forms

.sr-only

.btn-default

.btn-primary

.btn-success

.btn-info

.btn-warning

.btn-danger

.btn-link (to look like a link)


.btn-lg

.btn-sm

.btn-xs

.btn-block

.active (A tag)

.disabled (A tag)

disabled="disabled"
Lists
.list-unstyled

.list-inline

Labels
.label

.label-default

Descriptions

primary, success, info, warning, danger

.make-lg-column(3);

<dl> <dt>...</dt> <dd>...</dd> </dl>

<span class="label label-default">New</span>

.make-lg-column-offset(1);

.dl-horizontal

.content-secondary {

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

By John Mason (masonjo)

Published 29th April, 2014.

Sponsored by CrosswordCheats.com

cheatography.com/masonjo/

Last updated 1st June, 2014.

Learn to solve cryptic crosswords!

www.e-rehab.com

Page 1 of 3.

http://crosswordcheats.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" ariahidden="true">&times;</button>
<a href="#" class="alert-link">...</a>
By John Mason (masonjo)

Published 29th April, 2014.

Sponsored by CrosswordCheats.com

cheatography.com/masonjo/

Last updated 1st June, 2014.

Learn to solve cryptic crosswords!

www.e-rehab.com

Page 2 of 3.

http://crosswordcheats.com

Bootstrap Cheat Sheet

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


Tables

Tags (cont)

.table

.table-striped

.table-bordered

.table-hover

close button
<button type="button" class="close" ariahidden="true">&times;</button>

.table-condensed

Caret

.table-responsive

<span class="caret"></span>

Wrap .table in .table-responsive


<div class='table-responsive'>

Floats

...table

.pull-left .pull-right

</div>

Float Mixin
Rows or Cells

.element { .pull-left(); }

.active

.success

.warning

.danger

.info

Clear Floats
.clearfix
Center Block (mixin also)

Tags

.center-block (display:block, margin auto) |

abbr

.center-block();

<abbr title="attribute">attr</abbr>
address

Show (mixin also)


.show | .show();

<address> <strong>Twitter, Inc.</strong>


<br> 795 Folsom Ave, Suite 600<br> San
Francisco, CA 94107<br> <abbr
title="Phone">P:</abbr> (123) 456-7890
</address>

Hide (mixin also)


.hide | .hide();
Glyphicons
<span class="glyphicon glyphicon-

blockquote

search"></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 CrosswordCheats.com

cheatography.com/masonjo/

Last updated 1st June, 2014.

Learn to solve cryptic crosswords!

www.e-rehab.com

Page 3 of 3.

http://crosswordcheats.com

You might also like