|
Rows are in .container or .container-fluid
|
|
.col-xs-
|
Always
|
Full
|
|
.col-sm-
|
>768
|
750 wide
|
|
.col-md-
|
>992
|
970 wide
|
|
.col-lg-
|
>1200
|
1170 wide
|
|
.clearfix
|
|
.col-xs-offset- (sm, md, lg)
|
|
Nest using a .row inside a col
|
|
.col-xs-push- (sm, md, lg)
|
|
.col-xs-pull- (sm, md, lg)
|
|
.visible-xs (sm, md, lg)
|
|
.hidden-xs (sm, md, lg)
|
|
.visible-print
|
|
.hidden-print
|
|
@grid-columns:
|
12
|
|
@grid-gutter-width:
|
30px
|
|
@grid-float-breakpoint:
|
768px
|
|
.h1
|
.h2
|
.h3
|
|
.h4
|
.h5
|
.h6
|
|
.small
|
<small>
|
.lead
|
|
.text-left
|
.text-right
|
|
.text-center
|
.text-justify
|
|
.text-muted
|
.text-primary
|
|
.text-success
|
.text-info
|
|
.text-warning
|
.text-danger
|
|
.bg-primary
|
.bg-success
|
|
.bg-info
|
.bg-warning
|
|
.bg-danger
|
|
|
.text-hide
|
.sr-only
|
|
.list-unstyled
|
.list-inline
|
|
<dl> <dt>...</dt> <dd>...</dd> </dl>
|
|
.dl-horizontal
|
|
.img-responsive (max-width:100%, height:auto)
|
|
.img-rounded
|
|
.img-circle
|
|
.img-thumbnail (double border)
|
|
.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"
|
|
|
.label
|
.label-default
|
|
primary, success, info, warning, danger
|
|
|
.alert .alert-success
|
|
|
success, info, warning, or danger
|
|
|
.alert-dismissable
|
|
|
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
|
<a href="#" class="alert-link">...</a>
|
|
.table
|
.table-striped
|
|
.table-bordered
|
.table-hover
|
|
.table-condensed
|
|
|
.table-responsive
|
|
|
.active
|
.success
|
.info
|
|
.warning
|
.danger
|
|
|
abbr
<abbr title="attribute">attr</abbr>
|
|
address
<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>
|
|
blockquote
<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><section></code>
|
|
kbd Keyboard Entry
<kbd>cd</kbd>
|
|
.pre-scrollable
Max Height 350px box, with y-axis scrollbar. Used with pre tag
|
|
close button
<button type="button" class="close" aria-hidden="true">×</button>
|
|
Caret
<span class="caret"></span>
|
|
Floats
.pull-left .pull-right
|
|
Float Mixin
.element { .pull-left(); }
|
|
Clear Floats
.clearfix
|
|
Center Block (mixin also)
.center-block (display:block, margin auto) | .center-block();
|
|
Show (mixin also)
.show | .show();
|
|
Hide (mixin also)
.hide | .hide();
|
|
Glyphicons
<span class="glyphicon glyphicon-search"></span>
|
Why can't I download the pdf file through the "Download this Cheat Sheet (PDF)" link? Thanks.
Here is a Bootstrap CSS classes desk reference pdf and a sortable table with descriptions to help sort through the list. You can find it here. https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/
It is one of my goals to learn/ master Bootstrap. For me it is easier to dissect it into its component parts. The bootstrap.css is huge and involves normalize.css, glyphicons.css, and probably other components as well. Having a cheat sheet that breaks it down is very helpful. Thank you!
Here is a cheat sheet I put together that has a sortable index of all of the classes with descriptions. https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/
I have given a interview, in it a interviewer ask me, how can i give top-margin of 5px in bootstrap, tell me the class name, I told him, we can give by adding custom class. Because as i study and worked. I didn't see a class like that, has bootstrap as top-margin or margin class? by default.
this is a nice notes for all thanks sirji
Yo, copy and pasting your classes gives double -- in the class names? Any idea why this might be?
thanks that is really good
it's awesome.. :)
Update.. http://www.cheatography.com/hamburg/cheat-sheets/optional-and-official-bootstrap-classes-v3-2x/
Love this
Great cheat sheet! I've been working with Bootstrap a bit recently and this is going to be really handy.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
