Styleguide
Tracia I belive this code is using an older version of Boostrap but its a great and quick example to get started.
The minimum html boiler plate to add boostrap is in
Rules
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.
Colors
Darker colors
Background primary
Background success
Background info
Background warning
Background danger
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.
Grid
Grid System
.col-xs-12
.col-xs-6
.col-xs-3
.col-xs-3
.col-xs-3
.col-xs-3
.col-xs-3
.col-xs-3
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
Typography
Header with tags or classes
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1 subtitle
Heading 2 subtitle
Heading 3 subtitle
Heading 4 subtitle
Heading 5 subtitle
Heading 6 subtitle
Heading 1 subtitle
Heading 2 subtitle
Heading 3 subtitle
Heading 4 subtitle
Heading 5 subtitle
Heading 6 subtitle
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
Examples body text
text lead, with bigger font.
The following snippet of text is the default paragraph.
The following snippet of text is the default paragraph with a link.
The following snippet of text is hilighted.
The following snippet of text is deleted.
The following snippet of text is Strikethrough.
The following snippet of text is inserted.
The following snippet of text is underlined.
The following snippet of text is small.
The following snippet of text is bold.
The following snippet of text is italic.
The following snippet of text is abbreviation.
The following snippet of text has a smaller text on start.
The following snippet of text is a code <section>.
The following snippet of text is a keyboard instruction cd.
text lead, with bigger font.
The following snippet of text is the default paragraph.
The following snippet of text is the default paragraph with a link.
The following snippet of text is hilighted.
The following snippet of text is deleted.
The following snippet of text is Strikethrough.
The following snippet of text is inserted.
The following snippet of text is underlined.
The following snippet of text is small.
The following snippet of text is bold.
The following snippet of text is italic.
The following snippet of text is abbreviation.
The following snippet of text has a smaller text on start.
The following snippet of text is a code <section>.
The following snippet of text is a keyboard instruction cd.
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.
Emphasis classes / text colors
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Text white Etiam porta sem malesuada magna mollis euismod.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Text white Etiam porta sem malesuada magna mollis euismod.
Maecenas sed diam eget risus varius blandit sit amet non magna.
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.
Transformation text classes
Lowercased text.
Uppercased text.
Capitalized text.
Main title with uppercase text
Lowercased text.
Uppercased text.
Capitalized text.
Bigger text with uppercase text
Bigger text with uppercase text
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.
Addresses
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.
Carets / triangle
this need a caret
this need a caret
How to use
Just add a span with the caret class.
When to use
This is part od dropdown elements.
Close button
this needs a close button on right side
How to use
Add the snoped of code, as it is.
When to use
Use buttons for close alerts and modals
Icons
Use icons always in standlone elements, never mix icons with other classes
How to use
When to use
Alignment classes
Left aligned text.
Center aligned text.
Right aligned text.
Justified text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe asperiores, quibusdam voluptatem nihil numquam esse ratione laborum ad, voluptatibus dolore earum molestiae optio eveniet unde. Quia doloribus vero libero nam.
No wrap text.
Left aligned text.
Center aligned text.
Right aligned text.
Justified text. Lorem ipsum dolor sit amet.
No wrap text.
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.
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
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.
Lists
Unordered
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
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.
Ordered
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
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.
Unstyled
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
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.
Inline
- Phasellus
- Purus
- Vestibulum
- tristique
- Phasellus
- Purus
- Vestibulum
- tristique
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.
Definition lists
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Term 1
- Description for term 1
- Term 2
- Description for term 2
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.
Tables
Basic table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First Name |
|---|---|
| 1 | Mark |
| 2 | Jacob |
| 3 | Larry |
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
Table with striped rows
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| # | First Name |
|---|---|
| 1 | Mark |
| 2 | Jacob |
How to use
Same as basic table, but with an extra class for better visualization of rows.
When to use
Same as basic table.
Table with borders
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First Name |
|---|---|
| 1 | Mark |
| 2 | Jacob |
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.
Table with hover in rows
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First Name |
|---|---|
| 1 | Mark |
| 2 | Jacob |
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.
Table with colors in rows
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| # | Column heading |
|---|---|
| 1 | Column content |
| 2 | Column content |
| 3 | Column content |
| 4 | Column content |
| 5 | Column content |
| 6 | Column content |
| 7 | Column content |
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.
Table with small rows
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First Name |
|---|---|
| 1 | Mark |
| 2 | Jacob |
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.
Table responsive
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| # | First Name |
|---|---|
| 1 | Mark |
| 2 | Jacob |
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.
Forms
Inputs states
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.
Inputs sizes
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.
Inputs group addons
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.
Basic vertical form
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.
Basic inline form
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.
Basic horizontal form
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.
Form with grid
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.
Buttons
Buttons default
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
Buttons disabled
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
Buttons dropdowns
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.
Buttons sizes
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.
Block buttons
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.
Button Group
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)
Button Group Justified
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.
Button toolbar
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.
Button group vertical
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.
Images
Image shapes
Rounded
Circle
Thumbnail
How to use
add the class img-rounded, img-circleor img-thumbnail to the image tag.
The appearance is changed only by the rounded or with border, the classes dont change the size, so we can use class img-thumbnail to apply border in a large image.
When to use
No spoecific rules.
Position
Floats
This goes to left
This goes to right
This block goes to center
Not the text!
Not the text!
This goes to left
This goes to right
This block goes to center
Not the text!
Not the text!
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.
Show and Hide elements
Visible / Invisible elements
3 divs bellow, two hidden, one visible
Visible with
.show
Invisible with
Invisible with .hidden
.invisible « Something invisible here!
Visible with
.show Invisible with
Invisible with .hidden .invisible « Something invisible here! 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.
Visible only to screen readers
Something invisible here!
Skip to main content
Something invisible here!
Skip to main content
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.
Image replacement
Phrase » 
« with some text hidden
« with some text hidden
Phrase » Custom heading « with some text hidden
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.
Responsive and Print classes
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
Visible as block on small screens only
Visible as block on big screens
Visible as inline on small screens only
Visible as inline on big screens
Visible as block for print only
Visible as block on small screens only
Visible as block on big screens
Visible as inline on small screens only
Visible as inline on big screens
Visible as block for print only
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:
Dropdowns
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.
Navigation
Tabs
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.
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.
Pills Horizontal
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.
Pills vertical
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.
Navbar
Default Navbar and Inverse navbar
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
Breadcrumbs
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.
Pagination
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.
Pager
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.
Indicators
Labels
Default
Primary
Success
Warning
Danger
Info
Default
Primary
Success
Warning
Danger
Info
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.
Badges
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.
Jumbotron
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium in quo non libero quod autem dolor atque provident, necessitatibus expedita. Nam ipsam incidunt ut minus molestiae inventore blanditiis, quaerat ab?
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium in quo non libero quod autem dolor atque provident, necessitatibus expedita. Nam ipsam incidunt ut minus molestiae inventore blanditiis, quaerat ab?
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.
Page header
Default page header
Example page header Subtext for header
Example page header Subtext for header
How to use
Use a title with the page-header wrapper.
When to use
Use to create page or section headers.
Custom elements
How to use
The example is a simple use case of different components together, using the grid.
When to use
No specific rule.
Alerts
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
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.
Progress bars
Basic
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.
Media object
Default
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
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
Media alignment
Top aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Bottom aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Top aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Bottom aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
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
Containers
List groups
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Disabled item
- 1 Morbi leo risus
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac 1 Morbi leo risus
- Vestibulum at eros
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Disabled item
- 1 Morbi leo risus
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac 1 Morbi leo risus
- Vestibulum at eros
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
List groups links
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
List groups content
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
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.
Panels
Basic
Basic panel strong without title
Panel heading
Panel content
Panel heading with strong title
Panel content
Panel content
Basic panel strong without title
Panel heading
Panel content
Panel heading with strong title
Panel content
Panel content
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.
With content
Panel with table
Panel content
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Panel with list group
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et atque vitae veniam deleniti, dolorem natus tempora sit mollitia ipsum porro eligendi, voluptatibus voluptatem nostrum nihil doloribus dolorum cum corporis recusandae.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Panel with table
Panel content
| # | First Name |
|---|---|
| 1 | Mark |
| 2 | Jacob |
| 3 | Larry |
Panel with list group
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et atque vitae veniam deleniti, dolorem natus tempora sit mollitia ipsum porro eligendi, voluptatibus voluptatem nostrum nihil doloribus dolorum cum corporis recusandae.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
How to use
When to use
Pannels with states
Panel primary
Panel content
Panel success
Panel content
Panel warning
Panel content
Panel danger
Panel content
Panel info
Panel content
Panel primary
Panel content
Panel success
Panel content
Panel warning
Panel content
Panel danger
Panel content
Panel info
Panel content
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.
Wells
Well sizes
Look, I'm in a well!
Look, I'm in a small well!
Look, I'm in a large well!
Look, I'm in a well!
Look, I'm in a small well!
Look, I'm in a large well!
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.
Dialogs
Modals
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.
Popovers
How to use
When to use
Tooltips
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.
Collapse
Simple collapsible element
Link with href
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum a excepturi nobis quos, fugit nihil, dolores consectetur neque atque illo molestias reiciendis itaque, iste ratione et ullam suscipit quam minima.
Link with href
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum a excepturi nobis quos, fugit nihil, dolores consectetur neque atque illo molestias reiciendis itaque, iste ratione et ullam suscipit quam minima.
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.
Accordeon
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
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.
Carousel
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..