Rows - Grid SystemRows are in .container or .container-fluid |
Columns.col-xs- | Always | Full | .col-sm- | >768 | 750 wide | .col-md- | >992 | 970 wide | .col-lg- | >1200 | 1170 wide |
Resets, Offsets, Pushes, Pulls.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 Variables@grid-columns: | 12 | @grid-gutter-width: | 30px | @grid-float-breakpoint: | 768px |
Using Grid Mixin CSS.wrapper {.make-row();}
.content-main {.make-lg-column(8);}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
} |
Using Grid Mixin HTML<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div> |
| | Typography.h1 | .h2 | .h3 | .h4 | .h5 | .h6 | .small | <small> | .lead |
@font-size-base | @line-height-base
Align.text-left | .text-right | .text-center | .text-justify |
Text Helpers.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 |
Lists.list-unstyled | .list-inline |
Descriptions<dl> <dt>...</dt> <dd>...</dd> </dl> | .dl-horizontal |
Images.img-responsive (max-width:100%, height:auto) | .img-rounded | .img-circle | .img-thumbnail (double border) |
| | Buttons<button type="button" class="btn btn-default">Default</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> |
Button Classes.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" |
Labels.label | .label-default | primary, success, info, warning, danger |
<span class="label label-default">New</span>
Badge<span class="badge">42</span> |
Alerts.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> |
Tables.table | .table-striped | .table-bordered | .table-hover | .table-condensed | .table-responsive |
Wrap .table in .table-responsive
<div class='table-responsive'>
...table
</div>
Rows or Cells.active | .success | .info | .warning | .danger |
Tagsabbr <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> |
|
Created By
www.e-rehab.com
Metadata
Favourited By
and 68 more ...
Comments
Great cheat sheet! I've been working with Bootstrap a bit recently and this is going to be really handy.
Came to find this, was happy to see it on the homepage!
Love this
Update.. http://www.cheatography.com/hamburg/cheat-sheets/optional-and-official-bootstrap-classes-v3-2x/
it's awesome.. :)
thanks that is really good
Yo, copy and pasting your classes gives double -- in the class names? Any idea why this might be?
this is a nice notes for all thanks sirji
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.
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/
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 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/
Why can't I download the pdf file through the "Download this Cheat Sheet (PDF)" link? Thanks.
Add a Comment
Related Cheat Sheets