Bootstrap Properties Reference

Bootstrap is one of the most widely used responsive CSS libraries around. Here is a list of the most useful Bootstrap properties you should consider using.

Content Classes

Text

Realign text to components with text-* – where * can be left, right, center, justify, or nowrap
Transform text in components with text-* – where * can be lowercase, uppercase, or capitalize

List

Remove list style with list-unstyled.
Change a list to be on one line with list-inline
list-group – are a flexible and powerful component for displaying not only simple lists of elements but complex ones with custom content.
- list-group-items
  - If adding items that are <a> or <button> no need for individual parents <ul> around each item.
  - Set active link or button with the active class.
  - To gray out or disable an item use the disabled class.
  - Buttons inside of a list do not require the btn class.

Table

table – basic styling—light padding and only horizontal dividers.
table-striped – to add zebra-striping to any table row within the <tbody>
table-bordered – for borders on all sides of the table and cells.
table-hover – to enable a hover state on table rows within a <tbody>
table-condensed – to make tables more compact by cutting cell padding in half.
table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
Use contextual classes to color table rows (tr) or individual cells (td).
- active – Applies the hover color to a particular row or cell.
- success – Indicates a successful or affirmative action.
- info – Indicates a neutral, informative change or action.
- warning – Indicates a signal that might need attention.
- danger – Indicates a dangerous or potentially adverse action.

Form

form-group – wraps labels and controls with optimal spacing.
form-control – elements are set to width:100%.
form-inline – applies left-aligned and inline-block controls.
form-horizontal – use Bootstrap’s predefined grid classes to align labels and groups of form controls in a horizontal layout.
- All form-group’s behave as grid rows.
form-control-static – when you need to place plain text next to a form label within a form.

Checkboxes and Radio buttons

checkbox
checkbox-inline
radio
radio-inline
disabled – provide a “not allowed” cursor on hover of the parent tag.
By default checkbox and radio, groups will be stacked horizontally
*-inline will display the classes in a series on the same line.
Both checkbox and radio create a block that contains a <label><input type=”checkbox/radio”…>text</label>

Bootstrap includes validation styles for error, warning, and success states on form controls.

has-warning, has-error, or has-success
Applies to parent element
Any control-label, form-control, and help-block within that element will receive the validation styles.

Note: Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

Buttons

Button classes can be applied to <a>, <button>, or <input> elements.
btn
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link
btn-lg, btn-sm, or btn-xs
btn-block
active
disabled

Labels

Similar functionality to buttons
Classes get added to <span>
label
label-(default, primary, success, info, warning. danger) identical functionality to similar button classes.

Making Images Responsive

img-responsive – applies a max-width of 100%, auto height, and display blocked in relation to the image parent.
center-block – centers the image to the parent.
Images can be displayed as shapes using img-*, where * can be rounded, circle, or thumbnail.

Containers

To add new rows to your container you need to create a new <div> using the “row” class.

Rows must be within a container or container-fluid <div> block for proper alignment and padding.
Use rows to create horizontal groups of columns (max 12 columns per row).
Content should be within columns, and only columns may be immediate children of rows.
The negative margin will be outdented so that the content within grid columns is lined up with non-grid content.
Rows can also be nested, but they have to nested inside a column block.

Columns must be inside a row block.

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices (xs, sm, md, lg).
If more than 12 columns exist within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
Grid columns specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
Applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
To manage how the columns will stack on smaller devices you can group .col-* class elements together. For example, if you want 3 columns to be grouped together on medium devices or smaller you can manage the columns by adding <div class=”.col-xs-6 with .col-md-4″>. When displayed on mobile the columns will start out with a 50% width and bump up to 33.3% when viewed on a desktop.
clearfix
col-md-offset-* – Increase the left margin based on the value of *.
col-md-push-* and col-md-pull-* – used to change the built-in order of the grid. Push moves to the right, pull moves to the left.
If you wish to make a column hidden or visible when viewed on certain displays replace “col” with “visible” or “hidden”. For example, if you only want to show a column when viewed on smaller devices use visible-xs-*.

Custom Bootstrap Properties

Navigation Bars

