Skip to content

Instantly share code, notes, and snippets.

@Integralist
Created November 24, 2011 14:16
Show Gist options
  • Save Integralist/1391440 to your computer and use it in GitHub Desktop.
Save Integralist/1391440 to your computer and use it in GitHub Desktop.
List of Twitter Bootstrap CSS classes
/*
* 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
@MorningZ
Copy link

As someone new to Bootstrap. I sincerely thank you for this list

@namkingkong
Copy link

Thank you very much!
I really appreciate this! 💯

@aniketpatil11
Copy link

@RPDeshaies
Copy link

@aniketpatil007 Broken link

@JacobLett
Copy 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