BUTTONS <a> <button> <input>
btn- Required base styling for buttons.
-
btn-danger- Medium size button rendered in white text and red background.
btn-default- Medium size button rendered in dark text and white background.
btn-info- Medium size button rendered in white text and light blue background.
btn-link- Medium size button rendered with blue text and no background
btn-primary- Medium size button rendered in white text and blue background.
btn-success- Medium size button rendered in white text and green background.
btn-warning- Medium size button rendered in white text and orange background.
-
btn-lg- Increase button size one unit.
btn-md- Render button in default size.
btn-sm- Reduce button size by one unit.
btn-xs- Reduce button size two units.
btn-block- Expand button to full width of the container.
-
active- Shows the button as selected.
disabled- Shows the button as unclickable.
-
btn-group- Used to enclose buttons in a div to appear and function as a group.
|
CHECKBOX
checkbox- Sets up vertical checkbox control
checkbox-inline- Sets up horizontal checkbox control
|
CONTEXTUAL COLORS - TEXT
Foreground
text-muted- Renders in gray.
text-primary- Renders in bright blue.
text-success- Renders in green.
text-info- Renders in dark blue
text-warning- Renders in a dark grey.
text-danger- Renders in red.
Background
bg-primary- Renders background in bright blue.
bg-success- Renders background in green
bg-info- Renders background in light blue.
bg-warning- Renders background n peach.
bg-danger- Renders background in pink.
|
CONTAINER
container- Creates a fixed width container
container-fluid- Creates a full width responsive container
Containers cannot be nested. All Bootstrapped elements must reside in a container.
|
FORM
form-control- Sets up standard formatting for HTML5 input controls
form-group- Sets up a div as a control container
form-horizontal- Aligns form elements horizontally
form-inline- Creates a left aligned form with inline block controls
|
GRID COLUMN
Extra Small -- devices less than 768px such as a phone
col-xs-1- Creates a column that is 1/12th wide
col-xs-2- Creates a column that is 1/6th wide
col-xs-3- Creates a column that is 1/4th wide
col-xs-4- Creates a column that is 1/3rd wide
col-xs-5- Creates a column that is 5/12ths wide
col-xs-6- Creates a column that is 1/2 wide
col-xs-7- Creates a column that is 7/12ths wide
col-xs-8- Creates a column that is 3/4 wide
col-xs-9- Creates a column that is 2/3rds wide
col-xs-10- Creates a column that is 5/6ths wide
col-xs-11- Creates a column that is 11/12ths wide
col-xs-12- Creates a column that is full width
Small -- devices between 768px and 992px such as a tablet (creates a 750px wide grid)
col-sm-1- Creates a column that is 1/12th wide
col-sm-2- Creates a column that is 1/6th wide
col-sm-3- Creates a column that is 1/4th wide
col-sm-4- Creates a column that is 1/3rd wide
col-sm-5- Creates a column that is 5/12ths wide
col-sm-6- Creates a column that is 1/2 wide
col-sm-7- Creates a column that is 7/12ths wide
col-sm-8- Creates a column that is 3/4 wide
col-sm-9- Creates a column that is 2/3rds wide
col-sm-10- Creates a column that is 5/6ths wide
col-sm-11- Creates a column that is 11/12ths wide
col-sm-12- Creates a column that is full width
Medium -- devices between 992px and 1200px such as a laptop (creates a 750px wide grid)
col-md-1- Creates a column that is 1/12th wide
col-md-2- Creates a column that is 1/6th wide
col-md-3- Creates a column that is 1/4th wide
col-md-4- Creates a column that is 1/3rd wide
col-md-5- Creates a column that is 5/12ths wide
col-md-6- Creates a column that is 1/2 wide
col-md-7- Creates a column that is 7/12ths wide
col-md-8- Creates a column that is 3/4 wide
col-md-9- Creates a column that is 2/3rds wide
col-md-10- Creates a column that is 5/6ths wide
col-md-11- Creates a column that is 11/12ths wide
col-md-12- Creates a column that is full width
Large -- devices between over 1200px such as a desktop PC (creates a 1170px wide grid)
col-lg-1- Creates a column that is 1/12th wide
col-lg-2- Creates a column that is 1/6th wide
col-lg-3- Creates a column that is 1/4th wide
col-lg-4- Creates a column that is 1/3rd wide
col-lg-5- Creates a column that is 5/12ths wide
col-lg-6- Creates a column that is 1/2 wide
col-lg-7- Creates a column that is 7/12ths wide
col-lg-8- Creates a column that is 3/4 wide
col-lg-9- Creates a column that is 2/3rds wide
col-lg-10- Creates a column that is 5/6ths wide
col-lg-11- Creates a column that is 11/12ths wide
col-lg-12- Creates a column that is full width
Features a 15px left gutter and a 15px right gutter.
All columns must equal 12.
|
GRID ROW
row- Creates a horizontal row in either a container or a column
|
LISTS <ol> <ul> <dl>
list-unstyled- Remove default formatting from top level list items.
list-inline- Arrange list items in horizontal line (useful for creating menu bars).
dl-horizontal- Arrange definition lists to side by side arrangement instead of the
default vertical stacking
list-group- Arranges list in a vertical stack with framed boxes (useful for setting up left nav)
Works in conjunction with
list-group-items.
|
LIST ITEMS <li>
list-group-item- Used in conjunction with
list-group to create vertically stacked lists.
|
MODALS
modal- Sets up a basic modal popup box. ID ties to triggering element--see note below.
modal-body- Container for body elements
modal-content- Container for body, header, and footer.
modal-dialog- Sets up a sizing container for the content. Use with modal-sm or modal-lg.
modal-footer- Container for footer elements. Right justified.
modal-header- Container for header elements. Title line and close button.
modal-lg- Configure for larger size. Used with modal-dialog.
modal-sm- Configure for smaller size. Used with modal-dialog.
Auxiliary features:
container-fluid- Implement the grid system by adding to modal-body
fade- Causes the modal to fade in.
To trigger a modal, all you need is an Anchor (A) element defined with a data-toggle="modal" and a data-target="#modalsName"
|
NAV
nav- Sets up the navagation group
nav-stacked- Switches nav group from default horizontal to vertical stack
nav-pills- Render as pills (similar to a button)
nav-tabs- Render like file folder tabs
tab-content- Sets up grouping for tab-panes
tab-pane- Declares a div as the target of a nav tab or pill. It's where the content goes.
Auxiliary switches used with tab panes:
fade- Use fade transition instead of instant switching
in- Mark tab pane as default
active- Mark tab pane as currently active
|
RADIO
radio- Render radio buttons stacked vertically
radio-inline- Render radio buttons in a horizontal line
|
TABLES <table>
table- Adds basic styling to any table.
table-striped- Adds zebra striping to any table row within tbody.
table-bordered- Adds border on all sides of a table and it's cells.
table-hover- Enables a hover state on rows within tbody.
table-condensed- Makes table more compact.
Rendered table will left justified full width. Enclose complete table with <div></div> elements
to set width and justification. Set the div's class property to table-responsive to make it responsive
on small screens (under 768px). These classes can be combined as needed.
|
TABLE ROWS & CELLS <tr> <th> <td>
active- Applies the hover color to the row or cell.
success- Indicates a postive or successful action.
info- Indicates a neutral information change or action.
warning- Indicates a warning that might need attention.
danger- Indicates a dangerous or potentially negative action.
|
|
|
TEXT
text-capitialize- Transforms text by capitalizing the first letter.
text-center- Justify text to the center.
text-left- Justify text to the left.
text-lower- Transforms text to lower case.
text-justify- Justify text to both left and right.
text-nowrap- Forces text onto one line.
text-uppercase- Transforms text to uppercase.
text-right- Justify text to the right.
|