| Basic template |
bs3--init |
HTML |
Bootstrap V3 Template |
- version
- The Bootstrap version
Default value: 3.3.7
|
| Accordion |
bs3-accordion |
HTML |
Extend the default collapse behavior to create an accordion with the panel component. |
- id
- ID of the modal
Default value: collapse - context
- Appearance: default primary success danger warning info
Default value: default - heading1
- The heading for the panel
Default value: Panel Heading - content1
- The content for the accordion
Default value: Change it - heading2
- The heading for the panel
Default value: Panel Heading - content2
- The content for the accordion
Default value: Change it - heading3
- The heading for the panel
Default value: Panel Heading - content3
- The content for the accordion
Default value: Change it
|
| Alert |
bs3-alert |
HTML |
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. |
- content
- The content for the alert
Default value: <strong>Warning!</strong> Better check yourself, you're not looking too good. - context
- Appearance: default primary success danger warning info
Default value: default
|
| Badge |
bs3-badge |
HTML |
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more. |
- content
- The content for the badge
Default value: 1234 - context
- Appearance: default primary success danger warning info
Default value: default
|
| Breadcrumb |
bs3-breadcrumb |
HTML |
Indicate the current page's location within a navigational hierarchy. |
- None
|
| Button |
bs3-btn |
HTML |
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. |
- context
- Appearance: default primary success danger warning info
Default value: default - size
- Size: df xs sm lg (use df as a default placeholder)
Default value: df
|
| Button with dropdown |
bs3-btn-dropdown |
HTML |
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. |
- context
- Appearance: default primary success danger warning info
Default value: default - size
- Size: df xs sm lg (use df as a default placeholder)
Default value: df
|
| Button with dropdown split |
bs3-btn-dropdown-split |
HTML |
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. |
- context
- Appearance: default primary success danger warning info
Default value: default - size
- Size: df sm lg (use df as a default placeholder)
Default value: df
|
| Button group |
bs3-btn-group |
HTML |
Group a series of buttons together on a single line with the button group. |
- context
- Appearance: default primary success danger warning info
Default value: default - size
- Size: df xs sm lg (use df as a default placeholder)
Default value: df
|
| Button toolbar |
bs3-btn-toolbar |
HTML |
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components. |
- context
- Appearance: default primary success danger warning info
Default value: default - size
- Size: df xs sm lg (use df as a default placeholder)
Default value: df
|
| Carousel |
bs3-carousel |
HTML |
A generic plugin and component for cycling through elements like a carousel. |
- id
- ID of the carousel
Default value: my-carousel - image1
- The image for the first item in the carousel
Default value: http://placehold.it/1200x675&text=First+slide - heading1
- The heading for the first item in the carousel
Default value: Caption heading 1 - content1
- The content for the first item in the carousel
Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit. - image2
- The image for second item in the carousel
Default value: http://placehold.it/1200x675&text=Second+slide - heading2
- The heading for the second item in the carousel
Default value: Caption heading 2 - content2
- The content for the second item in the carousel
Default value: Morbi eget libero quis metus consectetur semper. - image3
- The image for the third item in the carousel
Default value: http://placehold.it/1200x675&text=Third+slide - heading3
- The heading for the third item in the carousel
Default value: Caption heading 3 - content3
- The content for the third item in the carousel
Default value: Suspendisse ullamcorper massa eget eleifend iaculis.
|
| Collapsible div |
bs3-collapse |
HTML |
Get base styles and flexible support for collapsible components like accordions and navigation. |
- id
- ID of the collapse object
Default value: collapse - button
- The button text for the collapse object
Default value: Open collapse - content
- The content for the collapse object
Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit. - context
- Appearance: default primary success danger warning info
Default value: default
|
| Form |
bs3-form |
HTML |
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing. |
- context
- Appearance: default primary success danger warning info
Default value: default - size
- Size: df sm lg (use df as a default placeholder)
Default value: df
|
| Form group |
bs3-form-group |
HTML |
A form group with an input and a label. |
- id
- ID of the input
Default value: form-group-input - label
- Text for the label
Default value: Label - type
- Type of the input
Default value: text
|
| Checkbox |
bs3-form-group-checkbox |
HTML |
A form group that contains a checkbox. |
- label
- Text for the label
Default value: Label
|
| Form group horizontal |
bs3-form-group-horizontal |
HTML |
A form group with an input and a label, meant for use in a horizontal form. |
- id
- ID of the input
Default value: form-group-input - label
- Text for the label
Default value: Label - type
- Type of the input
Default value: text
|
| Checkbox group |
bs3-form-group-horizontal-checkbox |
HTML |
A form group that contains a checkbox, meant for use in a horizontal form. |
- label
- Text for the label
Default value: Label
|
| Form group inline |
bs3-form-group-inline |
HTML |
A form group with an input and a label, meant for use in an inline form. |
- id
- ID of the input
Default value: form-group-input - label
- Text for the label
Default value: Label - type
- Type of the input
Default value: text
|
| Radio |
bs3-form-group-radio |
HTML |
A form group that contains a radio. |
- label
- Text for the label
Default value: Label
|
| Form group select |
bs3-form-group-select |
HTML |
A form group with a select dropdown and a label. |
- id
- ID of the select
Default value: form-group-select - label
- Text for the label
Default value: Label
|
| Form horizontal |
bs3-form-horizontal |
HTML |
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row. |
- context
- Appearance: default primary success danger warning info
Default value: default
|
| Form inline |
bs3-form-inline |
HTML |
Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide. |
- context
- Appearance: default primary success danger warning info
Default value: default
|
| Input group |
bs3-input-group |
HTML |
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control. |
- addon
- The text for the addon
Default value: @ - placeholder
- The placeholder text for the input
Default value: Placecholder - size
- Size: df sm lg (use df as a default placeholder)
Default value: df
|
| Jumbotron |
bs3-jumbotron |
HTML |
A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. |
- heading
- The heading text for the jumbotron
Default value: Jumbotron heading - content
- The content for the jumbotron
Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
| Label |
bs3-label |
HTML |
Easily highlight new or unread items by adding a <span class="label label-default"> to links, Bootstrap navs, and more. |
- content
- The content for the label
Default value: Label content - context
- Appearance: default primary success danger warning info
Default value: default
|
| List group |
bs3-list-group |
HTML |
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. |
- content1
- Item 1 content
Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit. - content2
- Item 2 content
Default value: Morbi eget libero quis metus consectetur semper. - content3
- Item 3 content
Default value: Suspendisse ullamcorper massa eget eleifend iaculis.
|
| Media list |
bs3-media-list |
HTML |
Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content. |
- image1
- The image for the first media object
Default value: http://placehold.it/64x64 - heading1
- The heading for the first media object
Default value: Media heading 1 - content1
- The content for the first media object
Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit. - image2
- The image for second media object
Default value: http://placehold.it/64x64 - heading2
- The heading for the second media object
Default value: Media heading 2 - content2
- The content for the second media object
Default value: Morbi eget libero quis metus consectetur semper. - image3
- The image for the third media object
Default value: http://placehold.it/64x64 - heading3
- The heading for the third media object
Default value: Media heading 3 - content3
- The content for the third media object
Default value: Suspendisse ullamcorper massa eget eleifend iaculis.
|
| Media object |
bs3-media-object |
HTML |
Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content. |
- image
- The image for the media object
Default value: http://placehold.it/64x64 - heading
- The heading for the media object
Default value: Media heading - content
- The content for the media object
Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
| Modal small |
bs3-modal |
HTML |
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. |
- id
- ID of the modal
Default value: myModal - title
- Title of the modal
Default value: Modal title - content
- Content of the modal
Default value: <p>Change it</p> - close-text
- Text for the "close" button
Default value: Close - save-text
- Text for the "save" button
Default value: Save - context
- Appearance: default primary success danger warning info
Default value: default - context2
- Appearance: default primary success danger warning info
Default value: primary - size
- Size: df xs sm lg xl (use df as a default placeholder)
Default value: df
|
| Navigation pills |
bs3-nav-pills |
HTML |
Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style. |
- None
|
| Navigation tabs |
bs3-nav-tabs |
HTML |
Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style. |
- None
|
| Navigation bar |
bs3-navbar |
HTML |
Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases. |
- None
|
| Page header |
bs3-page-header |
HTML |
A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles). |
- heading
- The main text for the page header
Default value: Example page header - content
- The subtext for the page header
Default value: Subtext for header
|
| Pager |
bs3-pager |
HTML |
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines. |
- None
|
| Pagination |
bs3-pagination |
HTML |
Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative. |
- None
|
| Panel |
bs3-panel |
HTML |
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component. |
- heading
- The heading text for the panel
Default value: Panel heading - content
- The content for the panel
Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit. - context
- Appearance: default primary success danger warning info
Default value: default
|
| Popover |
bs3-popover |
HTML |
Add small overlays of content, like those on the iPad, to any element for housing secondary information. |
- title
- The title for the popover
Default value: Popover title - popover
- The text for the popover
Default value: And here's some amazing content. It's very engaging. Right? - content
- The content for the popover link
Default value: Click to toggle popover - context
- Appearance: default primary success danger warning info
Default value: default
|
| Progress bar |
bs3-progress-bar |
HTML |
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars. |
- progress
- The percentage of progress
Default value: 50
|
| Thumbnail |
bs3-thumbnail |
HTML |
Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more. |
- image
- The image for the thumbnail object
Default value: http://placehold.it/64x64 - heading
- The caption heading for the thumbnail object
Default value: Thumbnail caption heading - content
- The caption content for the thumbnail object
Default value: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> - smcolsize
- Add modifier to change col size: 1 2 3 4 5 6 7 8 9 10 11 12
Default value: 4 - mdcolsize
- Add modifier to change col size: 1 2 3 4 5 6 7 8 9 10 11 12
Default value: 4
|
| Tooltip |
bs3-tooltip |
HTML |
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. |
- tooltip
- The text for the tooltip
Default value: Some tooltip text! - content
- The content for the tooltip link
Default value: Hover over me
|
| Glyphicon |
fa- |
HTML |
Glyphicons are graphics included with Bootstrap. |
- icon
- The name of the icon
Default value: info-sign
|