Use the technique of Mobile First to creat the pages and components.

Always start with the classes relates do the smaller screens, Example

Right .col-xs-12.col-md-6

Wrong .col-md-6.col-xs-12 .col-xs-12.col-lg-6.col-md-4

Always start writting the grid elements.

Avoid mix elements with grid classes and other component classes

Start using elements already created on bootstrap instead create new ones

Use the grid classes to orders and change the orders of the elements, but avoid too many changes in the same page.

How to use

Just add the class bg-XXX to the element.

To avoid conflict with some pre existent background-color just add another div with the class.

When to use

Avoid change backgrounds to this colors, they should be used only for main actions and elements of a page.

The most important elements that can need this colors already exist on the styleguide, like buttons, labels, progress bars and panels.

How to use

To see the grid, use the class .show-grid on the body tag or on the area that you wanna check.

Always, check if has a container with a row and col-XXX-nr.

If you need split columns, add a new row.

Use the mobile first aproach, to create pages and to organize the order of classses in HTML.

When to use

All elements and components should be inserted inside a col-XXX-nr

How to use

Add the tag heading with the right font-size or add the class hXX.

To add subtitle or helper text, add a small tag inside the heading element

The tag can be a heading or any other element.

When to use

Try to use only one h1 for each page. If you need visually more than one, use the class in other level of heading

For main titles of the page, prefer to use the component Page Header

How to use

Just add regular HTML texts tags

Avoid create exceptions and custom css styles fo texts

All the texts shopuld be insertd inside text tags.

When to use

For every text, prefer to use the regular elements and default texts.

How to use

Just add the class text-XXX to the element.

To avoid conflict with some pre existent text-color just add another div with the class.

When to use

Use this colors to highlight some information, or giv feedback to the user.

The most important elements that can need this colors already exist on the styleguide, like error messages, titles, input label states and alert texts.

How to use

Add the proper classes to the text tag.

Avoid add on parent elements, like add in the panel element, instead of the content of panel

To avoid conflict with some pre existent cont-style, add a extra span with the right class.

When to use

No specif rule, just try to avoid the default text styles of components.

How to use

Just small snippet of code, no specic rule

When to use

Try do add this for any address reference, for better SEO.

How to use

Just add a span with the caret class.

When to use

This is part od dropdown elements.

How to use

Add the snoped of code, as it is.

When to use

Use buttons for close alerts and modals

How to use

When to use

How to use

Just add the classes to components, but do not mix this with columns.

When to use

This classes are fot text only, no specific rules.

Just add the components, with tle optional class to the right alignment, but do not mix this with columns.

When to use

This classes are fot text only, no specific rules.

How to use

Jus add plain ul markup

When to use

Check the type of contet, if is unordered list, when the order of the elements don't matter.

How to use

Jus add plain ol markup

When to use

Check the type of contet, if is ordered list, when the order of the elements matter.

How to use

Jus add plain ol or ul markup

Dont mix the list-inline with list-unstyled.

When to use

Choose the ul or ol based on the content, and if the layout requires, or the bullets and numbers are not needed, use the unstyled style.

How to use

Jus add plain ol or ul markup

Dont mix the list-inline with list-unstyled.

When to use

Choose the ul or ol based on the content, and if the layout requires, or the bullets and numbers are not needed, use the inline style.

How to use

Jus add plain definition list markup with the optional class for horizontal layout.

When to use

Choose the dl if you have a list with scrict titles and descriptions. Add the horizontal layout to make more eradable.

How to use

Write basic markup, and try to use the elements caption with a short description of the table and thead, tbody, th and td for separation of header and content.

When to use

Use tables for what they are intented to, tabular data, or, organized data, with titles, and coparision of rows

How to use

Same as basic table, but with an extra class for better visualization of rows.

When to use

Same as basic table.

How to use

Same as basic table, but with an extra class for better visualization if mixed with other components in same page.

When to use

Same as basic table.

How to use

Same as basic table, but with an extra class for better visualization when interacting with the content of the table.

