Elements

Button Style

[button class=“btn-default“ size=““ inline=“false“ link=“#“ ]Default[/button][button class=“btn-primary“ size=““ inline=“true“ link=“#“ ]Primary[/button][button class=“btn-success“ size=““ inline=“true“ link=“#“ ]Success[/button][button class=“btn-info“ size=““ inline=“true“ link=“#“ ]Info[/button][button class=“btn-warning“ size=““ inline=“true“ link=“#“ ]Warning[/button][button class=“btn-danger“ size=““ inline=“true“ link=“#“ ]Danger[/button][button class=“btn-inverse“ size=““ inline=“true“ link=“#“ ]Inverse[/button]


Button Sizes

[button class=“btn-default“ size=“btn-hg“ inline=“false“ link=“#“ ]Extra Large[/button][button class=“btn-default“ size=“btn-lg“ inline=“true“ link=“#“ ]Large[/button][button class=“btn-default“ size=““ inline=“true“ link=“#“ ]Medium[/button][button class=“btn-default“ size=“btn-sm“ inline=“true“ link=“#“ ]Small[/button][button class=“btn-default“ size=“btn-xs“ inline=“true“ link=“#“ ]Extra Small[/button]


Modal Box

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

[modal modal_name=“modal_box1″ btn_label=“Launch Modal Box“ btn_size=“btn-hg“ btn_class=“btn-default“ ][modal_header title=“Modal title“][/modal_header][modal_content]

Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Popover in a modal

This [popover position=“right“ title=“popover title“ label=“And here’s some amazing content. It’s very engaging. right?“]popover[/popover] should trigger a popover on click.

Tooltips in a modal

Here is some dummy text. You can also use [tooltip position=“top“ title=“Hey, i’m a top tooltip!“ ]tooltips[/tooltip]. That one showed on top, but you can have it on the [tooltip position=“bottom“ title=“Hey, i’m a bottom tooltip!“]bottom too[/tooltip]! How about [tooltip position=“left“ title=“Hey, i’m a left tooltip!“ ]left[/tooltip] or [tooltip position=“right“ title=“Hey, i’m a right tooltip!“ ]right[/tooltip]?

Overflowing text to show scroll behavior

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

Donec ullamcorper nulla non metus auctor fringilla.Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.[/modal_content][modal_footer][/modal_footer][/modal]


Tooltips

Here is some dummy text. You can also use [tooltip position=“top“ title=“Hey, i’m a top tooltip!“ ]tooltips[/tooltip]. That one showed on top, but you can have it on the [tooltip position=“bottom“ title=“Hey, i’m a bottom tooltip!“]bottom too[/tooltip]! How about [tooltip position=“left“ title=“Hey, i’m a left tooltip!“ ]left[/tooltip] or [tooltip position=“right“ title=“Hey, i’m a right tooltip!“ ]right[/tooltip]?


Social Icons

[social_icons align=“left“][social name=“dribbble“ link=“#“ label=“Dribbble“ target=“_blank“][/social][social name=“flickr“ link=“#“ label=“Flickr“ target=“_blank“][/social][social name=“github“ link=“#“ label=“Github“ target=“_blank“][/social][social name=“pinterest“ link=“#“ label=“Pinterest“ target=“_blank“][/social][social name=“twitter“ link=“#“ label=“Twitter“ target=“_blank“][/social][social name=“facebook“ link=“#“ label=“Facebook“ target=“_blank“][/social][social name=“google+“ link=“#“ label=“Google+“ target=“_blank“][/social][social name=“skype“ link=“#“ label=“Skype“ target=“_blank“][/social][social name=“tumblr“ link=“#“ label=“Tumblr“ target=“_blank“][/social][social name=“vimeo“ link=“#“ label=“Vimeo“ target=“_blank“][/social][social name=“youtube“ link=“#“ label=“Youtube“ target=“_blank“][/social][social name=“linkedin“ link=“#“ label=“LinkedIn“ target=“_blank“][/social][/social_icons]


Tabs

[tab ids=“tab1,tab2,tab3,tab4″ nav=“Tab 1,Tab 2,Tab 3,Tab 4″][tabpane id=“tab1″]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/tabpane] [tabpane id=“tab2″]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/tabpane][tabpane id=“tab3″]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/tabpane] [tabpane id=“tab4″]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/tabpane][/tab]
[code_wrapper]
[tab ids=“tab1,tab2,tab3,tab4″ nav=“Tab 1,Tab 2,Tab 3,Tab 4″]
[tabpane id=“tab1″]…tab content here …..[/tabpane]
[tabpane id=“tab2″]…tab content here …..[/tabpane]
[tabpane id=“tab3″]…tab content here …..[/tabpane]
[tabpane id=“tab4″]…tab content here …..[/tabpane]
[/tab]
[/code_wrapper]


Accordion

[accordion_wrap][accordion id=“one“ title=“Is this template compatible with Bootstrap 3?“]Absolutely! As shown with a few examples within this demo, you can use all the bootstrap goodies such as carousels, modal windows, tooltips, tabs, accordions, form elements…[/accordion][accordion id=“two“ title=“Is this template compatible with Bootstrap 3?“]Absolutely! As shown with a few examples within this demo, you can use all the bootstrap goodies such as carousels, modal windows, tooltips, tabs, accordions, form elements…[/accordion][accordion id=“three“ title=“Is this template compatible with Bootstrap 3?“]Absolutely! As shown with a few examples within this demo, you can use all the bootstrap goodies such as carousels, modal windows, tooltips, tabs, accordions, form elements…[/accordion][/accordion_wrap]
[code_wrapper]
[accordion_wrap]
[accordion id=“first“ title=“Tab Title“] ….Tab Content ….. [/accordion]
[accordion id=“second“ title=“Tab Title“] ….Tab Content ….. [/accordion]
[accordion id=“third“ title=“Tab Title“] ….Tab Content ….. [/accordion]
[/accordion_wrap]
Note: id must be different in each accordion tab.
[/code_wrapper]


Two Columns

[column_wrapper][one_half]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_half][one_half]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_half][/column_wrapper]

Three Columns

[column_wrapper][one_third]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_third][one_third]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_third][one_third]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_third][/column_wrapper]

Four Columns

[column_wrapper][one_fourth]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_fourth][one_fourth]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_fourth][one_fourth]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_fourth][one_fourth]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_fourth][/column_wrapper]