Created
November 24, 2011 14:16
-
-
Save Integralist/1391440 to your computer and use it in GitHub Desktop.
List of Twitter Bootstrap CSS classes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Scaffolding | |
* Basic and global styles for generating a grid system, structural layout, and page templates | |
* ------------------------------------------------------------------------------------------- */ | |
.container | |
Sets a width of 940px which also centres the content (clears floated elements before/after) | |
.container-fluid | |
Sets a minimum width of 940px (clears floated elements before/after) | |
.pull-right | |
Floats element to the right | |
.pull-left | |
Floats element to the left | |
.hide | |
sets element to display:none | |
.show | |
sets element to display:block | |
.row | |
Sets a -20px margin (clears floated elements before/after) | |
.span1 up to .span24 | |
Sets specific pixel width values | |
.row > .offset1 (up to .offset12) | |
Sets specific margin-left values | |
.span-one-third | |
Sets width of 300px | |
.span-two-thirds | |
Sets width of 620px | |
.span-one-third | |
Sets margin-left of 340px (so clears .span-one-third by 40px) | |
.span-two-thirds | |
Sets margin-left of 660px (so clears .span-two-thirds by 40px) | |
/* Forms.less | |
* Base styles for various input types, form layouts, and states | |
* ------------------------------------------------------------- */ | |
.uneditable-input | |
Sets element to block and gives border-radius + sets height/line-height to 18px + sets a box-shadow + background colour white + cursor: not-allowed | |
.input-mini | |
.mini | |
Sets width to 60px | |
.input-small | |
.small | |
Sets width to 90px | |
.input-medium | |
.medium | |
Sets width to 150px | |
.input-large | |
.large | |
Sets width to 210px | |
.input-xlarge | |
.xlarge | |
Sets width to 270px | |
.input-xxlarge | |
.xxlarge | |
Sets width to 530px | |
.span1 up to .span16 (when applied to inputs and textareas) | |
Sets specific pixel width values + no float + no left margin + inline-block | |
.actions | |
Sets top/bottom margin of 18px + padding + top border + border-radius | |
.actions .secondary-action | |
floats element right and <a> get a line-height of 30px | |
.help-inline | |
.help-block | |
line-height 18px + font-size: 13px | |
.form-stacked | |
padding-left: 20px; | |
/* | |
* Tables.less | |
* Tables for, you guessed it, tabular data | |
* ---------------------------------------- */ | |
.condensed-table | |
Applies smaller padding than default | |
.bordered-table | |
Applies borders to the table | |
.zebra-striped | |
Uses CSS3 to apply stripes (e.g. tr:nth-child(odd) td) | |
table .header | |
cursor:pointer | |
/* Patterns.less | |
* Repeatable UI elements outside the base styles provided from the scaffolding | |
* ---------------------------------------------------------------------------- */ | |
.topbar | |
Sets height to 40px + position:fixed + to top/left of screen with a very large z-index (10,000) | |
Also sets styles on sub elements like a form, p, input, div > ul | |
.topbar-inner, .topbar .fill | |
Sets dark background gradient | |
.menu-dropdown | |
.dropdown-menu | |
Sets white background, floats to left, absolute positioning, box shadow, border-radius, large z-index (900) + min/max widths + display none!? | |
(I believe this is the drop down menu itself which is hidden until hovered over) | |
.breadcrumb | |
.pagination | |
Applies relevant styles to a <ul> element | |
.hero-unit | |
Sets elements as a large promotional section | |
.page-header | |
Applies box-shadow and bottom-border | |
.btn.error | |
.btn.success | |
.btn.info | |
.btn | |
.btn.primary | |
.btn.active | |
.btn.disabled | |
.btn.large | |
.btn.small | |
.close | |
Different button styles | |
.well | |
Applies padding/background colours/border-radius/box-shadow |
Thank you very much!
I really appreciate this! 💯
guys check this also http://blog.seosemanticxhtml.com/a-complete-reference-library-of-bootstrap-classes/
@aniketpatil007 Broken link
Here is a sortable table with class descriptions I put together https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/ There is also a handy printable PDF reference.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
As someone new to Bootstrap. I sincerely thank you for this list