We can add this behavior/class along with other classes, like class for striped rows.

When to use

Same as basic table, plus if we have too many rows, too many columns or need compare data.

How to use

Same as basic table, but with an extra class for some lines, based on states classes.

When to use

Same as basic table, with some rows with colors, based on state of the data, present or not in the table, for example, with an extra column "completed" or just the color, instead the text.

How to use

Same as basic table, but with an extra class for small table.

When to use

Use if you ahve a small table as part of other component, like detail, not if the table ins the main content of the page.

How to use

Same as basic table, but with an extra class for small screens.

This class just add horizontal scroll to the table on mobile devices.

When to use

Add this behavior if the table as too many columns, or if the content of some column as too many text.

How to use

Use the default property autofocus to set the initial focus to some field.

Use the default property disabled to set disable some field.

Add the class has-STATE to the form-group elelemnt, and the field and labels will follow the colors of the state.

When to use

Use the autofocus if the main purpose of the screen is fill the field.

Use the disabled if we need to show to the user that some information is not changeable. If some information is not possible to change and the user dont need to know that, hide the information instead of show as non editable.

The input states are emant to give feedback to the user:

Warning

If the field is valid but has some information (like, date of expiration too short)

Danger

If the field is invalid and prevents the form to be submited or save.

Success

If the field is valid and ready to be submited or re submited.

How to use

Add the class input-SIZE to the input element.

When to use

Use always the default size, change to bigger or smaller if the main action of the page is not a single form.

Use small input-sm if the form ins inside another element, like a table.

Use large input-lg if you have a form with few fields or inside a container with higher priority, like a modal.

How to use

Add a span with the class input-group-addon just before or after the field.

When to use

Use the add on as helper to teh user, with something that can be part of the value, but dont need to be filled, because its a default value, like a currency symbol, default cents of a price, or country phone code.

Avoid to use the add on as a label of the field.

How to use

form-group blocks without grid are displayed stacked, with vertical layout

When to use

Vertical forms should be used for long forms, when the form is the main action of the page.

Prefer to write forms with the grid system.

How to use

Add the class form-inline in the form element to display form-groups aligned horizontally, as text, without label.

When to use

Use for small forms, with one or two fields.

Prefer to write forms with the grid system.

How to use

Add the class form-horizontal in the form element to display form-groups as rows, with the label aligned to the field, on left side.

When to use

Same use as the default form, but limited to the sise of the label of the field.

Prefer to write forms with the grid system.

How to use

Write thre grid first, and after this insert in each row the proper label or field.

When to use

Best aproach in most of the cases, because has betetr control in the small screens, better than juns stack / use the vertical form.

How to use

Use the button classes btn btn-STATE to set thebutton appearance to button, linka a, or other elements like div or span.

When to use

Choose the right state for the action, generally:

btn-default

Button without stae, for secondary actions

btn-primary

Main and desired action of the page or form. One for page/form

btn-success

Use to give feedback about an action or confirm the main action.

btn-info

Use for helper actions, like, open a tooltip with instructions.

btn-warning

btn-danger

Action that can be undone, like delete, reset.

btn-link

Button as text

How to use

add the disabled class to any button-STATE to show the light version/.

When to use

Use for disabed buttons, when the action is disable, like, after the user already press the button, or need to fill some field before

How to use

Create a button group with two links with the btn btn-STATE class, followed by a list with dropdown-menu.

When to use

Use whe the user has to choose the sub action, for example a "Delete" button, with subaction "Delete all" and "Delete this".

Avoid mix diferent types of actions inside the same dropdoww, like "Save" and "Delete".

Avoid to use the dropdow as a menu.

How to use

Add the size button class with the button state classes btn btn-STATE btnSIZE.

When to use

Prefer to use the default size, change the size to follow the size of the form, with the same rules as the input sizes.

How to use

Add the btn-block class to force the button to behave like a block, using the full width.

This classe works well when you yse buttons inside cols of the grid

When to use

Use with the grid to controll better how the button is displayed in slall screens or if yopu need large buttons in bigger screens too.