Navbars containers that are responsive meta components that serve as navigation headers for your application or site. These containers support brand images, forms, buttons, text, and non-navigation links.

They begin collapsed (and are toggleable) in mobile views
Become horizontal as the available viewport width increases.
<nav> tag
- navbar
- navbar-default
- navbar-fixed-top (bottom) – fixes the menu to the top or bottom of the page.
- navbar-static-top – creates a navbar across the full-width navbar that scrolls away.
- <div> can be used in place of <nav> but requires an additional attribute of role=”navigation”
- navigation components should be placed within a container or container-fluid <div> block for proper alignment and padding.

navbar-header
navbar-toggle
navbar-brand
navbar-collapse
- Requires the JS collapse plugin to work.
navbar-brand – replaces the navbar brand. Need to provide an image inside the brand block.
navbar-form – all content places inside this block will be displayed vertically.
- Some form controls, like input groups, may require fixed widths to show up correctly within a navbar.
navbar-left (right) – start aligning the elements from the left or right.
To add a button to your navbar create an <button> and insert the additional class of navbar-button (this can combine with btn btn-default).
To add text to the navbar add the class navbar-text to a <p> inside the navbar container.
navbar-link – adds the proper colors for the default and inverse navbar options.
navbar-inverse – changes the look of the navbar.

Menu Drop Downs

If you wish to create menu (drop down) links:
- Create an outer container with<ol> or <ul> tags using the class nav and navbar-nav.
- Create a <li> with the class drop-down to create the dropdown container.
- Nest inside the dropdown <li> create a link <a> to toggle the menu by adding:
  - href=”#”
  - class=”dropdown-toggle”
  - data-toggle=”dropdown”
  - role=”button”
  - aria-haspopup=”true” – enables the popup menu when clicked
  - aria-expanded=”false” – when page loads menu will be collapsed.
- Following the link create a new list block with the class drop-down to add your menu items.
- To create separators in a drop-down add a <li> with role=”separator” and class'”divider”

Badges

badge – class added to <span> to highlight unread items or messages. On mobile, this would be the number that pops up on you email icon when you have new unread messages.

Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Add jumbotron class to a <div> block to add content to the jumbotron
Does not require a container, but can be used with a nested <div> using a container or container-fluid for proper alignment and padding.

Media Object

Media Objects use content blocks to Display content like blogs, tweets, or messages. These messages display with an image, title, and text.

media-list – outer container containing one to many media blocks
media – container for media block
- media-left (right, top, middle, bottom)
- media-object
- media-body
  - media-heading

Carousel

Carousel creates a scrolling headline containing components like images, button, and text.

To create a carousel container you need to create a div with:
- class=”carousel slide”
- data-ride=”carousel”
Carousel indicators are <ol> blocks using class=”carousel-indicators”. This block will contain the slides <li>.
- Add the following to your slides <li>
  - data-target=”#carousel id” – attribute points to the id of the carousel.
  - data-slide-to=”0″ – attribute specifies which slide to go to when clicking on the specific dot.
  - Using the class active set the slide to be the starting slide.
Now you need to create the wrappers for the slides
- These go inside the carousel container, but outside the indicator block.
- Wrappers need to be added to a <div class=”carousel-inner” role=”listbox”> block
- Inside the wrapper create a <div> block using the class=”item” to add components to the slides.
- Use class active to set current slide.
- The slides will add to the carousel-inner in the order they are added.
Left/Right Navigation Controls
- Add navigation controls to the carousel allowing the user to click back and forward thru the slides.
- These are links added within the carousel container outside of the indicator and wrapper blocks.
- Link blocks need to be defined using <a> tag:
  - Must use class=”right(left) carousel-control” indicate link is for right or left control
  - href=”#carousel id” – targets the carousel to control.
  - role=”button” – allows us to add icon button
  - data-slide=”prev(next)” – uses accepted keywords (prev, next).
- To add a glyph icon add a <span> inside the link block with:
  - class=”glyphicon glyphicon-chevron-left(right)”
  - aria-hidden=”true”
- Incase glyph is not available make sure to add alt text using another <span> inside link block:
  - class=”sr-only”
  - Add text inside the <span>..</span> to display.