11/30/2015 - 7:00 PM

List of Twitter Bootstrap CSS classes

List of Twitter Bootstrap CSS classes

 * Scaffolding
 * Basic and global styles for generating a grid system, structural layout, and page templates
 * ------------------------------------------------------------------------------------------- */

Sets a width of 940px which also centres the content (clears floated elements before/after)

Sets a minimum width of 940px (clears floated elements before/after)

Floats element to the right

Floats element to the left

sets element to display:none

sets element to display:block

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

Sets width of 300px

Sets width of 620px

Sets margin-left of 340px (so clears .span-one-third by 40px)

Sets margin-left of 660px (so clears .span-two-thirds by 40px)

/* Forms.less
 * Base styles for various input types, form layouts, and states
 * ------------------------------------------------------------- */

Sets element to block and gives border-radius + sets height/line-height to 18px + sets a box-shadow + background colour white + cursor: not-allowed

Sets width to 60px

Sets width to 90px

Sets width to 150px

Sets width to 210px

Sets width to 270px

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

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

line-height 18px + font-size: 13px

padding-left: 20px;

 * Tables.less
 * Tables for, you guessed it, tabular data
 * ---------------------------------------- */

Applies smaller padding than default

Applies borders to the table

Uses CSS3 to apply stripes (e.g. tr:nth-child(odd) td)

table .header

/* Patterns.less
 * Repeatable UI elements outside the base styles provided from the scaffolding
 * ---------------------------------------------------------------------------- */

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

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)

Applies relevant styles to a <ul> element

Sets elements as a large promotional section

Applies box-shadow and bottom-border

Different button styles

Applies padding/background colours/border-radius/box-shadow