How to use

Wrap regular buttons inside a element with btn-group.

When to use

Use to create groups of buttons with similar behavior, like pagination, or texts controls (bold / italic)

How to use

Same as Button Group with an extra class btn-group-justified.

When to use

Use to make a btn-group use the full width, to make the actions more visible.

How to use

Wrap a set of btn-group indide a element with the class btn-toolbar.

You can add a dropdown too.

When to use

Use when you have to group other groups of btn-group with related actions, for example, group two lists of actiosn related to soem etxt editor, firs with bold, italic, and other with align left, align center and align right.

How to use

Wrap the buttons inside a btn-group-vertical element.

When to use

Group buttons and actions with similar actions, stacked to fit the layout, or only for small screens.

Rounded

Circle

Thumbnail

How to use

Just add the classes to components, but do not mix this with columns.

Dont use to fload a position a column.

When to use

This classes are fot blocks only, no specific rules.

How to use

Add the class show, hiddenor invisible to the element.

invisible class change the visibility, not the display type, so the element still using space on the screen.

When to use

Use show/hidden to make elements lvisible/unvisible to the user, only if the element visibility can be toggled without reload. If the element never will be visible, the element should be not present on the HTML.

How to use

With the class sr-only you can make shortcuts for screenreaders.

When to use

Use to hide something, like a menu, to teh regular users, and add a shortuct or message to the users using screen readers.

How to use

With the class text-hide you can hide texts inside elements and keep the images or other elements.

When to use

use to hide image descriptions, like in logos.

Classes to hide/show based on screen size

To show some element only for one screen size, use the classes .visible-XX-

To hide some element only for one screen size, use the classes .hidden-XX-

For both types of classes, you can choose the display type, with the last part of the class name, using

.visible--block

display: block;

.visible--inline

display: inline;

.visible-*-inline-block

display: inline-block;

The same behavior works for hide/print with the Drop .visible-print-block .visible-print-inline .visible-print-inline-block

How to use

Add the class visible-SIZE-DISPLAY to the element to hide in a specifi screen size.

When to use

You can use this classes just to show/hide some element like a banner that should be visible only on mobile, for example, or duplicate content, with diffent layouts based on screel size, for example:

How to use

Inside a dropdown wrapper, add a button (with a caret span inside), followed by a list with dropdown-menu class.

To change the direction of open submenu, wrap with the class dropup.

You can add a list header, inside the list dropdown-menu, adding the class dropdown-header to the list element.

You can add a list divider, inside the list dropdown-menu, adding the class divider to the list element.

When to use

Use dropdows to create navigations grouped, like in Buttons dropdowns.

How to use

Create a list with the class nav nav-tabs with links to panel tab IDs.

When to use

Avoid create too many tabs, because they are not responsive, and break line in small screens

You can use responsive visible classes to show the navigation as tabs on bigger screens and as collapse in small screens.

How to use

Create a list with the class nav nav-pills.

When to use

Use to create a navigation like tabs, but without the behavior of tabs, with hidden elements with content.

You can use responsive visible classes to show the navigation as pills on bigger screens and as collapse or Pills vertical in small screens.

How to use

Create a list with the class nav nav-pills nav-stacked.

When to use

Use to create a navigation like tabs, but without the behavior of tabs, with hidden elements with content.

You can use responsive visible classes to show the navigation as pills stacked on bigger screens and as collapse in small screens.

How to use

Add the navbar class wrapper, and the content elements inside.

Use the navbar-toggle collapsed to create the button to open the menu in small screens.

Add the navbar-inverse to change the color.

When to use

Use in top o footer of the page, or both, with the main links and submenus

How to use

Just create a list with the breadcrumb.

The last item, to the current page should be a plain text.

When to use

Add in all the pages, with the site map to teh current page.

How to use

Add a simple list with the pagination class and the class for size pagination-SIZE or style pagination-STYLE.

When to use

Try ti display pagination in top and footer of the lists, if the list is bigger than the size on screen.

How to use

Add a list with the pager class. To add the arrows, use the previous or next classes to the list item.

When to use

Try to use pagination with numbers, or the pagination plain, only with the links if not possible.

How to use

Add span element with the classes label label-STATE.

Avoid mix the label classes with other classes.

When to use

Use to display small texts, informing the user about the state or counting of some item.

How to use

Add span element with the class badge.

Avoid mix the label classes with other classes.

When to use

Use to display small texts or numbers, informing the user about the state or counting of some item.

How to use

Use snimet of code aside, and change the content.

Donr change the headings, for better appearance.

When to use

Use to create page or section headers, one per gape or section.

How to use

Use a title with the page-header wrapper.

When to use

Use to create page or section headers.

How to use

The example is a simple use case of different components together, using the grid.

When to use

No specific rule.

How to use

Add the alert to the wrapper element, with the style class, alert-STYLE

You can add button to close, with the markup and the class alert-dismissible on the wrapper element.

To add titles, add the headings or use the element strong.

When to use

Use to give feedback to the user, about an action.

Avoid use as simple box, with form or any other content inside.

With label

Animated

Stacked

Contextual alternatives

Striped

How to use

Add a element progress-bar wiyth a inline width, inside a a progress wrapper.

To show the value of the bar, add the text inside the codw progress-bar.

To animate the progress-bar add the class progress-striped to the wrapper.

Use progress-bar-STATE to change the color os the bars.

The progress accepst multiple bars inside, use diferent colors, like progress-STYLE do make visible, and care with the order of elements to make all visible.

When to use

Use to show progress of some complex operation, like multiple page form, or duration of some operation.

How to use

Add the wrapper media with the content, and the right classes to position the media/image

When to use

No specific rule

How to use

Add the wrapper media with the content, and the right classes to position the media/image

When to use

No specific rule

How to use

Add the list-group to the ul element and list-group-item to each list item element

When to use

Use for show lists with states for itens

How to use

Add the list-group to the div element and list-group-item to each link.

When to use

Use to display links as a stacked list, like menus, with or without states

How to use

Like the regular list-group, but with complex content.

When to use

The same as list-group, but avoid content too large inside.

How to use

When to use

Add the class panel panel-default to the div, and the elements panel-heading, panel-footer, optionals, and panel-body.

When to use

Use to cerate areas of content, avoid add states to panels, of the content is too big, like a form.

Avoid stacked panels.

How to use

When to use

How to use

Add the class panel panel-STATE to the div, and the elements panel-heading, optional, and panel-body.

When to use

Use to cerate areas of content, avoid add states to panels, of the content is too big, like a form.

How to use

Just add the well class the element.

When to use

Use to display any static information to the user.

Avoid add too many content inside, like forms. Try to use as information box only, like the alerts.

How to use

Copy the code snippet aside, check if has the corrects IDs and buttons to close.

Use the areas with the right content, titles, body and footer for actions and buttons.

When to use

Use modals to show adtional informations, confirm actions

Avoid use modals to display forms or any main task to the user.

How to use

When to use

How to use

Add the property data-toggle="tooltip" to any element and the properties, optional, data-placement and data-original-title.

When to use

Use to display tiny informations and feedbacks to the user. The information of tooltips sjould not be required to complete any task.

How to use

Add the property data-toggle="collapse" to the link, with the href or data-target= with the ID of the collapsible element.

When to use

Use to display extra information, like the toltips.

Avoid use collapsible elements mandatory to complete some action.

Use as external controller to collapse.

How to use

Add the panel wrapper with the panel-heading and panel-collapse and add the unique IDs.

Use the code snipet

When to use

Use for information and fors splited by steps or groups of type of information, when is mandatory show only one step at each time.

You can use the collapse as a small screen alternative to the regular tabs navigation.

How to use

Copy the example of code, above. You can use as full row in your page or inside a smaller column.

Add a container inside the content of slides and wrap the carousel-control if necessary.

Use images with the right size, avoid strech images.

When to use

Dont use..